🦁

【Next.js】Routingを基礎からしっかり。

2 min read

前書き

筆者がNext.jsを仕事で書くことになったので、1から勉強するためにアウトプット記事を書くことにしました。
基本的にはドキュメントを噛み砕いて、翻訳した記事です。間違っているところなどあれば、ご指摘していただけるとありがたいです🙇‍♂️

以下、本題です。

Routing

Next.jsは"page"というコンセプトに基づいて形成された、ファイルシステムベースのルーターがあります。

つまりルールに従って、ファイルを配置すればNext.js側で自動的にルーティングを設定してくれるよ、と言うことです。

pagesディレクトリ配下にファイルを追加すれば、自動的にルーティングが作成されます。

Index routes

indexと言う名前のファイルを自動的にそのディレクトリのrootとしてルーティングします。

pages/index.tsx => `/`
pages/post/index.tsx => `/post`

みたいな感じです。

Nested routes

ルーターは入れ子になったファイルもサポートしています。入れ子構造を持つフォルダーを作成すると、自動的に同じ構造のルーティングを作成してくれます。

pages/hoge.tsx => `/hoge`
pages/post/hoge/foo.tsx => `/post/hoge/foo`

Dynamic route segments

動的なルーティングはブランケット構文を使用することで、実現できます。

pages/post/[hoge].tsx => '/post/:hoge'
pages/post/[:postId] => '/post/:postId'

こんな感じでIDを指定してあげれば、「詳細ページ」みたいなのも簡単に実現できますね。

Linking between pages

Next.jsのルーターはSPAのようにクライアントサイドでページ間をルート遷移することができます。

クライアントサイドでルート遷移をするためには<Link>コンポーネントを使う必要があります。

import Link from 'next/link'

const Home = () => {
  return (
    <>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/hoge">
        <a>hoge</a>
      </Link>
      <Link href="/Foo">
        <a>foo</a>
      </Link>
    </>
  )
}

上記に例では<a>タグをラップし、Linkコンポーネント内の属性でhrefを指定していますね。上から

  • / => pages/index.tsx
  • /hoge => pages/hoge.tsx
  • /foo => pages/foo.tsx

を表示してくれます。

Linking to dynamic paths

動的なpathに対しては、どのようにLinkコンポーネントを指定してあげれば良いでしょうか。

encodeURIComponentを使っていい感じに書く方法もありますが、個人的にはURLオブジェクトを使う方が見やすいです。

import Link from 'next/link'

const Home = ({ post }) => {
  return (
    <Link 
      href={{
        pathname: 'post/[postId]'
        query: {postId: post.id},
      }}
    >
      <a>post.name</a>
    </Link>
  )
}

pathnameでpathを指定し、queryの部分で動的なクエリパラメータを指定してあげています。

以上です。お疲れ様でした。

Discussion

ログインするとコメントできます