この記事は人間が実装を確認し、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によるコード品質管理
  • 統一されたコンポーネント構造

技術スタック

{}"}de""""""pnrnnt@eeeeeatnxaxxiadtcttlie"t--wln:"itiwc:nhnii"tedne^"lmcds1^"esc"51:sss:.9""s4."::/{.1^t4.4""y"0.^^p,"304o,...g441r"..a,61p"1h,"y,":"^0.5.16"

プロジェクト構造

s├│││││││├│││││││├│└r────c────/a├││││├└c├│││││└i└m├└p───o──1─e──p───m──8─s──/pns[├├├└isol├├├├└p/raejl────cina─────aognao────otey─────gue..cnenoetsjjalpae.mtuHFPTTi/sslaabxsasteoaonooeygoavp/aoggggnn]eumg.dtegg.u.tpteeLllttt/lsrraees.se..yTLtx/ttohasssuenxxxtmg.eut.astgxsex.###t#######sフサレxペi翻ルホAサァイイー1訳ーーbンビトアジ8フトムoプコマウ固nァレペuルンット有設イイーtペプココ定ルアジペー生ンンウージ成ポポトジーーネネンントト

特徴的な実装

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

eee}xxxpppoorrrttt実装ccdooennfssattuldrtyenvfaaumlniiccdtai=toen'f=soirftcaeelm-sasept;(a)t:icM'e;tadataRoute.Sitemap{

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

<P/abtd<PgrieYaeetsogLalcueaderrLyc=iCaor{poyuuttnotm(itub'oetItnn>ti=tet{mltse(=''{)db}ersecardicprtuimobnI't)e}ms}

3. 環境変数による設定

#NNEE.XXeTTn__vPP.UUeBBxLLaIImCCp__lSBeIATSEE__UPRALT=Hh=ttp://localhost:3000

使い方

インストール

gcnidptmnceilxnotsnjtesa-l[ilr1e8pno-stihteomreys--usrslg]-template

開発

npmrundev

ビルド

npmrunbuild

カスタマイズポイント

  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