Getting Started with Next.js (App)

Installation#

Chakra UI provides an additional integration package @chakra-ui/next-js for Next.js that gives you a smoother experience when using both frameworks.

npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

yarn add @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

pnpm add @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

Setup Provider#

Next.js 13 introduced a new app/ directory / folder structure. By default it uses Server Components. However, Chakra UI only works in client-side components.

To use Chakra UI in server components, you need to convert them into client-side component by adding a 'use client'; at the top of your file.

We've also provided a @chakra-ui/next-js package that gives you a smoother experience when using Chakra UI in the app directory.

// app/providers.tsx
'use client'

import { ChakraProvider } from '@chakra-ui/react'

export function Providers({ children }: { children: React.ReactNode }) {
  return <ChakraProvider>{children}</ChakraProvider>
}

Alternatively, if a hydration error is thrown in Next.js 13 after integrating Providers in the Layout, replace the Providers code with the following implementation:

// app/providers.tsx
'use client';

import { CacheProvider } from '@chakra-ui/next-js';
import { ChakraProvider } from '@chakra-ui/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CacheProvider>
      <ChakraProvider>{children}</ChakraProvider>
    </CacheProvider>
  );
}

Setup Layout#

Next, use the Providers component in your layouts.

// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang='en'>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Styling Next.js Link#

We recommend using the Link component provided from the @chakra-ui/next-js package. It combines the functionality of the Next.js Link and Chakra's styling features.

// app/page.tsx
'use client'
import { Link } from '@chakra-ui/next-js'

export default function Page() {
  return (
    <Link href='/about' color='blue.400' _hover={{ color: 'blue.500' }}>
      About
    </Link>
  )
}

Using custom font#

With Next.js 13, you can optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.

First, you need define the font you need

// app/fonts.ts
import { Rubik } from 'next/font/google'

const rubik = Rubik({
  subsets: ['latin'],
  variable: '--font-rubik',
})

export const fonts = {
  rubik,
}

Next, you need to update your root layout to include the font styles.

// app/layout.tsx
import { fonts } from './fonts'
import { Providers } from './providers'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang='en' className={fonts.rubik.variable}>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

Finally, you can use font variable in your custom theme file across the app.

/* theme.ts */
import { extendTheme } from "@chakra-ui/react";

export const theme = extendTheme({
  ...
    fonts: {
      heading: 'var(--font-rubik)',
      body: 'var(--font-rubik)',
    }
  ...
});

Edit this page on GitHub