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

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>
)
}

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

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel