デザインについての学習メモブログ

NAOQ Design Note

プログラミング > NextJS入門：環境構築からプロジェクト作成,起動まで解説

NextJS入門：環境構築からプロジェクト作成,起動まで解説

記事内に広告が含まれています。

NextJS入門：環境構築からプロジェクト作成,起動まで解説

Next.jsは、Reactベースのフルスタックフレームワークで、モダンなWebアプリケーション開発において非常に人気があります。

この記事では、Next.jsを始めるための環境構築から、実際にプロジェクトを作成して起動するまでの手順を詳しく解説します。

Next.jsとは？

Next.jsは、React.jsをベースとしたフレームワークで、以下のような特徴があります。

  • サーバーサイドレンダリング（SSR） – SEOに優れ、初回読み込みが高速
  • 静的サイト生成（SSG） – ビルド時にHTMLを生成、CDNでの配信に最適
  • ファイルベースルーティング – ファイル構造がそのままルートになる直感的な設計
  • API Routes – フロントエンドとバックエンドを一つのプロジェクトで管理
  • 自動コード分割 – 必要な部分のみ読み込み、パフォーマンス最適化
  • TypeScript サポート – 標準でTypeScriptをサポート

必要な環境構築

Next.jsを始める前に、以下の環境が必要です。

Node.jsのインストール

Next.jsを動かすには、Node.js（バージョン18.17以上推奨）が必要です。

Windowsの場合:

  1. Node.js公式サイトから最新のLTS版をダウンロード
  2. インストーラーを実行してデフォルト設定でインストール

macOSの場合:

方法１：Homebrewを使用する場合

Bash
brew install node

方法２：公式サイトからダウンロードしても可

公式サイトのダウンロードページからインストーラーをダウンロード

Linuxの場合:

Bash
# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# CentOS/RHEL
curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo yum install -y nodejs

インストール確認

ターミナル（コマンドプロンプト）で以下のコマンドを実行して、正しくインストールされているか確認しましょう。

Bash
node --version
npm --version

Node.jsのバージョンが18.17以上、npmのバージョンが表示されればOKです。

Next.jsプロジェクトの作成

方法１：create-next-appを使用したプロジェクト作成

Next.jsでは、create-next-appという公式ツールを使用して簡単にプロジェクトを作成できます。

Bash
npx create-next-app@latest my-next-app
「my-next-app」はプロジェクト名なので、好きな名前で良い

このコマンドを実行すると、いくつかの質問が表示されます。

Bash
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes  
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

推奨設定:

  • TypeScript: Yes（型安全性のため）
  • ESLint: Yes（コード品質管理のため）
  • Tailwind CSS: お好みで（CSSフレームワーク）
  • src/ directory: Yes（プロジェクト構造の整理のため）
  • App Router: Yes（Next.js 13以降の新機能）
  • Import alias: Yes（インポートパスの簡略化）

方法２：手動でのプロジェクト作成（参考）

より細かい制御が必要な場合は、手動でプロジェクトを作成することも可能です

Bash
mkdir my-next-app
cd my-next-app
npm init -y
npm install next@latest react@latest react-dom@latest

package.jsonのscriptsセクションに以下を追加

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

プロジェクト構造の理解

作成されたプロジェクトの構造を見てみましょう。

Bash
my-next-app/
├── src/                   # ソースコード
│   └── app/               # App Router（Next.js 13+）
│       ├── favicon.ico    # ファビコン
│       ├── globals.css    # グローバルスタイル
│       ├── layout.tsx     # ルートレイアウト
│       └── page.tsx       # ホームページ
├── public/                # 静的ファイル
├── next.config.js         # Next.js設定ファイル
├── package.json           # 依存関係とスクリプト
├── tailwind.config.ts     # Tailwind CSS設定
└── tsconfig.json          # TypeScript設定

重要なファイルの説明

src/app/layout.tsx – アプリケーション全体のレイアウトを定義

TSX
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

src/app/page.tsx – ホームページ（”/”ルート）のコンポーネント

TSX
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
    </main>
  )
}

開発サーバーの起動

プロジェクトが作成できたら、開発サーバーを起動してみましょう。

Bash
cd my-next-app
npm run dev

または

Bash
yarn dev
# もしくは
pnpm dev

成功すると、ターミナルに以下のような表示が現れます

Bash
 ▲ Next.js 14.0.0
  - Local:        http://localhost:3000
  - Network:      http://192.168.1.100:3000

 ✓ Ready in 2.3s

ブラウザで http://localhost:3000 にアクセスすると、Next.jsのウェルカムページが表示されます。

最初のページを編集してみる

src/app/page.tsxファイルを編集して、変更がリアルタイムで反映されることを確認しましょう

TSX
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold mb-4">
        私のNext.jsアプリケーション
      </h1>
      <p className="text-xl text-gray-600">
        Next.jsの世界へようこそ！
      </p>
    </main>
  )
}

ファイルを保存すると、ブラウザが自動的に更新され、変更が反映されます。これがNext.jsの「Hot Reload」機能です。

新しいページを追加する

Next.jsでは、appディレクトリにフォルダとファイルを作成することで、新しいルートを簡単に追加できます。

例えば、/aboutページを作成してみましょう

  1. src/app/about/フォルダを作成
  2. src/app/about/page.tsxファイルを作成
TSX
export default function About() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold mb-4">私たちについて</h1>
      <p className="text-xl text-gray-600">
        これはAboutページです。
      </p>
    </main>
  )
}

http://localhost:3000/about にアクセスすると、新しく作成したページが表示されます。

よく使われるコマンド

開発を進める上で知っておきたいコマンド

Bash
# 開発サーバー起動
npm run dev

# 本番用ビルド
npm run build

# 本番サーバー起動（ビルド後）
npm run start

