Next.js > Next.js”AppRouterで始めるNext.js：最新のルーティング機能を徹底解説”Next.js

Next.js”AppRouterで始めるNext.js：最新のルーティング機能を徹底解説”Next.js

プロジェクトの作成

npx create-next-app@latest . --typescript --eslint --src-dir --app --import-alias "@/*"

コマンドのオプションについて

  • 「.」 は、現在のディレクトリにプロジェクトを作成します
  • 通常、Next.jsプロジェクトではルートディレクトリに 「 app」 ディレクトリが直接置かれすが、「-src-dir」 オプションを使用すると、「 src」 ディレクトリ内に配置されます。→ルート階層がわかりやすくなります

【コマンド】Next.jsのCLI（コマンドラインインターフェイス）

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

通常の開発フローでは、dev → build → start の順番で進めていきます。

1）npm run dev

  • ホットリロードが有効: ファイルの変更を検知して自動的に再コンパイルとページの更新を行います。
  • エラーメッセージが詳細: 開発者向けの詳細なエラー情報を表示します。

3）npm run build

本番環境用に最適化されたファイル（人間が読みやすい形式ではありません）を出力します。

「.next」 ディレクトリが出力先です

  • static
    • JavaScriptファイル、CSSファイル、画像などの静的ファイルが格納されます。
    • これらのファイルはブラウザにキャッシュされ、ページの読み込みを高速化します。
  • server
    • サーバーサイドで実行されるコードが含まれます。
    • ページのレンダリングに必要なファイルがここにあります。
  • chunks
    • アプリケーションのコードを小さな部分（チャンク）に分割したものです。
    • 必要な部分だけを読み込むことで、ページの表示速度が向上します。
  • build-manifest.json
    • ビルドに関する情報を含むJSONファイルです。
    • どのファイルがどのページに必要かなどの情報が記載されています。
  • react-loadable-manifest.json
    • 動的にインポートされるコンポーネントに関する情報を含みます

アップロード

サーバーにアプリケーションをアップロードする際は、通常 .next ディレクトリ全体と package.json、next.config.js（存在する場合）をアップロードします。

3）npm run start

"start": "next start"
  • 事前にビルドされたアプリケーションを実行します。
  • ホットリロードは無効: 変更を反映するには手動でサーバーを再起動する必要があります。
  • 最適化されたビルド: 本番用にコードが最適化され、パフォーマンスが向上します。
  • エラーメッセージは簡潔: ユーザー向けのシンプルなエラーメッセージを表示します。

使用シーン:

  • 本番環境でのアプリケーション実行
  • ステージング環境でのテスト

「App Router」のファイルシステムベースのルーティング

▽ディレクトリ構造： appディレクトリ内のフォルダがURLのパスセグメントに対応します。

  • ページファイル： 各ディレクトリ内のpage.js（またはpage.tsx）ファイルがそのルートのメインコンテンツになります。
  • レイアウト： layout.jsファイルを使用して、複数のページで共有されるUIを定義できます。
  • ルートグループ： 括弧()で囲まれたフォルダ名を使用して、URLに影響を与えずに組織化できます。
  • 動的ルート： [param]のような角括弧を使用して動的セグメントを定義できます。
  • キャッチオールルート： [...slug]を使用して、複数のパスセグメントをキャプチャできます。
app/
├── page.js             # /
├── about/
│   └── page.js         # /about
├── blog/
│   ├── page.js         # /blog
│   └── [slug]/
│       └── page.js     # /blog/:slug
└── (marketing)/
    └── products/
        └── page.js     # /products

Next.jsで共通レイアウトを設定する方法

app/layout.js（または layout.tsx）というファイルが特別な意味を持ちます。 このファイルの中でエクスポートされるデフォルト関数が、アプリケーション全体のルートレイアウトとして扱われます。

例）各ページ共通のヘッダーをレイアウトとして設定する方法

▽appディレクトリ内にlayout.js（またはlayout.tsx）ファイルを下記の通り編集（ヘッダーの読み込み）

