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

Link Component

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

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 { 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?