1.

Next.js の環境構築｜create-next-app とプロジェクト構成

▶
編集

この記事の要点

  • 前提は Node.js 20.9 以上。18 系はバージョン 16 でサポート対象外になったため、まずここを確認する。
  • プロジェクト生成は npx create-next-app@latest。対話に答えるか、--yes で推奨設定のまま作る。
  • 最小構成は app/layout.tsx と app/page.tsx の 2 ファイル。ルートレイアウトは必須で、html と body を自分で書く。
  • 開発サーバーは npm run dev で localhost:3000 に起動する。バンドラは Turbopack が既定で、フラグ指定は不要。
  • バージョン 16 では next lint が廃止された。Lint は ESLint や Biome を npm スクリプトから直接呼ぶ。

Next.js の開発は、Node.js の上でビルドと開発サーバーが動くことを前提にしています。この記事では、必要な前提の確認から、プロジェクトの生成、生成されたファイルが何をしているのかまでを順に見ていきます。手を動かす前に「どのファイルが何のために存在するのか」を掴んでおくと、後の回で扱うルーティングやデータ取得が理解しやすくなります。

1前提環境を確認する

まず Node.js のバージョンを確認します。Next.js 16 系の最低要件は Node.js 20.9 で、Node.js 18 はサポート対象外です。TypeScript を使う場合は 5.1 以上が必要になります。

node -v   # v20.9.0 以上であること
npm -v

古いバージョンが入っている場合は、Node.js のバージョン管理ツール（nvm など）で切り替えるか、公式サイトから LTS 版を入れ直します。ここを飛ばして進めると、プロジェクト生成そのものは通るのに開発サーバーの起動で不可解なエラーになることがあります。

要件必要なバージョン
Node.js20.9 以上（LTS 推奨）
TypeScript5.1 以上
ブラウザChrome / Edge 111 以上、Firefox 111 以上、Safari 16.4 以上
OSmacOS / Windows（WSL を含む）/ Linux

2プロジェクトを生成する

公式の生成ツール create-next-app を使うのが最短です。グローバルインストールは不要で、npx を通して毎回最新版を呼び出します。

npx create-next-app@latest

実行するとプロジェクト名を尋ねられ、続いて設定方法を選ぶ質問が出ます。推奨設定を選べば TypeScript・ESLint・Tailwind CSS・App Router が有効な状態で生成されます。設定を自分で選ぶ場合は、リンターの種類（ESLint か Biome）、React Compiler の有無、src/ ディレクトリを使うか、インポートエイリアス（既定は @/*）などを個別に指定できます。

質問をすべて省略して推奨設定のまま作りたいときは --yes を付けます。

npx create-next-app@latest my-app --yes
cd my-app
npm run dev

ブラウザで http://localhost:3000 を開くと初期ページが表示されます。ソースを保存すると、ページを再読み込みしなくても画面に反映されます。

my-app/ app/ルーティングの本体。ここがそのまま URL になる layout.tsx全ページ共通の外枠（必須） page.tsx「/」に対応するページ globals.css全体に効かせるスタイル public/画像などの静的ファイル。URL は「/」から始まる next.config.tsフレームワークの設定 tsconfig.jsonTypeScript 設定・パスエイリアス package.json依存パッケージと npm スクリプト
生成直後の主要なファイル。覚えるべきは「app/ の中がルーティング、public/ が静的ファイル」という 2 点。

3手作業で最小構成を作る

生成ツールが何をしているのかを理解するために、最小構成を手で作ってみるのは有効です。必要なパッケージは 3 つだけです。

npm i next@latest react@latest react-dom@latest

次に package.json にスクリプトを追加します。

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

そして app フォルダを作り、その中に ルートレイアウトを置きます。これは必須のファイルで、html タグと body タグを自分で書く必要があります。

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

最後にトップページを作れば動きます。

// app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

この 2 ファイルがそろった状態で / にアクセスすると、レイアウトがページを包んだ形で描画されます。なお、ルートレイアウトを作り忘れたまま next dev を実行した場合は、Next.js が自動的に生成します。

4npm スクリプトの役割

コマンド役割使う場面
next dev開発サーバーを起動する。ファイル保存が即座に画面へ反映される開発中つねに
next build本番用に最適化してビルドするデプロイ前・CI
next startビルド済みの成果物を本番モードで配信する自前サーバーでの運用
eslintコードの静的検査コミット前・CI

ここで一つ注意点があります。バージョン 16 で next lint コマンドは廃止され、next build も自動でリントを走らせなくなりました。古い記事のとおりに next lint を書くと「そんなコマンドはない」と言われます。ESLint か Biome を npm スクリプトから直接呼ぶ形に置き換えてください。

5バンドラは Turbopack が既定

バージョン 16 から、開発・ビルドとも Turbopack が既定のバンドラになりました。以前必要だった --turbopack フラグは不要です。

今の書き方
"dev": "next dev"
"build": "next build"
フラグなしで Turbopack が使われる。
古い記事の書き方
"dev": "next dev --turbopack"
動作はするが冗長。逆に Webpack を使いたい場合だけ --webpack を明示する。

独自の Webpack 設定を持つプロジェクトで next build を実行すると、設定の食い違いを防ぐためにビルドが失敗します。この場合は Turbopack 向けに設定を書き換えるか、--webpack で明示的に従来のバンドラを使います。

6パスエイリアスを整える

コンポーネントが深い階層に増えてくると、../../../components/button のような相対パスが読みにくくなります。tsconfig.json の baseUrl と paths を設定すると、絶対パス風に書けます。

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

これで import { Button } from '@/components/button' と書けるようになります。生成ツールで作った場合は既定で @/* が設定済みです。

7つまずきやすいところ

  • ポートが埋まっている：3000 番が使用中だと起動に失敗します。別プロセスを止めるか、起動オプションでポートを変更します。
  • node_modules を Git に入れてしまう：巨大になるため .gitignore で除外するのが基本です。git 管理の対象は原則ソースと設定ファイルだけにします。
  • 同じプロジェクトで next dev を二重起動する：バージョン 16 ではロックの仕組みが入り、二重起動が防がれます。なお next dev と next build は出力先が分かれたため、同時に実行できます。
  • 環境変数が読まれない：.env.local に書いた値のうち、ブラウザ側で参照できるのは NEXT_PUBLIC_ で始まるものだけです。詳しくは 環境変数の設定方法 の考え方と合わせて、本番ビルドとセルフホスト で扱います。

ここまでで、動く土台と各ファイルの意味が揃いました。次は app ディレクトリの中身、つまりフォルダ構成がどう URL に対応するのかを見ていきます。

次に読むApp Router のルーティングとファイル規約 目次に戻るNext.js シリーズの全体像
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 開発環境の構築とプロジェクトの初期構成
  2. App Router のルーティングとファイル規約
  3. レイアウトと特殊ファイルの使い分け
  4. サーバーコンポーネントとクライアントコンポーネント
  5. サーバー側でのデータ取得と並列化
  6. ストリーミングで体感速度を上げる
  7. キャッシュの仕組みと use cache
  8. 再検証の使い分け
  9. フォーム送信とデータ更新の実装
  10. エラーハンドリングとエラー境界
  11. Route Handlers で API を作る
  12. メタデータ API で SEO を整える
  13. 画像とフォントの最適化
  14. 本番ビルドとセルフホスト
  15. バージョン16 への移行と注意点
2026-08-07 09:25:38 atom 0

人気ページ

最近更新/作成されたページ