import Header from "@/components/layouts/header/Header";

export default function Applayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <Header />
        <main>{children}</main>
      </body>
    </html>
  )
}

▽ヘッダーについて設定

\src\components\layouts\header\Header.tsx

import styles from './Header.module.css';

export default function Header() {
  return (
    <header className={styles.header}>
      <nav className={styles.nav}>
        <div className={styles.logo}>My Site</div>
        <div className={styles.navLinks}>
          <a href="/" className={styles.navLink}>Home</a>
        </div>
      </nav>
    </header>
  );
}

\src\components\layouts\header\Header.module.css

.header {
    background-color: #f8f9fa;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
  }

  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .logo {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .navLinks {
    display: flex;
    gap: 1rem;
  }

  .navLink {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
  }

  .navLink:hover {
    color: #007bff;
  }

開発

参考動画：
https://www.youtube.com/watch?v=lO-Ulx1rclk&t=1171s

project-dir\app\page.tsxを内容すべて削除し下記の通り修正

export default function Page() {
  return <h1>page.tsx</h1>
}

project-dir\app\globals.css、project-dir\app\page.module.cssを内容すべて削除

project-dir\app\layout.tsx下記の通り修正

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

  1. ビルド

開発が完了したら、本番用にビルドします：

npm run build

これにより、最適化されたプロダクション用のファイルが生成されます。

  1. ローカルでの本番環境テスト

ビルドしたアプリケーションをローカルで確認：

npm run start

http://localhost:3000で確認できます。

  1. GitHubへのプッシュ（オプション）

バージョン管理とデプロイを簡単にするため、GitHubにプロジェクトをプッシュすることをお勧めします。

git init
git add .
git commit -m "Initial commit"
git remote add origin [GitHubのリポジトリURL]
git push -u origin main
  1. デプロイ

Next.jsアプリケーションを簡単にデプロイできるプラットフォームがいくつかあります。ここでは、Vercelによるデプロイをおすすめします（Next.jsの開発元）。

a. Vercelのアカウントを作成：https://vercel.com/signup

b. 新しいプロジェクトをインポート：

  • Vercelダッシュボードで「New Project」をクリック
  • GitHubリポジトリを選択（または直接インポート）

c. デプロイ設定を確認し、「Deploy」をクリック

Vercelが自動的にプロジェクトをビルドし、デプロイします。

  1. カスタムドメインの設定（オプション）

a. Vercelダッシュボードでプロジェクトを選択
b. 「Settings」→「Domains」を選択
c. カスタムドメインを追加し、指示に従ってDNS設定を行う

  1. 継続的デプロイ

GitHubリポジトリと連携している場合、mainブランチに変更をプッシュするたびに、Vercelが自動的に新しいバージョンをデプロイします。

  1. パフォーマンスとアナリティクス

Vercelダッシュボードでサイトのパフォーマンスやアクセス統計を確認できます。

これで、Next.jsプロジェクトの作成から本番環境への公開までの基本的な流れが完了します。この過程で不明な点や、特定のステップについてより詳しい説明が必要な場合は、お気軽にお問い合わせください。

プロジェクトのファイル構成

package.json

↓Next.jsとReactのパッケージがインストールされていることが確認できます。

{
  "name": "my-app-0710",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.4"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.4"
  }
}

publicディレクトリ

Next.jsでは、publicディレクトリは特別な意味を持ちます。

Next.jsでは、publicディレクトリ内のファイルは、ビルド時にそのまま出力ディレクトリにコピーされ、アプリケーションのルートURLから直接アクセスできるようになります。

例）public/images/logo.pngにファイルがある場合、http://yourdomain.com/images/logo.pngのようなURLを通じてアクセスできます。

\src\appディレクトリ（Next.jsバージョン：14.2.5）

