This article was reviewed by a human for implementation and written by AI.

Overview

This template is a starting point for web application development that supports static site generation (SSG) with Next.js 15, with built-in multilingual support and dark mode. It combines TypeScript, Tailwind CSS, next-intl, and next-themes.

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

Key Features

1. Static Site Generation (SSG)

  • Full static export with output: 'export'
  • Fast page loading and SEO optimization
  • Reduced hosting costs

2. Internationalization (i18n)

  • Full multilingual support with next-intl
  • Japanese and English support (easy to add more languages)
  • URL-based language switching (/ja/about, /en/about)
  • Type-safe translation keys

3. Dark Mode

  • System-linked dark mode with next-themes
  • Automatic detection of user preferences
  • Smooth theme switching animation
  • Persistent settings via LocalStorage

4. Improved Developer Experience

  • Type safety with TypeScript
  • Efficient styling with Tailwind CSS
  • Code quality management with ESLint
  • Unified component structure

Tech Stack

{}"}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"

Project Structure

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#######sFSLxPiTRHASaiaa1roobavtyg8aomomieoennteupcmu-stloatscllpenppoaaapcentygapgocfioegaemiiouegnpfgnteeoiurncrfaeaitnctlitoieosmosnpnonents

Notable Implementations

1. Static Export Support for sitemap.ts

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

2. Unified Page Layout

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

3. Configuration via Environment Variables

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

Usage

Installation

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

Development

npmrundev

Build

npmrunbuild

Customization Points

  1. Adding languages: src/i18n/routing.ts and messages/ directory
  2. Adding pages: Create new directories under src/app/[locale]/
  3. Theme customization: tailwind.config.js and global CSS
  4. Metadata: generateMetadata function in each page

Best Practices

  1. Component naming: Use PascalCase
  2. Translation keys: Organize with nested structure
  3. Type safety: Maximize use of TypeScript types
  4. Performance: Cache strategy utilizing static generation

Summary

This template aims to enable quick construction of static sites optimized for SEO, with built-in internationalization and dark mode features. The goal is to improve developer productivity while providing an excellent experience for end users.

Repository

GitHub - nextjs-i18n-themes-ssg-template

Tags

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