Next.js 14 ナビゲーションの利用 (動的ルーティング)

2024年9月25日 2024年9月28日

infinitewave

https://〇〇〇.com/1 や https://〇〇〇.com/200のように動的にパラメータの値が変化するようなルーティングを実現する方法をまとめる。

今回は、何かしらの投稿を管理するページがあるとし、投稿一覧内のリンクをクリックすると、各投稿のページに遷移するというような方向でコードを考えてみる

Contents

1 postsフォルダを作成
2 動的なルーティング用のフォルダを作成
3
4 動的なルーティング : 動作の確認

postsフォルダを作成

appフォルダ配下に以下のような構造で作成。

app 
 - posts
   - page.tsx

page.tsxには以下のコードを記述。リンク箇所には、Linkコンポーネントを使用。

import Link from 'next/link'
import React from 'react'

type Props = {}

export default function posts({}: Props) {
  return (
      <div>
        <ul>
          <li>
            <Link href="/posts/1">投稿1</Link>
          </li>
          <li>
            <Link href="/posts/2">投稿2</Link>
          </li>
          <li>
            <Link href="/posts/3">投稿3 </Link>
          </li>
        </ul>
      </div>
 )
}

続いて、"posts/1", "posts/2"のようなURLの示すページを表示させることが出来るように、動的なルーティング用の階層を作成していく。

動的なルーティング用のフォルダを作成

postsフォルダ内を以下のように修正

app 
 - posts
   - [id]
     - page.tsx
   - page.tsx

[id] のidには、投稿IDである1,2,3などが設定される。

[id]フォルダ内のpage.tsxには、以下のソースを記述する。

import React from 'react'

type Props = {
     // パスパラメータの型を設定
　　  params:{
　　　　　id: number;
      }
}
// パスパラメータを取得
export default function page({params}: Props) {
   return (
      <div>投稿 {params.id} page</div>
   )
}