Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.8

Next.jsではじめる

パッケージをインストールする

まず、アプリケーションを作成します。

ターミナルで次のコマンドのいずれかを実行します。

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

Yamada UIは、@yamada-ui/reactをインストールするだけで、ほとんどのコンポーネントやフックを使用できます。

pnpm add @yamada-ui/react
Copied!

テーブル・カレンダー・カルーセルなど使用する場合は、別途インストールをする必要があります。

pnpm add @yamada-ui/table
Copied!
パッケージ説明
@yamada-ui/table

@tanstack/react-tableを使用した、便利なテーブルコンポーネントを提供します。

@yamada-ui/calendar

dayjsを使用した、便利なカレンダーとデイトピッカーコンポーネントを提供します。

@yamada-ui/carousel

embla-carousel-reactを使用した、便利なカルーセルコンポーネントを提供します。

@yamada-ui/dropzone

react-dropzoneを使用した、便利なドロップゾーンコンポーネントを提供します。

@yamada-ui/charts

rechartsを使用した、便利なチャートコンポーネントを提供します。

@yamada-ui/markdown

react-markdownとreact-syntax-highlighterを使用した、便利なマークダウンコンポーネントを提供します。

@yamada-ui/fontawesome

Font Awesomeを便利に使用するためのコンポーネントを提供します。

UIProviderを追加する

Yamada UIをインストール後、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!

ColorModeScriptを追加する

カラーモードを正常に動作させるために、body内にColorModeScriptを追加する必要があります。

理由は、カラーモードがlocalStorageやcookiesを用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。

_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!

colorModeManagerを追加する

Next.jsなどのサーバー側でレンダリングされるサイトの場合は、カラーモードがハイドレーション中に変更することを避けるために、リクエストにカラーモードを含めたい場合があります。

getServerSidePropsを用意する

複数のページでgetServerSidePropsを共通化するために、getServerSideCommonPropsを定義します。

import { GetServerSidePropsContext } from "next"


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

colorModeManagerにcookiesを設定する

createColorModeManagerにssrとcookiesを設定します。

_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!

getServerSidePropsを追加する

先ほど作成したgetServerSideCommonPropsを各ページに追加します。

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!

コンポーネントを使用する

UIProviderを追加したら、アプリケーション内でコンポーネントを呼び出します。

index.tsx

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


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

GitHubでこのページを編集する

前Create React App次Vite