Next.js×TypeScriptでモダンなWebアプリを作る[ルーティング編]

1. はじめに

前回の記事では、Nextプロジェクトを立ち上げるための環境構築を行いました。

今回は、実際にコードを書いて画面遷移できるようにルーティングしたいと思います。
参考：https://nextjs.org/docs/app/building-your-application/routing

2. App Router

Next.jsのルーティングのベースとなる機能がApp Rouoterです。
src/app/配下のディレクトリおよびファイルがルーティング対象となります。

ディレクトリ階層(login)

└─app
    │  page.tsx
    │
    └─login
           page.tsx

src/app/page.tsx

import Link from "next/link";
import styles from "./page.module.scss";

export default function Home() {
  return (
    <main className={styles.main}>
      <h1>ブログ投稿アプリ</h1>
      <Link href='/login/'><input type="button" value="会員ログイン" /></Link>
    </main>
  );
}

src/app/login/page.tsx

import styles from "./page.module.scss";

export default function Login() {
  return (
    <main className={styles.main}>
      <h1>会員ログイン</h1>
    </main>
  );
}

例えば、上のような構成にしてサーバーを立ち上げてみます。

ここで、会員ログインボタンを押すとログイン画面に遷移することができます。

簡単ですね。
他に画面を追加する必要があれば、ディレクトリを追加するだけでルーティングを行うことができます。

3. Dynamic Routes

Next.jsにおいて、動的データからルートを作成する機能がDynamic Routesです。
例えば、ブログのIDがhogeのときは/blog/hoge/、ブログのIDがfugaのときは/blog/fuga/となるようにルートを切り替えたい場合、

ディレクトリ階層(blog)

└─app
    │  page.tsx
    │
    └─blog
       └─[id]
               page.tsx

のように、ディレクトリ名を[ ]で囲むことにより実現することができます。

src/app/blog/[id]/page.tsx

import styles from "./page.module.scss";

export default function Blog({ params }: { params: { id: string } }) {
  return (
    <main className={styles.main}>
      <h1>ブログ</h1>
      <h4>ブログのIDは、{params.id}です。</h4>
    </main>
  );
}

params.idをもとにAPIを叩いたり、SQLクエリを実行したりすることで、ブログのIDに応じてHTMLの中身を変えることになりそうです。

その他、Dynamic Routesの使い方は公式ドキュメントをご確認ください。

4. おわりに

今回はNext.jsのApp Routerを用いてルーティングしてみました。
次回はNextAuth.jsを用いてログイン画面に機能を実装してみようと思います。