Next.js レッスン1

Next.jsの基本

Reactフレームワークの特徴を理解し、開発環境を構築しよう

Next.jsとは？

Next.jsは、Vercel社が開発・メンテナンスしている Reactベースのフルスタックフレームワークです。Reactはあくまで「UIライブラリ」ですが、 Next.jsはそこにルーティング、サーバーサイドレンダリング、API機能などを追加し、本番環境に必要な機能をすべて備えた「フレームワーク」として提供しています。

Reactだけでアプリを作る場合、ルーティングライブラリの選定、ビルド設定、SSRの実装など多くの判断が必要です。Next.jsはこれらの「ベストプラクティス」をフレームワークとして標準化し、開発者が本質的なアプリ開発に集中できるようにしています。

React単体 — UIライブラリ。ルーティングやSSRは自分で設定が必要
Next.js — Reactを含むフルスタックフレームワーク。すぐに本番利用可能

Next.jsの主要機能

Next.jsには、モダンなWeb開発に必要な機能が豊富に用意されています。

ファイルベースルーティング

フォルダ構造がそのままURLパスになります。設定ファイルなしでページを追加でき、動的ルートやネストされたレイアウトにも対応します。

サーバーサイドレンダリング（SSR）

ページをサーバー側でHTMLに変換してから送信します。初期表示が高速になり、SEOにも有利です。

静的サイト生成（SSG）

ビルド時にHTMLを事前生成します。CDNから配信できるため、最も高速なページ表示が可能です。

APIルート（Route Handlers）

フロントエンドと同じプロジェクト内にAPIエンドポイントを作成できます。別途バックエンドサーバーを用意する必要がありません。

プロジェクトの作成

Next.jsプロジェクトはcreate-next-appコマンドで簡単に作成できます。TypeScript、ESLint、Tailwind CSSなどの設定も対話形式で選択できます。

# Next.jsプロジェクトを作成
npx create-next-app@latest my-app

# 対話形式で以下を選択:
# ✔ Would you like to use TypeScript? → Yes
# ✔ Would you like to use ESLint? → Yes
# ✔ Would you like to use Tailwind CSS? → Yes
# ✔ Would you like to use `src/` directory? → Yes
# ✔ Would you like to use App Router? → Yes
# ✔ Would you like to customize the default import alias? → No

# プロジェクトに移動して開発サーバーを起動
cd my-app
npm run dev

# http://localhost:3000 でアプリが表示される

プロジェクト構造（App Router）

create-next-appで作成されたプロジェクトの基本構造を見てみましょう。App Routerではappディレクトリがルーティングの中心になります。

my-app/
├── src/
│   └── app/
│       ├── layout.tsx      # ルートレイアウト（全ページ共通のHTML構造）
│       ├── page.tsx         # トップページ（ / ）
│       ├── globals.css      # グローバルCSS
│       ├── about/
│       │   └── page.tsx     # /about ページ
│       └── blog/
│           ├── page.tsx     # /blog ページ（記事一覧）
│           └── [slug]/
│               └── page.tsx # /blog/記事名 ページ（動的ルート）
├── public/                  # 静的ファイル（画像など）
├── next.config.js           # Next.jsの設定ファイル
├── tsconfig.json            # TypeScriptの設定
├── tailwind.config.ts       # Tailwind CSSの設定
└── package.json             # 依存パッケージ

appディレクトリ内のフォルダ名がそのままURLのパスになります。例えばapp/about/page.tsxは/aboutというURLでアクセスできます。

最初のページを作る

Next.jsのlayout.tsxとpage.tsxの基本を見てみましょう。

// app/layout.tsx — ルートレイアウト
// すべてのページに共通するHTML構造を定義します
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Next.js App",
  description: "はじめてのNext.jsアプリ",
};

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

// app/page.tsx — トップページ
// このコンポーネントはデフォルトでServer Componentです
export default function Home() {
  return (
    <div>
      <h1>ようこそ！</h1>
      <p>これはNext.jsで作ったトップページです。</p>
      <p>サーバー側でレンダリングされています。</p>
    </div>
  );
}

layout.tsxはページの「枠」、page.tsxはページの「中身」です。 layoutの{children}の部分に page.tsxの内容が差し込まれます。

確認クイズ

1 / 3

Next.jsはどのような位置づけのツール？

まとめ

Next.jsはReactベースのフルスタックフレームワーク
SSR、SSG、ファイルベースルーティング、APIルートなどが標準搭載
create-next-appで簡単にプロジェクトを作成できる
App Routerではappディレクトリがルーティングの中心
layout.tsxが共通レイアウト、page.tsxがページの内容
デフォルトでServer Componentとして動作する

次のレッスン →

ファイルベースルーティング