この記事でできること

Chakra UI の機能を使用しながら SPA（シングルページアプリケーション）を実現する。

解決したいこと

Next.js の Linkコンポーネントは、Chakra UIの機能を使うことができない

Next.jsでページを遷移するには、Next.jsで用意されているLinkコンポーネントを使用することが推奨されている。

この方法でページ遷移するとリロードが発生しない。（SPAが実現できている。）

しかし、Next.jsで用意されているLinkコンポーネントはChakra UIの機能を使用することができない。

解決策

@chakra-ui/next-jsパッケージの Linkコンポーネントを使用する

Chakra UI の機能を使用しながらSPAを実現する方法として、Chakra UIが @chakra-ui/next-jsパッケージの Linkコンポーネント を用意している。

このコンポーネントを使用することで、Next.jsとChakra UI、どちらの機能も使用することができる。

@chakra-ui/next-jsパッケージは、 Next.js 13 から使用可能 。

@chakra-ui/reactパッケージのLinkコンポーネントをインポートしないようにする。（リロードが発生してしまい、 SPAにならない 。）

使用方法

インポート文に以下のコードを追加する。

import { Link } from '@chakra-ui/next-js'

以下のように、JSX内で使用する。

<Link href="${ 遷移先のディレクトリ }">${ リンクを与えたいもの }</Link>

使用例

サンプルとして「page1/page.tsx」と「page2/page.tsx」を作成し、「page1」から「page2」へ遷移するリンクを作成する。

「page1/page.tsx」に以下のコードを記述する。

'use client'

import { Link } from '@chakra-ui/next-js'

export default function Home() {
  return (
    <Container centerContent py={8}>
        <Link href="/page2">page2へ</Link>
    </Container>
  )
}

上記のコードを追加すると、以下のような画面になる。
「page2へ」という文字をクリックすると、リロードせずに「page2」に遷移することが確認できる。

次にスタイルを設定していく。
先ほど作成したLinkコンポーネントを、以下のように修正する。

-<Link href="/page2"                                                        >page2へ</Link>
+<Link href="/page2" px={8} py={3} bg="teal.400" color="white" fontSize={24}>page2へ</Link>

Chakra UIの書き方でスタイルを設定できることが確認できる。
上記の例だと、以下のような画面になる。

この記事でできること

解決したいこと

Next.js の Linkコンポーネント は、Chakra UIの機能を使うことができない

解決策

@chakra-ui/next-jsパッケージ の Linkコンポーネント を使用する

使用方法

使用例

参考サイト

Next.js の Linkコンポーネントは、Chakra UIの機能を使うことができない

@chakra-ui/next-jsパッケージの Linkコンポーネントを使用する