2025年7月31日 / 最終更新日 : 2025年10月23日 fujifuji コラム

Next.js環境構築完全ガイド2025｜Windows・Mac対応【初心者向け】

Next.jsでモダンなWebアプリケーション開発を始めたいけれど、「環境構築が複雑そう」「どこから手をつけていいかわからない」と悩んでいませんか？この記事では、Next.js開発環境の構築から実際のアプリケーション作成まで、初心者でも迷わず進められるよう詳しく解説します。

目次

Next.jsとは

Next.jsの特徴

Next.jsは、Reactベースのフルスタックフレームワークです。Meta（旧Facebook）が開発したReactをベースに、Vercel社が開発しています。

主な特徴

  • サーバーサイドレンダリング（SSR）: SEOに優れた高速なページ読み込み
  • 静的サイト生成（SSG）: ビルド時にHTMLを生成し、CDNで高速配信
  • API Routes: バックエンドAPIも同じプロジェクトで開発可能
  • 自動コード分割: 必要な部分のみ読み込み、パフォーマンス最適化
  • TypeScript対応: 型安全な開発が標準でサポート

なぜNext.jsを選ぶべきか

従来のReactとの違い

  • ルーティング設定が不要（ファイルベースルーティング）
  • 画像最適化が自動
  • 本番環境向けの最適化が標準装備

企業での採用実績

  • Netflix、TikTok、Twitch、Hulu
  • 日本では楽天、メルカリ、サイバーエージェントなど

事前準備：必要なツールのインストール

Node.js環境の構築

Node.jsバージョン要件

  • Node.js 18.17以上（推奨：20.x LTS）
  • npm 9以上 または yarn 1.22以上

Windows環境

  1. https://nodejs.org から「LTS版」をダウンロード
  2. インストーラーを実行
  3. 「Add to PATH」にチェックを入れてインストール

Mac環境

# Homebrewでインストール（推奨）
brew install node

# または公式インストーラーを使用

バージョン確認

node --version
npm --version

期待する出力例:

v20.11.0
10.2.4

パッケージマネージャーの選択

npm（標準）

  • Node.jsに標準で含まれる
  • 安定性が高い

yarn（高速）

npm install -g yarn
yarn --version

pnpm（最新・効率的）

npm install -g pnpm
pnpm --version

開発エディタの準備

Visual Studio Code（推奨）

  • Next.js開発に最適化された拡張機能が豊富
  • 無料で高機能

必須VS Code拡張機能

  • ES7+ React/Redux/React-Native snippets
  • Prettier – Code formatter
  • Auto Rename Tag
  • Bracket Pair Colorizer

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

create-next-appを使用した作成

基本的なプロジェクト作成

npx create-next-app@latest my-next-app
cd my-next-app

TypeScript対応プロジェクト

npx create-next-app@latest my-next-app --typescript

完全なオプション指定

npx create-next-app@latest my-next-app \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

プロジェクト構成の理解

作成されるファイル構造

my-next-app/
├── app/                 # App Router（Next.js 13+）
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/              # 静的ファイル
├── next.config.js       # Next.js設定
├── package.json         # 依存関係
├── tailwind.config.ts   # Tailwind CSS設定
└── tsconfig.json        # TypeScript設定

重要ファイルの説明

  • app/page.tsx: ホームページのコンポーネント
  • app/layout.tsx: 全ページ共通のレイアウト
  • next.config.js: Next.js全体の設定ファイル

開発サーバーの起動と確認

開発サーバーの起動

npm run dev
# または
yarn dev
# または
pnpm dev

起動メッセージ例

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

ブラウザでの確認

  1. ブラウザで http://localhost:3000 にアクセス
  2. Next.jsのウェルカムページが表示されることを確認
  3. ホットリロード機能の確認（ファイル保存時の自動更新）

最初のページ編集

app/page.tsx編集例

export default function Home() {
  return (
    <main className="p-8">
      <h1 className="text-4xl font-bold">
        Hello, Next.js!
      </h1>
      <p className="mt-4 text-lg">
        環境構築が完了しました！
      </p>
    </main>
  )
}

App Routerの基本理解

ファイルベースルーティング

Next.js 13以降のApp Routerでは、appディレクトリ内のフォルダー構造がそのままURLになります。

ルーティング例

app/
├── page.tsx          # /
├── about/
│   └── page.tsx      # /about
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/[動的パラメータ]
└── api/
    └── users/
        └── route.ts  # /api/users

レイアウトシステム

