こんにちは！このシリーズでは、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の最新バージョンを使ってプロジェクトを初期化しましょう。ターミナルで以下のコマンドを実行します：
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: 実験的機能を無効化。
プロジェクトが作成されたら、ディレクトリに移動して開発サーバーを起動します：
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を以下のように簡略化して、初期ページをクリーンにします：
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をカスタマイズして、プロジェクトのブランドに合わせた設定を追加します：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
primary: '#1D4ED8', // ブランドカラー（例: ブルー）
secondary: '#9333EA', // アクセントカラー
},
},
},
plugins: [],
};
src/styles/globals.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をさらに設定します。必要なパッケージをインストール：
npm install --save-dev prettier eslint-config-prettier
.prettierrcファイルを作成：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true
}
.eslintrc.jsonを更新してPrettierと統合：
{
"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エラーを自動的に修正できます。試しに以下のコマンドを実行：
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クライアントの設定やデータ取得の最適化についても学びますので、お楽しみに！
この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！