Next.js (Pages)

Next.jsのpagesディレクトリに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を追加します。

    _app.tsx

    import { UIProvider } from "@workspaces/ui"
import type { AppProps } from "next/app"

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

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

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

    index.tsx

    import { Button } from "@workspaces/ui"

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

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

スクリプト

ColorModeScript

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

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

  • 1

    スクリプトを追加する

    _document.tsx

    import { Html, Head, Main, NextScript } from "next/document"
import { ColorModeScript } from "@workspaces/ui"

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

        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

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

    _document.tsx

    import { Html, Head, Main, NextScript } from "next/document"
import { ColorModeScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <ColorModeScript type="cookie" defaultValue={config.defaultColorMode} />

        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
  • 2

    getServerSidePropsを追加する

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

    get-server-side-props.ts

    import { GetServerSidePropsContext } from "next"

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

    index.tsx

    import { getServerSideSharedProps } from "@/get-server-side-props"
import { Button } from "@workspaces/ui"

export const getServerSideProps = getServerSideSharedProps

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

    プロバイダーを更新する

    _app.tsx

    import { UIProvider } from "@workspaces/ui"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  const { cookie } = pageProps

  return (
    <UIProvider cookie={cookie}>
      <Component {...pageProps} />
    </UIProvider>
  )
}

ThemeSchemeScript

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

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

  • 1

    スクリプトを追加する

    _document.tsx

    import { Html, Head, Main, NextScript } from "next/document"
import { ThemeSchemeScript } from "@workspaces/ui"

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

        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

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

    _document.tsx

    import { Html, Head, Main, NextScript } from "next/document"
import { ThemeSchemeScript } from "@workspaces/ui"
import { config } from "@workspace/theme"

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <ThemeSchemeScript
          type="cookie"
          defaultValue={config.defaultColorMode}
        />

        <Main />
        <NextScript />
      </body>
    </Html>
  )
}
  • 2

    getServerSidePropsを追加する

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

    get-server-side-props.ts

    import { GetServerSidePropsContext } from "next"

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

    index.tsx

    import { getServerSideSharedProps } from "@/get-server-side-props"
import { Button } from "@workspaces/ui"

export const getServerSideProps = getServerSideSharedProps

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

    プロバイダーを更新する

    _app.tsx

    import { UIProvider } from "@workspaces/ui"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  const { cookie } = pageProps

  return (
    <UIProvider cookie={cookie}>
      <Component {...pageProps} />
    </UIProvider>
  )
}