app/layout.tsx（ルートレイアウト）

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        <header className="bg-blue-600 text-white p-4">
          <h1>My App</h1>
        </header>
        {children}
      </body>
    </html>
  )
}

新しいページの作成

app/about/page.tsx

export default function About() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">About Us</h1>
      <p>このページについての説明です。</p>
    </div>
  )
}

スタイリングの設定

Tailwind CSS（推奨）

インストール（create-next-appで未選択の場合）

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js設定

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS Modules

components/Button.module.css

.button {
  background-color: #0070f3;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
}

.button:hover {
  background-color: #0051a2;
}

コンポーネントでの使用

import styles from './Button.module.css'

export default function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.button}>{children}</button>
}

styled-components

インストール

npm install styled-components
npm install -D @types/styled-components

使用例

import styled from 'styled-components'

const StyledButton = styled.button`
  background-color: #0070f3;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
`

状態管理とデータフェッチング

useState（ローカル状態）

'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div className="p-4">
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  )
}

Server Components（サーバーサイド）

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  return res.json()
}

export default async function Posts() {
  const posts = await getData()

  return (
    <div>
      {posts.slice(0, 5).map((post: any) => (
        <div key={post.id} className="border p-4 mb-2">
          <h2 className="font-bold">{post.title}</h2>
        </div>
      ))}
    </div>
  )
}

SWR（クライアントサイドフェッチング）

インストール

npm install swr

使用例

'use client'
import useSWR from 'swr'

const fetcher = (url: string) => fetch(url).then(res => res.json())

export default function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>エラーが発生しました</div>
  if (!data) return <div>読み込み中...</div>

  return <div>こんにちは、{data.name}さん！</div>
}

API Routes の構築

REST API の作成

app/api/hello/route.ts

export async function GET() {
  return Response.json({ message: 'Hello, API!' })
}

export async function POST(request: Request) {
  const body = await request.json()
  return Response.json({ received: body })
}

動的ルートAPI

app/api/users/[id]/route.ts

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const id = params.id
  return Response.json({ userId: id, name: `User ${id}` })
}

データベース接続例

Prisma + SQLite

npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

簡単なAPI例

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export async function GET() {
  const users = await prisma.user.findMany()
  return Response.json(users)
}

TypeScript設定の最適化

