2025年人気No.1のNext.jsで、最新ツールとウェブを作る！ | エピソード2 ルーティングとページの基本

目標

• Next.jsでのルーティング（routing）の仕組みを理解する。
• App Routerを使った基本的なページ作成を学ぶ。
• 動的ルート（Dynamic Routes）の作り方を習得する。
• ページ間をスムーズに移動するためのLinkコンポーネントを使用する。

---

1. App Routerの紹介

Next.js 13以降で導入されたApp Routerは、ルーティングの新しい方法です。従来のPages Routerとは異なり、ディレクトリ構造を活用した直感的なルーティングと、Server Componentsによるパフォーマンス向上を提供します。このシリーズでは、最新のトレンドに沿ってApp Routerを使用します。

• 特徴：
  • app/ディレクトリ内にページを定義。
  • ファイル名がそのままルート名に（例：page.tsx → /）。
  • ネストされたフォルダでサブルートを作成（例：app/about/page.tsx → /about）。

---

2. 基本的なページの作成

早速、app/ディレクトリ内でページを作ってみましょう。

手順：

1. ホームページ（Home）：
   • app/page.tsxは既に存在します。エピソード1のコードをそのまま使用。
2. Aboutページの追加：
   • app/about/フォルダを作成し、その中にpage.tsxを追加。
   • 以下をapp/about/page.tsxに記述：

     export default function About() {
       return (
         <div>
           <h1>Aboutページ</h1>
           <p>これはNext.jsで作ったAboutページです。</p>
         </div>
       );
     }
     

3. Contactページの追加：
   • app/contact/フォルダを作成し、page.tsxを追加。
   • 以下を記述：

     export default function Contact() {
       return (
         <div>
           <h1>Contactページ</h1>
           <p>お問い合わせはこちらから。</p>
         </div>
       );
     }
     

確認：

• npm run devでサーバーを起動し、ブラウザで以下を確認：
  • http://localhost:3000/ → ホームページ。
  • http://localhost:3000/about → Aboutページ。
  • http://localhost:3000/contact → Contactページ。

---

3. 動的ルート（Dynamic Routes）の作成

固定ページだけでなく、動的なページも簡単に作れます。たとえば、ブログの投稿ページ（/post/1, /post/2など）を作成してみましょう。

手順：

1. app/post/[id]/フォルダを作成（[id]は動的パラメータを示す）。
2. その中にpage.tsxを追加し、以下を記述：

   import { useParams } from 'next/navigation';
   
   export default function Post() {
     const params = useParams();
     const { id } = params;
   
     return (
       <div>
         <h1>投稿 #{id}</h1>
         <p>これはIDが{id}の投稿ページです。</p>
       </div>
     );
   }
   

確認：

• http://localhost:3000/post/1 → "投稿 #1" と表示。
• http://localhost:3000/post/abc → "投稿 #abc" と表示。
• [id]は任意の値を受け取れるので柔軟性が高いです。

---

4. Linkを使ったページ間移動

Next.jsでは、<a>タグの代わりにLinkコンポーネントを使ってページ間を移動します。これにより、ページ遷移が高速化されます。

手順：

1. app/page.tsxを編集してナビゲーションを追加：

   import Link from 'next/link';
   
   export default function Home() {
     return (
       <div>
         <h1>Next.jsからのHello World!</h1>
         <p>2025年のNext.js学習シリーズへようこそ。</p>
         <nav>
           <Link href="/about">Aboutへ</Link> |{' '}
           <Link href="/contact">Contactへ</Link> |{' '}
           <Link href="/post/1">投稿 #1へ</Link>
         </nav>
       </div>
     );
   }
   

確認：

• ホームページにナビゲーションが表示され、クリックすると各ページにスムーズに移動。

---

実践：3つの静的ページと1つの動的ページを持つウェブサイト

これまでの内容を統合して、以下を作成：

• Home: app/page.tsx（ナビゲーション付き）。
• About: app/about/page.tsx。
• Contact: app/contact/page.tsx。
• 動的投稿ページ: app/post/[id]/page.tsx。

ヒント：

• 各ページに<Link>を使って他のページへのリンクを追加すると、さらに使いやすくなります。

---

エピソード2の終了

• Next.jsのApp Routerを使ったルーティングの基本を学びました。
• 静的ページと動的ページの作成方法を習得しました。
• Linkコンポーネントでスムーズなナビゲーションを実現しました。

次回のエピソード：スタイリング（Styling）を学び、ウェブサイトに美しいデザインを追加します。

---

この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！