採用トップ

テンファイブロゴ
テックブログ

初心者向け Next.js App Router

🔰この記事の対象

  • HTML/CSSが少しわかる
  • JavaScriptやReactを勉強し始めた
  • Next.jsでWebサイトを作ってみたい
  • ページの切り替え方（ルーティング）を知りたい

というような初学者の方を想定して、わかりやすく解説します。

✅ この記事でわかること

  • App Routerってなに？
  • Pages Routerとの違い
  • ページやルートの作り方
  • 「layout.tsx」って何？
  • データの読み込みってどうするの？
  • クライアントコンポーネントとサーバーコンポーネントの違い

1. App Routerってなに？

Next.jsは、ReactというJavaScriptのライブラリを使ってWebアプリを作るための「便利セット」です。

その中でもApp Routerとは、ページの切り替えやレイアウトの仕組みをとても柔軟にしてくれる新しい仕組みです。

従来のpages/フォルダによる「Pages Router」ではできなかった、以下のようなことが可能になります。

  • ページごとに共通レイアウト（ヘッダーやフッター）を作れる
  • サーバーでデータを読み込んだ状態で表示できる（速い）
  • 必要なページだけ部分的に更新できる

📝 用語メモ：ルーティング

「ルーティング」とは、ページのURL（例：/about, /contact）に応じて、どのページを表示するか決める仕組みのこと。

2. Pages Routerとの違いは？

比較ポイントPages Router (pages/)App Router (app/)
フォルダ構成ファイルごとにページ作成ディレクトリ＋page.tsx
レイアウトの仕組み_app.tsx で全体を管理layout.tsx で部分ごとに可能
データの読み込みgetStaticProps など必要fetchだけでOK（自動的に）
表示速度クライアントで表示更新サーバーで先に表示（速い）

App Routerは、HTML生成の仕組みが進化しており、特に「表示スピードが速い」「コードがわかりやすい」というメリットがあります。

3. App Routerのフォルダ構成

App Routerでは、app/というフォルダを使ってページやレイアウトを構成します。

app/
├── layout.tsx        ← 共通レイアウト（全体に適用）
├── page.tsx          ← トップページ（/）
├── about/
│   └── page.tsx      ← /about ページ

各フォルダの中に「page.tsx」というファイルを作ることで、そのURLに対応したページが自動で作られます。

4. ページの作り方（基本編）

トップページを作る

// app/page.tsx
export default function HomePage() {
  return <h1>ホームへようこそ</h1>;
}

サブページ（/about）を作る

// app/about/page.tsx
export default function AboutPage() {
  return <h1>このサイトについて</h1>;
}

📌 ファイルを置くだけでルートが作られるのが、App Routerの便利なところです！

5. レイアウト（共通デザイン）を作る

全ページに共通のデザイン（例：ナビゲーションやフッターなど）を持たせるには、「layout.tsx」を使います。

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <header>ナビゲーションバー</header>
        <main>{children}</main>
        <footer>フッター</footer>
      </body>
    </html>
  );
}

children という部分に、それぞれのページが「中身として」差し込まれる仕組みです。

6. データの読み込み（fetchの使い方）

App Routerでは、以下のように**fetchだけでデータ取得**ができます。

export default async function BlogList() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

📝 async と await は、「時間がかかる処理（非同期）」を待ってから次に進むためのJavaScriptの文法です。

7. クライアントコンポーネントとサーバーコンポーネントの違い

App Routerでは、すべてのコンポーネントはデフォルトでサーバー側で動くようになっています。

  • サーバーコンポーネント → 画面の内容をサーバーで作って送る（速い）
  • クライアントコンポーネント → ボタン操作や状態変更など、ブラウザ内で処理

もし、ボタンやフォームなどを使いたい場合は、ファイルの先頭に以下を記述します：

'use client';

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>クリック数: {count}</button>;
}

📝 useState は、Reactで「変化する値」を管理するためのフック（関数）です。

8. よくある質問（Q&A）

Q1: pages/とapp/を両方使ってもいいの？

A: 基本的にはどちらか片方に統一した方が良いですが、一時的に混在させることも可能です。徐々に移行したいときに便利です。

Q2: App Routerを使うには何が必要？

A: Next.jsのバージョン13以上が必要です。プロジェクトを作る時に以下のように指定します：

npx create-next-app@latest my-app
# → インストール時に App Router を使うか聞かれます

🧠 まとめ

ポイント内容
App Routerとは？新しいページ構成の仕組み
特徴柔軟なレイアウト、速い表示、データ取得が簡単
フォルダ構成app/配下に page.tsx, layout.tsx を配置
クライアント操作use client を記述すればOK

Next.jsのApp Routerを使えば、Webサイト制作がもっと速く・綺麗に・楽になります。まだ慣れていない人でも、今回の記事を読みながら一歩ずつ作っていけば、すぐに使えるようになります。

📚 参考文献・引用元

採用情報 長谷川 横バージョン
SHARE

blog 関連記事

すべて見る
PHP Code Snippets Powered By : XYZScripts.com