LESSON 05 · 約20分

最初のNext.jsプロジェクト

開発サーバーを起動し、最初のページを自分の言葉に変えます。

コードを試す前に

基本演習はApp Router・JavaScript/JSX・Cache Components無効で進めます。11の有効化例は独立した発展実験です。01〜04は先に読んで、コードの実行は05の環境構築後に戻って試せます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

開発環境の準備を確認する →

このレッスンでわかること

JavaScript・App Router構成を作れる
dev・build・startの違いを説明できる

バージョンと条件を確認する

教材は2026年10月6日に公式ドキュメントを確認しています。現行ガイドのNode.js最低要件は20.9です。実際には、導入するNext.js版が対応するサポート中のNode.jsを選び、package.jsonとlockfileでバージョンを確認してください。

JavaScriptで始める

create-next-appのカスタマイズを選び、TypeScriptはNo、App RouterはYesにします。CSSはまず標準CSSからでも十分です。生成画面の文言や初期設定は版によって変わるため、教材のファイル名と手元の構成を照らし合わせましょう。基本演習ではCache Componentsを有効にしません。next.configにcacheComponents: trueがある場合は、この教材用プロジェクトではfalseにして進めます。11のオン側は独立した発展実験として扱います。

開発と公開準備は別の工程

npm run devは開発用。npm run buildは本番用ファイルの生成、npm run startはビルド後の本番サーバー起動です。Next.js 16以降ではbuildが自動でlintを実行しないため、lintは別に確認します。

作成と起動

Terminal

npx create-next-app@latest next-notes
cd next-notes
npm run dev

対話式セットアップでJavaScriptとApp Routerを選択。起動後はターミナルが示すURLを開きます。

最初のページ

app/page.jsx

export default function Page() {
  return (
    <main>
      <h1>今日の学習ノート</h1>
      <p>小さく作って、仕組みを理解しよう。</p>
    </main>
  )
}

src/を選択した場合はsrc/app/page.jsxです。page.jsが生成済みなら同じファイルを編集し、重複作成しません。

TRY IT YOURSELF

起動から本番ビルドまで

トップページの見出しを変更する
開発サーバーを終了する
npm run buildを実行し、成功後にnpm run startで確認する

できたらOK：開発表示と本番表示の両方で自分の見出しが見える

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。