Getting Started with Next.js (App)

A guide for installing Saas UI with Next.js app directory

Installation#

In your Next.js project, install Saas UI and its peer dependencies:

npm i @saas-ui/react @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.

Saas UI and Chakra UI have added use client directive to the top of all components so they are automatically treated as client-side components.

Chakra UI also provides 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 { SaasProvider } from '@saas-ui/react'


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

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

Configure a linkComponent to make the Saas UI components use Link that works with the Next.js router.

'use client'


import Link, { LinkProps } from 'next/link'
import { SaasProvider } from '@saas-ui/react'


const NextLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
  (props, ref) => <Link ref={ref} {...props} />
)


export function Providers({ children }: { children: React.ReactNode }) {
  return <SaasProvider linkComponent={NextLink}>{children}</SaasProvider>
}

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 { Inter } from 'next/font/google'


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


export const fonts = {
  inter,
}

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.inter.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-inter)',
      body: 'var(--font-inter)',
    }
  ...
});

Was this helpful?