# ビルドと本番サーバー起動を連続実行します
npm run build && npm run start

# コードの静的解析
npm run lint

# TypeScriptの型チェック
npx tsc --noEmit

# 依存関係の追加
npm install パッケージ名

npm run devコマンド

  • 効果: 開発用サーバーとして起動します
  • 詳細: Hot Reload機能により、ファイルを変更すると自動的にブラウザが更新されます
  • ポート: デフォルトで localhost:3000 で起動
  • 使用場面: 開発中は常に実行しているコマンド

npm run buildコマンド

  • 効果: 本番環境用に最適化されたアプリケーションをビルドします
  • 詳細:
    • TypeScript→JavaScriptファイルにトランスパイル・圧縮
    • CSSファイルの最適化
    • 静的ファイルの生成（SSGの場合）
    • コード分割による最適化
  • 生成物: .nextフォルダに最適化されたファイルが作成されます
  • 使用場面: デプロイ前の準備、本番環境での動作確認
Bash
# パフォーマンス分析のコマンド
# どのライブラリがファイルサイズに影響しているかを可視化
npm run build -- --analyze

npm run start

  • 効果: ビルド済みのアプリケーションを本番モードで起動します
  • 詳細: npm run build 実行後に使用可能
  • パフォーマンス: 開発モードより高速で動作
  • 使用場面: 本番環境での実行、デプロイ後の動作確認

npm run lint

  • 効果: ESLintによるコードの静的解析を実行します
  • 検出内容:
    • 構文エラー
    • コーディング規約違反
    • 潜在的なバグ
    • 未使用変数の検出
  • 自動修正: npm run lint -- --fix で修正可能なエラーを自動修正
  • 使用場面: コミット前、CI/CDパイプラインでの品質チェック

npx tsc –noEmit

  • 効果: TypeScriptの型チェックのみを実行します
  • 詳細:
    • JavaScriptファイルは生成せず、型エラーのみをチェック
    • Next.jsの標準ビルドプロセスとは独立して実行
  • 検出内容: 型の不整合、型安全性の問題
  • 使用場面: 型エラーの早期発見、CI/CDでの型チェック

npm install [パッケージ名]

Bash
# 基本的なインストール
npm install lodash

# 開発依存関係としてインストール
npm install --save-dev @types/lodash

# 特定のバージョンをインストール
npm install react@18.2.0

# グローバルインストール
npm install -g create-next-app

#不要なパッケージを削除します
#詳細: package.jsonとnode_modulesから完全に削除
npm uninstall lodash

#すべてのパッケージを最新の互換バージョンに更新します
npm update

効果: 新しいパッケージをプロジェクトに追加します

詳細:

  • package.jsonの依存関係に自動追加
  • node_modulesフォルダにパッケージがダウンロード
  • package-lock.jsonでバージョンを固定

トラブルシューティング：よくある問題と解決方法

問題1: ポート3000が既に使用されている

エラーメッセージ例:

Bash
Error: listen EADDRINUSE: address already in use :::3000

対処：

Bash
# 別のポートで起動
npm run dev -- -p 3001

発生する状況:

  • 他のアプリケーション（React、Vue、Express等）が既にポート3000で動いている
  • 前回のNext.jsプロセスが正常に終了せずにポートを占有している
  • 複数のNext.jsプロジェクトを同時に起動しようとしている

問題2: Node.jsのバージョンが古い

エラーメッセージ例:

Bash
You are using Node.js 16.14.0. For Next.js, Node.js version >= 18.17.0 is required.

対処：

Bash
# Node.jsのバージョン確認
node --version

# Node.jsをアップデート（nやnvmを使用）
n latest
# または
nvm install --lts

発生する状況:

  • システムに古いNode.jsがインストールされている（v16以下など）
  • 新しいNext.jsの機能を使おうとしている
  • プロジェクト作成時にバージョンエラーが発生

問題3: キャッシュの問題

症状例:

  • 削除したコンポーネントがまだ表示される
  • 新しいライブラリをインストールしたのに「モジュールが見つからない」エラー
  • ビルドは通るのにランタイムエラーが発生する

対処：

Bash
# Next.jsのキャッシュをクリア
# Mac/Linux
rm -rf .next
npm run dev

# Windows (PowerShell)
Remove-Item -Recurse -Force .next
npm run dev

発生する状況:

  • 依存関係を変更した後に古いコードが動作している
  • ビルドエラーが解決されない
  • 新しく追加したパッケージが認識されない
  • 開発サーバーで変更が反映されない

まとめ

この記事では、Next.jsの環境構築からプロジェクト作成、起動までの基本的な流れを説明しました。重要なポイントをまとめると

  1. Node.js 18.17以上が必要
  2. create-next-appで簡単にプロジェクト作成
  3. App Routerを使用した現代的な構造
  4. ファイルベースルーティングで直感的なページ作成
  5. Hot Reloadによる効率的な開発体験

Next.jsは学習コストは少し高めですが、一度慣れてしまえば非常に生産性の高いフレームワークです。

まずはシンプルなページから始めて、徐々に機能を追加していくことをお勧めします。

次のステップとしては、以下のようなトピックに進むと良いでしょう。

  • コンポーネントの作成と再利用
  • CSSスタイリング（Tailwind CSS、CSS Modules）
  • API Routesでのバックエンド機能
  • データフェッチング（SSR、SSG）
  • デプロイ方法（Vercel、Netlify等）
, , , ,

最近の投稿

カテゴリー

HTML
CSS
JS
画像
COLOR
文字
UI
設計
写真
心理学
WordPress
雑記
AIアイコン
AI

お役立ちサービス

Figma
WordPress
ChatGPT
GitHub
codepen
pintarest
Docker hub
PayPal
PayPal