tsconfig.json カスタマイズ

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/utils/*": ["./src/utils/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

型定義の活用

types/index.ts

export interface User {
  id: number
  name: string
  email: string
}

export interface Post {
  id: number
  title: string
  content: string
  authorId: number
}

本番環境向け設定

next.config.js の最適化

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  images: {
    domains: ['example.com'],
  },
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY,
  },
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
    ]
  },
}

module.exports = nextConfig

環境変数の設定

.env.local

NEXT_PUBLIC_API_URL=http://localhost:3000/api
DATABASE_URL="file:./dev.db"
SECRET_KEY=your-secret-key

使用例

const apiUrl = process.env.NEXT_PUBLIC_API_URL
const secretKey = process.env.SECRET_KEY // サーバーサイドのみ

ビルドと本番起動

# 本番ビルド
npm run build

# 本番サーバー起動
npm run start

デプロイメント

Vercel（推奨）

GitHubと連携

  1. GitHub にプロジェクトをプッシュ
  2. Vercel にアカウント作成
  3. GitHubリポジトリを選択してデプロイ

手動デプロイ

npm install -g vercel
vercel

Netlify

netlify.toml

[build]
  command = "npm run build"
  publish = ".next"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Docker化

Dockerfile

FROM node:18-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

FROM node:18-alpine AS builder
WORKDIR /app
COPY . .
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=deps /app/node_modules ./node_modules
COPY package.json ./
EXPOSE 3000
CMD ["npm", "start"]

パフォーマンス最適化

画像最適化

import Image from 'next/image'

export default function ProfilePicture() {
  return (
    <Image
      src="/profile.jpg"
      alt="プロフィール画像"
      width={300}
      height={300}
      priority
    />
  )
}

動的インポート

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>読み込み中...</p>,
})

export default function Page() {
  return (
    <div>
      <h1>ページタイトル</h1>
      <DynamicComponent />
    </div>
  )
}

バンドル分析

npm install --save-dev @next/bundle-analyzer

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // Next.js設定
})

ANALYZE=true npm run build

開発効率向上のツール

ESLint + Prettier設定

.eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error"
  }
}

.prettierrc

{
  "semi": false,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

Husky + lint-staged

npm install --save-dev husky lint-staged
npx husky install

package.json

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

VS Code設定

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "emmet.includeLanguages": {
    "typescript": "html"
  }
}

トラブルシューティング

よくあるエラーと解決法

「Error: Cannot find module ‘next’」

rm -rf node_modules package-lock.json
npm install

「Port 3000 is already in use」

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

# または既存プロセス終了
lsof -ti:3000 | xargs kill -9

「Module not found: Can’t resolve ‘@/components’」

  • tsconfig.json の paths 設定を確認
  • VS Code を再起動

Hydration Errors

// useEffect で client-side のみの処理
useEffect(() => {
  // ブラウザ固有の処理
}, [])

デバッグ方法

VS Code デバッガー設定 .vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

デバッグ起動

NODE_OPTIONS='--inspect' npm run dev

2025年のNext.js最新動向

App Router の成熟

Server Actions

async function createPost(formData: FormData) {
  'use server'
  
  const title = formData.get('title') as string
  // データベースに保存処理
}

export default function PostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="タイトル" />
      <button type="submit">投稿</button>
    </form>
  )
}

Streaming UI

import { Suspense } from 'react'

export default function Page() {
  return (
    <div>
      <h1>ダッシュボード</h1>
      <Suspense fallback={<div>読み込み中...</div>}>
        <SlowDataComponent />
      </Suspense>
    </div>
  )
}

Turbopack（Rust製バンドラー）

# 開発環境でTurbopack使用
npm run dev -- --turbo

React Server Components の活用

// Server Component（デフォルト）
async function ServerComponent() {
  const data = await fetch('https://api.example.com/data')
  return <div>{data.title}</div>
}

// Client Component
'use client'
function ClientComponent() {
  const [state, setState] = useState(0)
  return <button onClick={() => setState(state + 1)}>{state}</button>
}

まとめ

Next.js環境構築は、適切な手順で行えば決して複雑ではありません。この記事で紹介した方法に従って、モダンなReact開発環境を構築しましょう。

環境構築成功のポイント

  1. Node.js LTS版の使用
  2. create-next-app での確実な初期設定
  3. TypeScript + Tailwind CSS の採用
  4. App Router の理解と活用
  5. 継続的な学習とアップデート

今すぐできること

  • Node.js最新LTS版のインストール
  • create-next-app でのプロジェクト作成
  • 開発サーバーの起動確認
  • 最初のページとAPIの作成
  • VS Code 環境の整備

次のステップ

  • 認証システムの実装（NextAuth.js）
  • データベース連携（Prisma + PlanetScale）
  • 状態管理（Zustand、Jotai）
  • テスト環境構築（Jest、Playwright）
  • CI/CD パイプライン構築

Next.jsの強力な機能を活用して、高性能でSEOに優れたWebアプリケーションを開発しましょう。正しい環境構築が、あなたの開発効率を大幅に向上させます！

最終確認チェックリスト

  • ✓ Node.js 18.17以上がインストール済み
  • ✓ Next.jsプロジェクトが正常に作成できる
  • ✓ 開発サーバーがhttp://localhost:3000で起動
  • ✓ ホットリロードが正常に動作
  • ✓ TypeScript環境が構築済み
  • ✓ 基本的なページとAPIが作成可能

モダンWeb開発の世界へようこそ！

■らくらくPython塾 – 読むだけでマスター

■プロンプトだけでオリジナルアプリを開発・公開してみた！！

プロンプトだけでオリジナルアプリを開発・公開してみた！！

■AI時代の第一歩！「AI駆動開発コース」はじめました！

テックジム東京本校で先行開始。

AI駆動開発/生成AIエンジニアコース（初心者向け）

■テックジム東京本校

「武田塾」のプログラミング版といえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
より早く、より安く、しかも対面型のプログラミングスクールです。

テックジム東京本校

＜短期講習＞5日で5万円の「Pythonミニキャンプ」開催中。

【最速・確実】プログラミング攻略「永田町Pythonミニキャンプ」【5日間で5万円】

＜月1開催＞放送作家による映像ディレクター養成講座

現役放送作家が教える動画講座！『ＤＯＧＡ』

＜オンライン無料＞ゼロから始めるPython爆速講座

【無料・オンライン】ゼロからはじめるPython爆速講座

プログラミング学習に関するお役立ちコンテンツ

カテゴリー
コラム
コラム

前の記事

Python環境構築完全ガイド2025｜Windows・Mac・Linux対応【初心者向け】
2025年7月31日
コラム

次の記事

Pythonのsorted()とsort()の違いを完全解説【初心者向け】
2025年7月31日