Next.jsプロジェクト新規作成のベストプラクティス：爆速開発を始めるための完全ガイド
はじめに
Next.jsは、Reactアプリケーションを構築するためのフレームワークです。サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などの機能が組み込まれており、高いパフォーマンスと優れた開発体験を提供します。
この記事では、Next.jsプロジェクトを新規作成する際の基本的な手順から、開発効率を最大化するための推奨設定までを網羅的に解説します。
1. Next.jsプロジェクトの基本的な作成方法
プロジェクトを作成するコマンド
まずは、Next.jsプロジェクトのひな形を作成します。以下のコマンドをターミナルで実行してください。
my-next-appの部分は、作成したいプロジェクト名に置き換えてください。
pnpm create next-app@latest my-next-app
このコマンドを実行すると、いくつか設定オプションが表示されます。推奨される設定を以下に示します。
プロジェクト作成時の設定オプション（推奨）
| 設定項目 | 推奨 | 理由 |
|---|---|---|
| TypeScriptの使用 | Yes | 型安全性を確保し、開発中のエラーを早期に発見できます。大規模なプロジェクトでは特に推奨されます。 |
| ESLintの使用 | Yes | コードの品質を保ち、チーム開発におけるコーディング規約の統一に役立ちます。 |
| Tailwind CSSの使用 | Yes | dユーティリティファーストのCSSフレームワークで、効率的にスタイリングを行えます。学習コストはありますが、一度習得すると開発速度が格段に上がります。 |
src/ディレクトリの使用 |
Yes | コードの整理に役立ち、プロジェクトの見通しが良くなります。特に規模が大きくなるプロジェクトで推奨されます。 |
| App Routerの使用 | Yes | Next.js 13で導入された新しいルーティングシステムで、React Server Componentsなどの最新機能を使用するために推奨されます。今後の開発の主流となるでしょう。 |
| カスタムインポートエイリアスの設定 | Yes |
@/componentsのように、相対パスではなく絶対パスでインポートできるようになります。インポートパスが簡潔になり、コードの可読性が向上します。 |
これらの設定を適用することで、モダンなNext.js開発環境が手に入ります。
プロジェクトの起動方法
プロジェクトの作成が完了したら、以下のコマンドでプロジェクトディレクトリに移動し、開発サーバーを起動します。
cd my-next-app
pnpm dev
ブラウザでhttp://localhost:3000にアクセスすると、Next.jsのウェルカムページが表示されるはずです。
2. 主要なディレクトリ構造
pnpm create next-appコマンドで作成されたプロジェクトの主要なディレクトリ構造は以下のようになります（src/ディレクトリを使用した場合）。
my-next-app/
├── src/
│ ├── app/ # App Router のページ（例: `app/page.tsx` はルートパス）
│ │ └── layout.tsx # アプリケーション全体のレイアウト
│ ├── components/ # 再利用可能なUIコンポーネントを配置
│ └── styles/ # グローバルなスタイルやテーマファイルを配置
├── public/ # 画像やフォントなどの静的ファイルを配置。`public/image.png` は `/image.png` としてアクセス可能
├── package.json # プロジェクトの依存関係、スクリプトを管理
├── next.config.js # Next.jsのビルド設定をカスタマイズ
└── tsconfig.json # TypeScriptの設定ファイル
-
src/app/: Next.js 13以降のApp Routerを使用する場合の、ルーティングとページコンポーネントを配置する主要なディレクトリです。 -
src/components/: アプリケーション全体で再利用するUIコンポーネントを配置します。 -
src/styles/: グローバルなスタイルシートやTailwind CSSのカスタム設定などを配置します。 -
public/: 静的なアセット（画像、ファビコンなど）を配置します。ここにあるファイルは、ルートURLから直接アクセスできます。 -
package.json: プロジェクトのメタデータ、スクリプト、依存関係が定義されています。 -
next.config.js: Next.jsのビルド設定（画像最適化、環境変数、Webpackの設定など）をカスタマイズするためのファイルです。 -
tsconfig.json: TypeScriptを使用する場合のコンパイラ設定ファイルです。
3. 開発時の主なコマンド
package.jsonに定義されている主なスクリプトは以下の通りです。
| コマンド | 説明 |
|---|---|
pnpm dev |
開発サーバーを起動し、開発モードでアプリケーションを実行します。コードの変更が自動的にリロードされます。 |
pnpm build |
プロダクション環境用の最適化されたビルドを作成します。本番デプロイ前に実行します。 |
pnpm start |
プロダクションビルドを実行します。pnpm buildで生成された .nextディレクトリの内容を使用します。 |
pnpm lint |
ESLint を実行し、コードの品質とコーディング規約のチェックを行います。 |
4. 推奨される追加設定
より快適な開発体験とコード品質の向上を目指すために、以下の設定を強く推奨します。
Prettierの設定
Prettierは、コードを自動でフォーマットしてくれるツールです。チーム開発においてコーディングスタイルを統一し、レビューコストを削減するために非常に役立ちます。
pnpm add -D prettier
プロジェクトルートに.prettierrc.jsonファイルを作成し、以下のように設定を追加することで、好みに合わせてフォーマットルールをカスタマイズできます。
// .prettierrc.json
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 80
}
ESLintの設定
ESLintは、コードの品質と一貫性を保つためのリンターです。Next.jsプロジェクト作成時にESLintを有効にしている場合でも、Prettierとの競合を避けるための設定を追加することをおすすめします。
pnpm add -D eslint-config-prettier
このコマンドは、ESLintとPrettierのルールが衝突しないようにするための設定を追加します。通常、プロジェクトルートの.eslintrc.jsonまたはeslint.config.jsにこの設定が自動的に追加されますが、念のため確認しておきましょう。
- 例:
.eslintrc.json（extendsにprettierを追加）
// .eslintrc.json
{
"extends": ["next/core-web-vitals", "prettier"]
}
環境変数の設定
APIキーやデータベースの接続情報など、公開したくない情報や環境によって異なる設定値は、環境変数として管理するのが一般的です。Next.jsでは、.env.localファイルを作成することで簡単に環境変数を設定できます。
プロジェクトのルートディレクトリに.env.localファイルを作成し、以下のように記述します。
# .env.local
NEXT_PUBLIC_API_KEY=your_public_api_key_here
DB_CONNECTION_STRING=your_database_connection_string
-
NEXT_PUBLIC_プレフィックス: このプレフィックスを付けた環境変数は、ブラウザ側（クライアントサイド）のコードからもアクセス可能になります。 -
プレフィックスなし: プレフィックスなしの環境変数は、サーバーサイドのコードからのみアクセス可能です。公開すべきではない機密情報は、必ずプレフィックスなしで設定しましょう。
これらの環境変数は、コード内で process.env.NEXT_PUBLIC_API_KEY のようにアクセスできます。
まとめ
この記事では、Next.jsプロジェクトの作成から、開発効率を高めるための推奨設定までを解説しました。
-
pnpm create next-app@latestでプロジェクトを生成 - TypeScript, ESLint, Tailwind CSS,
src/ディレクトリ, App Router, カスタムインポートエイリアスの有効化を推奨 -
pnpm devで開発サーバーを起動 - Prettierと
eslint-config-prettierでコードフォーマットを自動化 -
.env.localで環境変数を安全に管理
これらのベストプラクティスを実践することで、クリーンでメンテナンスしやすい、そして高性能なNext.jsアプリケーションの開発をスムーズに始めることができます。Next.jsプロジェクトを作成する際に、ぜひ参考にしてください！
Discussion