Next.js 入門(2) ~ルーティングとページ移動~

ルーティングとは

Next.jsのようなWebアプリケーションフレームワークにおける、複数のページを作成しそれらに決まったURLを割り当ててアクセスできるようにする仕組みのこと。
Next.jsには2つのルーティングの仕組みが用意されてます。（もしかしたらもっとあるかも）

• ファイルシステムベースルーティング
• ダイナミックルーティング

ファイルシステムベースルーティング

Next.jsには、「src」内の「app」フォルダがあり、「app」フォルダがルートです。
別のページを作成する時には、このappフォルダに新たなフォルダを作成し、その中にpage.tsxを作成しコンポーネントを記述します。

例：hogeフォルダを作成した場合、/hogeにアクセスするとhogeフォルダの中のpage.tsxが表示されます。

app/page.tsx

import Link from 'next/link'

export default function Home() {
  return (
    <main>
      <h1 className="title">Top page</h1>
      <p className="msg">This is other page sample.</p>
      <div>
        <Link href="/other">go other page</Link>
      </div>
    </main>
  )
}

app/other/page.tsx

'use client'

import Link from 'next/link'

export default function Other() {
  return (
    <main>
      <h1 className="title">Other page</h1>
      <p className="msg">これは、別のページです。</p>
      <div>
        <Link href="/">go back!!</Link>
      </div>
    </main>
  )
}

ダイナミックルーティング

↑のファイルシステムルーティングは、フォルダ分けしてpage.tsxを配置するだけでページを作れるため、非常に扱いが簡単です。しかし、これはページが「静的なパス」に配置されているからです。

例えば、データから特定の項目を取り出して表示するページの場合、data/1というように取り出すデータの番号をつけてアクセスするようなことがあります。
この「/1」の部分は取り出すデータによって変化します。2番目のデータなら「/2」、100番目のデータなら「/100」となります。

このようなページの場合、dataフォルダの中に取り出すデータの数だけページを用意するわけにはいきません。
こうした場合のために使用されるのがダイナミックルーティングです。
ダイナミックルーティングとは、特殊な形でフォルダ名を用意することで、パスの一部をパラメータとして受け取れるようにするものです。

/name というパスでアクセスしたい、例えば/name/taroにアクセスしたときに「kohaku」という名前をパラメータとして渡したい場合には、
appフォルダ内にnameフォルダを作成し、nameフォルダ内に「[name]」というフォルダを作成します。このように、[xxx]というように名前の前後を[]でくくったフォルダ名を付けると、そのフォルダはパラメータとして認識されるようになります。

app/name/[name]/page.tsx

export default function Name({params}: {params: {name: string}}) {
  return (
    <main>
      <h1 className="title">Other page</h1>
      <p className="msg">あなたは、「{params.name}」ですね。</p>
      <div>
        <Link href="/">go back!!</Link>
      </div>
    </main>
  )
}

複数のパラメータを渡したい場合

[name]というフォルダ内に、[pass]というフォルダを作成し、そこにpage.tsxを作成することで複数のパラメータを渡すことが可能です。

{params}: {params: {name: string, pass: string}}

パラメータを指定しない場合

パラメータをつけない場合、何も対処しないと404エラーになります。
nameフォルダにpage.tsxを作成することでエラーは解消されます。