第1章

はじめに

Next.js入門ガイドへようこそ

このガイドでは、Next.jsの基礎から実践的な使い方まで、段階的に学んでいきます。

この本で学べること

Next.jsの基本概念
App Routerの使い方
サーバーコンポーネントとクライアントコンポーネント
データフェッチング
デプロイメント

前提知識

HTML/CSSの基礎
JavaScriptの基礎
Reactの基本（推奨）

それでは、始めましょう！

第2章

環境構築

Next.jsプロジェクトをセットアップしましょう。

必要な環境

Node.js 18.17以降
npm または yarn

プロジェクトの作成

npx create-next-app@latest my-app

インタラクティブなプロンプトで以下を選択します：

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
App Router: Yes

開発サーバーの起動

cd my-app
npm run dev

http://localhost:3000 にアクセスして確認しましょう。

第3章

ルーティング

Next.jsのApp Routerを使ったルーティングについて学びます。

フォルダベースのルーティング

App Routerでは、appディレクトリ内のフォルダ構造がそのままURLに対応します。

app/
  page.tsx          → /
  about/
    page.tsx        → /about
  blog/
    page.tsx        → /blog
    [slug]/
      page.tsx      → /blog/:slug

動的ルート

ブラケット[]を使って動的なルートを作成できます。

// app/blog/[slug]/page.tsx
export default function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  return <h1>Post: {params.slug}</h1>;
}

次のチャプターでは、データフェッチングについて学びます。

Next.js入門ガイド

目次