Getting Started with Next.js (Pages)

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#

Wrap your _app.js file with the ChakraProvider

// pages/_app.js
import { ChakraProvider } from '@chakra-ui/react'

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

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.

// lib/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 _app.js to include the font styles.

/* pages/_app.tsx */
import { fonts } from '../lib/fonts'

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <style jsx global>
        {`
          :root {
            --font-rubik: ${fonts.rubik.style.fontFamily};
          }
        `}
      </style>
      <ChakraProvider theme={theme}>
        <Component {...pageProps} />
      </ChakraProvider>
    </>
  );
}

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