【Next.jsとLaravelのJamstackなWebサービス】Part2：ルーティング

環境

• windows10
• DockerDesktop for Win 3.5.x
• Laravel 8.x
• PHP 8.x
• node v16.13.1
• npm 8.1.2
• TypeScript 4.5
• Next.js 12.0.7
• React 17.0.1
• VsCode
• gitbash 2.32.0.1

Next.jsにおけるルーティング

基本

• pagesディレクトリ配下にファイルを追加すれば、ディレクトリ構成がそのままurlになる
• たとえば、デフォルトで存在している/pages/index.jsはurlでいうと、ルート(/)に該当する
• Next.jsが用意してくれているLinkコンポーネントやRouter APIを使用することにより、SPAと同様のクライアントナビゲーションが可能になる(通常のaタグとことなり、ページの再読み込みが生じない)
• urlの操作については、useRouterというNext.jsが用意してくれているhooksを使用すると、現在のパスやクエリパラメーター等を自在に取得することが可能
  https://nextjs.org/docs/api-reference/next/router

ルーティングの種類

ルーティングには種類があり、それぞれケースごとに使い分けが必要

Index routes

• indexという名前(index.tsx, index.js)のファイルは、自動的にそのディレクトリのrootとして認識する

  ・pages/index.js(ts,tsx)はルートURL (/)
  ・pages/posts/index.tsx(ts,tsx)は /posts

Nested routes

• ネストされたファイルもネストのディレクトリ構造に基づき、自動的にルーティングを生成

  ・pages/posts/[postId]/comments/[commentId].tsx → Ex.) /posts/1/comments/2

Dynamic route segments

• 大括弧でくくったフォルダ・ファイル名を追加すると、動的にルーティングを作成してくれる。

  ・pages/users/[slug].js → /users/yamada

クライアントサイドナビゲーション

基本

• クライアント側(ブラウザ側)でJavaScriptを使用してサーバーとのやり取りを行わず、ページ遷移ができる機能
• reactを使用したSPAでもクライアントサイドナビゲーションが可能なように、Next.jsでも専用の機能が用意されている

具体例

/stocksにアクセスすると、トップページへのリンクが表示され、リンクをクリックすると、トップページへ遷移する(ページの再読み込みなし)

ディレクトリ構成とURLの一例

例えば、以下のようなURLとディレクトリ構成が挙げられる

以上です

まとめ

いかがでしたでしょうか。本記事では、【Next.jsとLaravelのJamstackなWebサービス】Part2：ルーティングについて紹介しています。