Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

Getting Started with Next.js

Install the package

First, create your application.

Execute one of the following commands in your terminal.

pnpm create next-app my-app --typescript
Copied!

Yamada UI allows you to use most components and hooks by simply installing @yamada-ui/react.

pnpm add @yamada-ui/react
Copied!

If you want to use tables, calendars, carousels, etc., you need to install them separately.

pnpm add @yamada-ui/table
Copied!
PackageDescription
@yamada-ui/table

Provides convenient table components using @tanstack/react-table.

@yamada-ui/calendar

Provides convenient calendar and date picker components using dayjs.

@yamada-ui/carousel

Provides convenient carousel components using embla-carousel-react.

@yamada-ui/dropzone

Provides convenient dropzone components using react-dropzone.

@yamada-ui/charts

Provides convenient chart components using recharts.

@yamada-ui/markdown

Provides convenient markdown components using react-markdown and react-syntax-highlighter.

@yamada-ui/fontawesome

Provides components for conveniently using Font Awesome.

Add UIProvider

After installing Yamada UI, add UIProvider.

_app.tsx

import type { AppProps } from "next/app"
import { UIProvider } from "@yamada-ui/react"


export default function App({ Component, pageProps }: AppProps) {
  return (
    <UIProvider>
      <Component {...pageProps} />
    </UIProvider>
  )
}
Copied!

Add ColorModeScript

To make the color mode work properly, you need to add ColorModeScript inside the body.

This is because the color mode is implemented using localStorage or cookies, and it needs to synchronize correctly at page load.

_document.tsx

import { Html, Head, Main, NextScript } from "next/document"
import { ColorModeScript, defaultConfig } from "@yamada-ui/react"


export default function Document() {
  return (
    <Html lang="en">
      <Head />


      <body>
        <ColorModeScript initialColorMode={defaultConfig.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
Copied!

Add colorModeManager

For sites rendered on the server side, such as Next.js, you may want to include the color mode in the request to avoid changes during hydration.

Prepare getServerSideProps

To standardize getServerSideProps across multiple pages, define getServerSideCommonProps.

import { GetServerSidePropsContext } from "next"


export const getServerSideCommonProps = ({
  req,
}: GetServerSidePropsContext) => {
  return {
    props: {
      cookies: req.headers.cookie ?? "",
    },
  }
}
Copied!

Set cookies in colorModeManager

Set ssr and cookies in createColorModeManager.

_app.tsx

import type { AppProps } from "next/app"
import { UIProvider, createColorModeManager } from "@yamada-ui/react"


export default function App({ Component, pageProps }: AppProps) {
  const { cookies } = pageProps
  const colorModeManager = createColorModeManager("ssr", cookies)


  return (
    <UIProvider colorModeManager={colorModeManager}>
      <Component {...pageProps} />
    </UIProvider>
  )
}
Copied!

Add getServerSideProps

Add the previously created getServerSideCommonProps to each page.

index.tsx

import { getServerSideCommonProps } from "../get-server-side-props.ts"
import { Button } from "@yamada-ui/react"


export default function Index() {
  return <Button>Click me!</Button>
}


export const getServerSideProps = getServerSideCommonProps
Copied!

Use Components

After adding UIProvider, you can call components within your application.

index.tsx

import { Button } from "@yamada-ui/react"


export default function Home() {
  return <Button>Click me!</Button>
}
Copied!

Edit this page on GitHub

PreviousCreate React AppNextVite