Skip to main content

Start NextJS

Let's discover Acrool React Grid in less than 5 minutes.

What you'll need​

Check Example​

Or try in NextJS with CodeSandbox.

Or with GitHub

Change ModuleResolution​

npx create default is bundler

tsconfig.json
{
    "moduleResolution": "node"
}

Next config​

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true
  },
  compiler: {
    styledComponents: true
  }
}

module.exports = nextConfig

Add Grid Theme​

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';

// add this ↓
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,
    },
}

// add this ↓
interface IBearReactGridRegistryProps {
    children: React.ReactNode,
}

// add this ↓
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>
  )
}

Getting Started​

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)