この記事は人間が実装を確認し、AIが記事を作成しました。

概要

このテンプレートは、Next.js 15を使用した静的サイト生成（SSG）に対応し、多言語対応とダークモードを標準装備したWebアプリケーション開発の出発点です。TypeScript、Tailwind CSS、next-intl、next-themesを組み合わせています。

https://nextjs-i18n-themes-ssg-template.vercel.app/ja/

主な機能

1. 静的サイト生成（SSG）

  • output: 'export'によるフルスタティックエクスポート
  • 高速なページロードとSEO最適化
  • ホスティングコストの削減

2. 国際化対応（i18n）

  • next-intlによる完全な多言語サポート
  • 日本語・英語対応（簡単に言語追加可能）
  • URLベースの言語切り替え（/ja/about、/en/about）
  • 型安全な翻訳キー

3. ダークモード

  • next-themesによるシステム連動ダークモード
  • ユーザーの好みを自動検出
  • スムーズなテーマ切り替えアニメーション
  • LocalStorageによる設定の永続化

4. 開発者体験の向上

  • TypeScriptによる型安全性
  • Tailwind CSSによる効率的なスタイリング
  • ESLintによるコード品質管理
  • 統一されたコンポーネント構造

技術スタック

{
  "dependencies": {
    "next": "^15.4.4",
    "react": "^19.1.0",
    "next-intl": "^4.3.4",
    "next-themes": "^0.4.6",
    "tailwindcss": "^4.1.11",
    "@tailwindcss/typography": "^0.5.16"
  }
}

プロジェクト構造

src/
├── app/
│   ├── [locale]/
│   │   ├── layout.tsx      # ルートレイアウト
│   │   ├── page.tsx        # ホームページ
│   │   ├── about/          # Aboutページ
│   │   └── example/        # サンプルページ
│   ├── icon.svg           # ファビコン
│   └── sitemap.ts         # サイトマップ生成
├── components/
│   ├── layout/            # レイアウトコンポーネント
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   ├── PageLayout.tsx
│   │   ├── ToggleTheme.tsx
│   │   └── ToggleLanguage.tsx
│   └── page/              # ページ固有コンポーネント
├── i18n/
│   └── routing.ts         # i18n設定
└── messages/              # 翻訳ファイル
    ├── en.json
    └── ja.json

特徴的な実装

1. sitemap.ts の静的エクスポート対応

export const dynamic = 'force-static';
export const revalidate = false;

export default function sitemap(): MetadataRoute.Sitemap {
  // 実装
}

2. 統一されたページレイアウト

<PageLayout 
  breadcrumbItems={breadcrumbItems} 
  title={t('title')}
  description={t('description')}
>
  <YourContent />
</PageLayout>

3. 環境変数による設定

# .env.example
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_BASE_PATH=

使い方

インストール

git clone [repository-url]
cd nextjs-i18n-themes-ssg-template
npm install

開発

npm run dev

ビルド

npm run build

カスタマイズポイント

  1. 言語追加 : src/i18n/routing.tsとmessages/ディレクトリ
  2. ページ追加 : src/app/[locale]/配下に新規ディレクトリ
  3. テーマカスタマイズ : tailwind.config.jsとグローバルCSS
  4. メタデータ : 各ページのgenerateMetadata関数

ベストプラクティス

  1. コンポーネント命名 : PascalCaseを使用
  2. 翻訳キー : ネストした構造で整理
  3. 型安全性 : TypeScriptの型を最大限活用
  4. パフォーマンス : 静的生成を活用したキャッシュ戦略

まとめ

国際化対応とダークモード機能を標準装備し、SEOに最適化された静的サイトを素早く構築できるよう目指しています。開発者の生産性を向上させながら、エンドユーザーに優れた体験を提供していきたいと思います。

リポジトリ

GitHub - nextjs-i18n-themes-ssg-template

タグ

  • Next.js
  • TypeScript
  • i18n
  • SSG
  • TailwindCSS