【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を使用すると、現在のパスやクエリパラメーター等を自在に取得することが可能
  
  next/router | Next.js

  Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.

  nextjs.org

ルーティングの種類

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

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でも専用の機能が用意されている
• 詳細はこちらの記事でまとめておりますので、気になる方は参照ください
  
  

  Next.jsにおけるURLの管理・制御の方法(next/linkとnext/router)

  本記事では、Next.jsにおけるnext/linkとnext/routerを用いたURLの管理・制御の方法について紹介しています。SPAではクライアントサイドナビゲーションが必須になりますがNext.jsではどのように書けば実現できるかについての内容を中心に具体例を交えながら説明しています

  maasaablog.com

  2021.12.25

具体例

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

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

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

以上です