Next.jsで高速eコマースアプリを構築する | エピソード1: プロジェクトの紹介と環境設定

こんにちは！このシリーズでは、Next.jsとヘッドレスコマースを活用して、2025年のトレンドに沿った高速でSEOに強いeコマースアプリケーションをゼロから構築します。シリーズを通じて、Next.jsの最新機能（App Router、React Server Components）やヘッドレスアーキテクチャを駆使し、パフォーマンスとユーザー体験を最大化する方法を学びます。

初回のエピソードでは、プロジェクトの概要を紹介し、開発環境を整えます。Next.jsのセットアップからTypeScript、Tailwind CSSの統合まで、すぐに開発を始められる環境を構築しましょう！

## このシリーズの目的

- Next.jsを使って本格的なeコマースアプリを構築する手順を学ぶ。
- ヘッドレスコマース（ShopifyやCommerce.jsなど）を活用して柔軟なデータ管理を実現。
- パフォーマンス、SEO、ユーザー体験を最適化する実践的なテクニックを習得。
- 企業向けプロジェクトに適用可能なスキルを身につける。

## エピソード1のゴール

- eコマースプロジェクトの概要を理解する。
- Next.js（App Router）プロジェクトをTypeScriptでセットアップ。
- Tailwind CSSを統合してレスポンシブデザインの基礎を準備。
- ESLintとPrettierでコード品質を確保。

## 必要なもの

- Node.js（v18以上推奨）
- テキストエディタ（VSCode推奨）
- 基本的なReactとJavaScriptの知識

---

## ステップ1: プロジェクトの概要

このシリーズでは、ヘッドレスコマースプラットフォーム（例: Shopify Storefront API）をNext.jsと統合し、商品一覧ページ（PLP）、商品詳細ページ（PDP）、カート、決済機能などを備えたeコマースアプリを構築します。主な特徴は以下の通りです：

- **高速性**: Next.jsの静的生成（SSG）とサーバーサイドレンダリング（SSR）で高速なページ読み込みを実現。
- **SEO最適化**: メタタグや構造化データを活用して検索エンジンでの可視性を向上。
- **スケーラビリティ**: ヘッドレスアーキテクチャでフロントエンドとバックエンドを分離。
- **ユーザー体験**: PWAや多言語対応でグローバルなユーザーに対応。

初回では、開発の土台となるNext.jsプロジェクトをセットアップします。

---

## ステップ2: Next.jsプロジェクトの作成

Next.jsの最新バージョンを使ってプロジェクトを初期化しましょう。ターミナルで以下のコマンドを実行します：

```bash
npx create-next-app@latest next-ecommerce --typescript --eslint --tailwind --app --src-dir --no-experimental-app
```

各オプションの説明：
- `--typescript`: TypeScriptを有効化。
- `--eslint`: コード品質チェックツールを追加。
- `--tailwind`: Tailwind CSSを初期設定。
- `--app`: App Routerを使用（Next.js 13以降の新機能）。
- `--src-dir`: ソースコードを`src`フォルダに整理。
- `--no-experimental-app`: 実験的機能を無効化。

プロジェクトが作成されたら、ディレクトリに移動して開発サーバーを起動します：

```bash
cd next-ecommerce
npm run dev
```

ブラウザで`http://localhost:3000`にアクセスし、デフォルトのNext.jsページが表示されれば成功です！

---

## ステップ3: プロジェクト構造の整理

プロジェクトをスケーラブルにするため、以下のようなフォルダ構造を採用します：

```
src/
├── app/                # App Routerのルーティング
├── components/         # 再利用可能なReactコンポーネント
├── lib/                # ユーティリティ関数やAPIクライアント
├── styles/             # グローバルCSSやTailwind設定
├── types/              # TypeScriptの型定義
```

`src/app/page.tsx`を以下のように簡略化して、初期ページをクリーンにします：

```tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4">
      <h1 className="text-4xl font-bold">Next.js eCommerceへようこそ！</h1>
      <p className="mt-4 text-lg">高速でSEOに強いeコマースアプリを構築中...</p>
    </main>
  );
}
```

このコードは、Tailwind CSSを使ってシンプルなウェルカムページを表示します。

---

## ステップ4: Tailwind CSSのカスタマイズ

Tailwind CSSは、迅速なUI構築に最適です。`tailwind.config.ts`をカスタマイズして、プロジェクトのブランドに合わせた設定を追加します：

```ts
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#1D4ED8', // ブランドカラー（例: ブルー）
        secondary: '#9333EA', // アクセントカラー
      },
    },
  },
  plugins: [],
};
```

`src/styles/globals.css`に基本的なリセットスタイルを追加：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
```

これで、カスタムカラー（`primary`や`secondary`）を使ってUIをデザインできます。

---

## ステップ5: ESLintとPrettierの設定

コードの品質と一貫性を保つため、ESLintとPrettierをさらに設定します。必要なパッケージをインストール：

```bash
npm install --save-dev prettier eslint-config-prettier
```

`.prettierrc`ファイルを作成：

```json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true
}
```

`.eslintrc.json`を更新してPrettierと統合：

```json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "react"],
  "rules": {
    "react/prop-types": "off"
  }
}
```

これで、コードフォーマットとLintエラーを自動的に修正できます。試しに以下のコマンドを実行：

```bash
npm run lint
npx prettier --write .
```

---

## ステップ6: 動作確認

開発サーバーを再起動（`npm run dev`）し、`http://localhost:3000`にアクセス。以下のようなページが表示されるはずです：

- 中央に「Next.js eCommerceへようこそ！」という見出し。
- Tailwind CSSによるレスポンシブなレイアウト。
- クリーンでモダンなデザイン。

問題があれば、コンソールやESLintのエラーを確認して修正してください。

---

## まとめと次のステップ

これで、Next.jsを使ったeコマースプロジェクトの開発環境が整いました！TypeScript、Tailwind CSS、ESLint、Prettierを統合したことで、スケーラブルで高品質なコードベースを構築する準備ができました。

次回のエピソードでは、ヘッドレスコマースAPI（例: Shopify Storefront API）を統合し、商品一覧ページ（PLP）を構築します。APIクライアントの設定やデータ取得の最適化についても学びますので、お楽しみに！

---

この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！