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

  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