Next.jsのappディレクトリ構造は、App Routerの中核をなす重要な概念です。

  1. ファイルシステムベースのルーティング:
    • ディレクトリ構造がそのままURLパスになります。
    • 例: /app/blog/page.js は /blog のルートに対応します。
  2. 特殊ファイル:
    • page.js: ルートのメインコンテンツを定義
    • layout.js: ネストされたレイアウトを定義
    • loading.js: ローディング UI
    • error.js: エラーハンドリング
    • not-found.js: 404ページ
  3. ネストされたルーティング:
    • ディレクトリの階層構造がそのままルートの階層になります。
    • 例: /app/blog/[slug]/page.js は動的なブログ投稿ページに対応
  4. レイアウトの共有:
    • 上位のlayout.jsファイルは、下位のすべてのページに適用されます。
    • 共通のUI要素を効率的に管理できます。
  5. コロケーション:
    • 関連するファイル（コンポーネント、スタイル、テストなど）を同じディレクトリに配置できます。
  6. サーバーコンポーネント:
    • デフォルトですべてのコンポーネントがサーバーコンポーネントとして扱われます。
    • “use client” ディレクティブでクライアントコンポーネントを指定できます。
  7. データフェッチング:
    • コンポーネント内で直接非同期データフェッチが可能です。
  8. メタデータAPI:
    • metadata オブジェクトや generateMetadata 関数を使用してSEO関連の情報を設定できます。
  9. ルートグループ:
    • (groupname) の形式でディレクトリを作成し、ルートをグループ化できます。
    • URLには影響しませんが、コードの整理に役立ちます。
  10. 並列ルート:
    • @folder の形式で並列ルートを定義し、同時に複数のページを表示できます。
  11. インターセプティングルート:
    • (.) や (..) を使用して、他のルートのコンテンツをインターセプトできます。
  12. プライベートフォルダ:
    • _foldername の形式でプライベートフォルダを作成し、ルーティングから除外できます。
  13. デフォルトのサーバーサイドレンダリング:
    • パフォーマンスとSEOの向上が期待できます。
  14. 動的インポート:
    • 必要に応じてコンポーネントを動的にインポートし、パフォーマンスを最適化できます。
  15. API ルート:
    • /app/api ディレクトリ内にAPIルートを定義できます。

Webサイト作成手順

1）npx create-next-app プロジェクト名

Next.jsのプロジェクトテンプレートを基にした新しいプロジェクトが自動的に生成されます。

npx create-next-app@latest my-website

√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
√ What import alias would you like configured? ... @/*
  • TypeScript?　→”Yes”
    • コンパイル時に多くのエラーを捉えることができます
    • 現在の開発トレンドとして、TypeScriptのスキルは非常に価値があります。
  • ESLint?　→”Yes”
    • 多くのエラーを開発中に発見できるため
  • Tailwind CSS?　→”No”
    • 使用しない場合でも、後から追加することは可能です。
    • 学習負荷の分散:まずNext.jsの基本に集中し、慣れてから新しいツールを追加
  • `src/` directory?　→”No”
    • 小規模なプロジェクトや学習目的の場合シンプルな構造で始めることで、
      プロジェクトの全体像を把握しやすくなります。
  • App Router? (recommended)　→”Yes”
    • 最新の推奨機能
  • customize the default import alias (@/*)?　→”Yes”
    • コードの可読性が向上します。 （相対パスの複雑さ（../../など）を避けられます。）
    • ファイルの移動や再構成が容易になります。
    • Next.jsの推奨プラクティスに沿っています。

2）Next.jsのプロジェクト構造について

「App Router」を選択した場合:

pages ディレクトリではなく、app ディレクトリを使用します。この場合、ルーティングはディレクトリ構造に基づいて行われます。

プロジェクト構造例

app/
├── layout.js（アプリケーション全体のレイアウトを定義します。共有される要素（ヘッダー、フッターなど））
├── page.js (ホームページ、ルートページ（/）のコンテンツ)
├── about/
│ └── page.js
├── projects/
│ └── page.js
└── contact/
└── page.js
└── globals.css（アプリケーション全体に適用されるグローバルなCSスタイルを定義）