Next.js のルーティングについてのガイド

Next.jsの魅力の一つは、シンプルなファイルベースのルーティングシステムです。pages ディレクトリ内のファイルの構造に応じて、自動でルートが生成されます。

基本ルーティングの理解:

• 単純なページ: pages/about.jsを作成するだけで、/about へのルートが自動で作成されます。
• サブディレクトリを利用したルーティング: pages/blog/first-post.jsを作成すれば、/blog/first-post へとアクセス可能になります。

動的なルーティングの利用:

• [...] という記法をファイル名やフォルダ名に使用することで、ダイナミックなルートを容易に作成できます。例として、pages/posts/[id].js は /posts/1 や /posts/abc にマッピングされます。
• この動的な部分にアクセスする際には、useRouter フックが役立ちます。

import { useRouter } from 'next/router'
function Post() {
  const router = useRouter()
  const { id } = router.query
  return <p>Post: {id}</p>
}

キャッチオールルーティングの利用:

• [...slug].js の形式を用いることで、複数のセグメントをキャッチできます。例：pages/posts/[...slug].js は /posts/a/b/c のようなパスに対応します。

API ルーティングの特徴:

• pages/api 内のファイルはAPIエンドポイントとして扱われ、サーバーサイドで動作します。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' })
}

このAPIは /api/hello でアクセスできます。

ページ間の移動:

Next.jsには <Link> コンポーネントが組み込まれており、これを用いることでページ間のナビゲーションが可能です。

import Link from 'next/link'
function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  )
}

サーバーサイドリダイレクトの設定:

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path',
      permanent: false,
    },
  }
}

上記は基本的なNext.jsのルーティングに関する情報です