この記事でできること
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の書き方でスタイルを設定できることが確認できる。
上記の例だと、以下のような画面になる。
