在 NextJs 中使用
讓我們在 ** 5 分鐘內探索 Acrool Bear Grid **.
需要的環境
- Nextjs version 13.x
看看使用範本
或 從 GitHub
更改 ModuleResolution
npx 建立預設為 bundler
tsconfig.json
{
"moduleResolution": "node"
}
NextJS config
新增 NextJS 的設定
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true
},
compiler: {
styledComponents: true
}
}
module.exports = nextConfig
新增 網格設定 Provider
src/lib/registry.tsx
'use client'
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
import {GridThemeProvider, TGridTheme} from '@acrool/react-grid';
// 加入這個 ↓
const gridTheme: TGridTheme = {
spacer: '1rem',
gutter: '.625rem',
gridColumns: 12,
gridBreakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1540,
},
containerMaxWidths: {
sm: 540,
md: 720,
lg: 960,
xl: 1140,
xxl: 1141,
},
}
// 加入這個 ↓
interface IBearReactGridRegistryProps {
children: React.ReactNode,
}
// 加入這個 ↓
export function BearReactGridRegistry({
children,
}: IBearReactGridRegistryProps) {
return <GridThemeProvider gridTheme={gridTheme}>
{children}
</GridThemeProvider>;
}
export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode
}) {
// Only create stylesheet once with lazy initial state
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})
if (typeof window !== 'undefined') return <>{children}</>
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children}
</StyleSheetManager>
)
}
src/app/layout.tsx
import './globals.css'
import '@acrool/react-grid/dist/index.css'; // <~ add this
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import StyledComponentsRegistry, {BearReactGridRegistry} from '@/lib/registry';
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Acrool React Grid',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<StyledComponentsRegistry>
<BearReactGridRegistry> { /* <~ add this */ }
{children}
</BearReactGridRegistry>
</StyledComponentsRegistry>
</body>
</html>
)
}
開始使用
src/app/page.tsx
import {Container, Row, Col} from '@acrool/react-grid';
export default function Home() {
return (
<Container>
<Row>
<Col col>flex 1</Col>
<Col col>flex 1</Col>
</Row>
</Container>
);
}
Nextjs issue
Prop className did not match (NEXT 13 + styled-component - without app folder)