Next.js (App)

Next.jsのappディレクトリにYamada UIをインストールして使用するためのガイド。

インストール

  • 1

    アプリケーションを作成する

    Next.jsのアプリケーションを作成します。

    pnpm create next-app my-app --typescript
  • 2

    セットアップする

    コマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。

    pnpm dlx @yamada-ui/cli init
  • 3

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

    アプリケーションに@workspaces/uiをインストールします。

    pnpm add "@workspaces/ui@workspace:*"
  • 4

    プロバイダーを追加する

    インストール後、アプリケーションのルートにUIProviderを追加します。 ハイドレーションエラーを抑制するために、htmlとbodyにsuppressHydrationWarningをtrueに設定します。

    layout.tsx

    import { UIProvider } from "@workspaces/ui"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  )
}
  • 5

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

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

    page.tsx

    import { Button } from "@workspaces/ui"

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

    これで、Yamada UIのセットアップは完了です！

スクリプト

ColorModeScript

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

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

layout.tsx

import { UIProvider, ColorModeScript } from "@workspaces/ui"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ColorModeScript />

        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  )
}

もし、コンフィグのdefaultColorModeを変更した場合は、ColorModeScriptにdefaultValueを設定します。

layout.tsx

import { UIProvider, ColorModeScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ColorModeScript defaultValue={config.defaultColorMode} />

        <UIProvider config={config}>{children}</UIProvider>
      </body>
    </html>
  )
}

ThemeSchemeScript

テーマの切り替えを使用する場合は、正常に動作させるためにbodyにThemeSchemeScriptを追加する必要があります。

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

layout.tsx

import { UIProvider, ThemeSchemeScript } from "@workspaces/ui"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ThemeSchemeScript />

        <UIProvider>{children}</UIProvider>
      </body>
    </html>
  )
}

もし、コンフィグのdefaultThemeSchemeを変更した場合は、ThemeSchemeScriptにdefaultValueを設定します。

layout.tsx

import { UIProvider, ThemeSchemeScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ThemeSchemeScript defaultValue={config.defaultThemeScheme} />

        <UIProvider config={config}>{children}</UIProvider>
      </body>
    </html>
  )
}

クッキーを使用する

クッキーを使用することで、サーバーサイドレンダリングでも正常に動作させることができます。

layout.tsx

import { UIProvider, ColorModeScript, ThemeSchemeScript } from "@workspaces/ui"
import { cookies } from "next/headers"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const cookieStore = await cookies()

  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        <ColorModeScript type="cookie" />
        <ThemeSchemeScript type="cookie" />

        <UIProvider cookie={cookieStore.toString()}>{children}</UIProvider>
      </body>
    </html>
  )
}