この記事は人間が実装を確認し、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によるコード品質管理 統一されたコンポーネント構造 技術スタック { } " } d e " " " " " " p n r n n t @ e e e e e a t n x a x x i a d t c t t l i e " t - - w l n : " i t i w c : n h n i i " t e d n e ^ " l m c d s 1 ^ " e s c " 5 1 : s s s : . 9 " " s 4 . " : : / { . 1 ^ t 4 . 4 " " y " 0 . ^ ^ p , " 3 0 4 o , . . . g 4 4 1 r " . . a , 6 1 p " 1 h , " y , " : " ^ 0 . 5 . 1 6 " プロジェクト構造 s ├ │ │ │ │ │ │ │ ├ │ │ │ │ │ │ │ ├ │ └ r ─ ─ ─ ─ c ─ ─ ─ ─ / a ├ │ │ │ │ ├ └ c ├ │ │ │ │ │ └ i └ m ├ └ p ─ ─ ─ o ─ ─ 1 ─ e ─ ─ p ─ ─ ─ m ─ ─ 8 ─ s ─ ─ / p n s [ ├ ├ ├ └ i s o l ├ ├ ├ ├ └ p / r a e j l ─ ─ ─ ─ c i n a ─ ─ ─ ─ ─ a o g n a o ─ ─ ─ ─ o t e y ─ ─ ─ ─ ─ g u e . . c n e n o e t s j j a l p a e . m t u H F P T T i / s s l a a b x s a s t e o a o n o o e y g o a v p / a o g g g g n n ] e u m g . d t e g g . u . t p t e e L l l t t t / l s r r a e e s . s e . . y T L t x / t t o h a s s s u e n x x x t m g . e u t . a s t g x s e x . # # # t # # # # # # # s フ サ レ x ペ i 翻 ル ホ A サ ァ イ イ ー 1 訳 ー ー b ン ビ ト ア ジ 8 フ ト ム o プ コ マ ウ 固 n ァ レ ペ u ル ン ッ ト 有 設 イ イ ー t ペ プ コ コ 定 ル ア ジ ペ ー 生 ン ン ウ ー ジ 成 ポ ポ ト ジ ー ー ネ ネ ン ン ト ト 特徴的な実装 1. sitemap.ts の静的エクスポート対応 e e e } x x x p p p o o r r r t t t 実 装 c c d o o e n n f s s a t t u l d r t y e n v f a a u m l n i i c c d t a i = t o e n ' f = s o i r f t c a e e l m - s a s e p t ; ( a ) t : i c M ' e ; t a d a t a R o u t e . S i t e m a p { 2. 統一されたページレイアウト < P / a b t d < P g r i e Y a e e t s o g L a l c u e a d e r r L y c = i C a o r { p o y u u t t n o t m ( i t u b ' o e t I t n n > t i = t e t { m l t s e ( = ' ' { ) d b } e r s e c a r d i c p r t u i m o b n I ' t ) e } m s } 3. 環境変数による設定 # N N E E . X X e T T n _ _ v P P . U U e B B x L L a I I m C C p _ _ l S B e I A T S E E _ _ U P R A L T = H h = t t p : / / l o c a l h o s t : 3 0 0 0 使い方 インストール g c n i d p t m n c e i l x n o t s n j t e s a - l [ i l r 1 e 8 p n o - s t i h t e o m r e y s - - u s r s l g ] - t e m p l a t e 開発 n p m r u n d e v ビルド n p m r u n b u i l d カスタマイズポイント 言語追加 : src/i18n/routing.tsとmessages/ディレクトリ ページ追加 : src/app/[locale]/配下に新規ディレクトリ テーマカスタマイズ : tailwind.config.jsとグローバルCSS メタデータ : 各ページのgenerateMetadata関数 ベストプラクティス コンポーネント命名 : PascalCaseを使用 翻訳キー : ネストした構造で整理 型安全性 : TypeScriptの型を最大限活用 パフォーマンス : 静的生成を活用したキャッシュ戦略 まとめ 国際化対応とダークモード機能を標準装備し、SEOに最適化された静的サイトを素早く構築できるよう目指しています。開発者の生産性を向上させながら、エンドユーザーに優れた体験を提供していきたいと思います。
...