Next.js 15 Compatible Multilingual and Dark Mode SSG Template
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 { "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" } } Project Structure src/ ├── app/ │ ├── [locale]/ │ │ ├── layout.tsx # Root layout │ │ ├── page.tsx # Home page │ │ ├── about/ # About page │ │ └── example/ # Sample page │ ├── icon.svg # Favicon │ └── sitemap.ts # Sitemap generation ├── components/ │ ├── layout/ # Layout components │ │ ├── Header.tsx │ │ ├── Footer.tsx │ │ ├── PageLayout.tsx │ │ ├── ToggleTheme.tsx │ │ └── ToggleLanguage.tsx │ └── page/ # Page-specific components ├── i18n/ │ └── routing.ts # i18n configuration └── messages/ # Translation files ├── en.json └── ja.json Notable Implementations 1. Static Export Support for sitemap.ts export const dynamic = 'force-static'; export const revalidate = false; export default function sitemap(): MetadataRoute.Sitemap { // Implementation } 2. Unified Page Layout <PageLayout breadcrumbItems={breadcrumbItems} title={t('title')} description={t('description')} > <YourContent /> </PageLayout> 3. Configuration via Environment Variables # .env.example NEXT_PUBLIC_SITE_URL=http://localhost:3000 NEXT_PUBLIC_BASE_PATH= Usage Installation git clone [repository-url] cd nextjs-i18n-themes-ssg-template npm install Development npm run dev Build npm run build Customization Points Adding languages: src/i18n/routing.ts and messages/ directory Adding pages: Create new directories under src/app/[locale]/ Theme customization: tailwind.config.js and global CSS Metadata: generateMetadata function in each page Best Practices Component naming: Use PascalCase Translation keys: Organize with nested structure Type safety: Maximize use of TypeScript types 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.
...
July 26, 2025 · Updated: July 26, 2025 · 2 min · Nakamura
