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

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

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)',
}
...
});

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel