### Start Production Server

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Command to start the Next.js application in production mode.

```bash
next start
```

--------------------------------

### Start Development Server

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/README.md

Start the development server using pnpm. The application will be accessible at http://localhost:3000 and will automatically redirect to your preferred locale.

```bash
pnpm dev
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/README.md

Clone the boilerplate repository and install its dependencies using pnpm, npm, or yarn.

```bash
git clone https://github.com/AmuraDesign/Next.js-16-Next-Intl-Boilerplate
cd Next.js-16-Next-Intl-Boilerplate
pnpm install   # or npm install or yarn
```

--------------------------------

### Start Dev Server with Turbopack

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Command to start the development server using Turbopack for faster hot module replacement (HMR).

```bash
next dev --turbopack
```

--------------------------------

### Production Build Output (Next.js Start)

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

If using 'next start' without static export, the production build output resides in the '.next/' directory, similar to the development output but optimized for production.

```tree
.next/ 
├── server/ 
├── static/ 
└── ...
```

--------------------------------

### Example Message File Structure (JSON)

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/i18n-configuration.md

An example of a JSON file containing translation messages for a specific locale. It follows a namespace convention where top-level keys represent namespaces like 'HomePage', 'AboutPage', etc.

```json
{
  "HomePage": {
    "title": "Welcome!",
    "about": "Go to the about page",
    "themeDemo": {
      "title": "Theme Demonstration",
      "primaryColor": "Primary Color",
      "primaryDescription": "Uses the primary theme color",
      "secondaryColor": "Secondary Color",
      "secondaryDescription": "Uses the secondary theme color",
      "accentColor": "Accent Color",
      "accentDescription": "Uses the accent theme color",
      "primaryButton": "Primary Button",
      "secondaryButton": "Secondary Button",
      "accentButton": "Accent Button"
    },
    "meta": {
      "title": "Next.js 15 Next-Intl Boilerplate - Welcome",
      "description": "A modern, production-ready boilerplate...",
      "ogImageTitle": "Welcome to Next.js 15",
      "ogImageDescription": "A modern, production-ready boilerplate...",
      "ogImageBrand": "Next.js 15 Next-Intl Boilerplate"
    }
  },
  "AboutPage": {
    "title": "About Us",
    "content": "Welcome to our About page!",
    "meta": {
      "title": "About Us - Next.js 15 Next-Intl Boilerplate",
      "description": "Learn more about our company...",
      "ogTitle": "About Us - Next.js 15 Next-Intl Boilerplate",
      "ogImageTitle": "About Us",
      "ogImageDescription": "Learn more about our company...",
      "ogImageBrand": "Next.js 15 Next-Intl Boilerplate"
    }
  },
  "Header": {
    "navigation": {
      "home": "Home",
      "about": "About",
      "openMenu": "Open menu",
      "closeMenu": "Close menu"
    }
  },
  "NotFoundPage": {
    "title": "Page Not Found",
    "description": "Sorry, the page you requested could not be found.",
    "backToHome": "Back to Home"
  },
  "ThemeSelector": {
    "system": "System",
    "nord": "Nord",
    "sakura": "Sakura",
    "midnight": "Midnight",
    "earthy": "Earthy",
    "dark": "Dark",
    "changeTheme": "Change theme",
    "label": "Theme"
  },
  "LocaleSwitcher": {
    "changeLanguage": "Change language",
    "label": "Language"
  },
  "ErrorPage": {
    "title": "Something went wrong",
    "description": "An unexpected error occurred. Please try again.",
    "tryAgain": "Try again"
  }
}
```

--------------------------------

### JSON Translation Structure Example

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/README.md

This is an example of the JSON structure for translation files used by next-intl. Each locale file should contain a full namespace tree, and next-intl will warn if any keys are missing.

```json
{
  "HomePage": {
    "title": "Welcome!",
    "about": "Go to the about page",
    "themeDemo": { "...": "..." },
    "meta": {
      "title": "Page Title",
      "description": "Page description",
      "ogImageTitle": "OG Image Title",
      "ogImageDescription": "OG Image Description",
      "ogImageBrand": "Brand Name"
    }
  },
  "AboutPage": {
    "title": "About Us",
    "content": "...",
    "meta": { "...": "..." }
  },
  "Header": {
    "navigation": {
      "home": "Home",
      "about": "About",
      "openMenu": "Open menu",
      "closeMenu": "Close menu"
    }
  },
  "NotFoundPage": {
    "title": "Page Not Found",
    "description": "...",
    "backToHome": "Back to Home"
  },
  "ErrorPage": {
    "title": "Something went wrong",
    "description": "An unexpected error occurred. Please try again.",
    "tryAgain": "Try again"
  },
  "ThemeSelector": {
    "system": "System",
    "nord": "Nord",
    "sakura": "Sakura",
    "midnight": "Midnight",
    "earthy": "Earthy",
    "dark": "Dark",
    "changeTheme": "Change theme",
    "label": "Theme"
  },
  "LocaleSwitcher": {
    "changeLanguage": "Change language",
    "label": "Language"
  }
}
```

--------------------------------

### Vercel Environment Variable Configuration

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Example of setting NEXT_PUBLIC_SITE_URL in Vercel's dashboard for environment variable configuration.

```bash
NEXT_PUBLIC_SITE_URL = https://yourdomain.com
```

--------------------------------

### useTranslations Hook Usage Example

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Demonstrates how to use the useTranslations hook to get translations for a specific namespace, render rich text, check for key existence, and access the locale.

```typescript
const t = useTranslations('HomePage');
const title = t('title');
const rich = t.rich('content', { bold: (text) => <b>{text}</b> });
const exists = t.has('missingKey');
const locale = t.locale;
```

--------------------------------

### Using getMessages

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Example of how to use the `getMessages` function to load all translation messages for a given locale.

```typescript
const messages = await getMessages({ locale: 'en-US' });
// messages = { HomePage: {...}, Header: {...}, ... }
```

--------------------------------

### ESLint 9 Flat Configuration for Next.js

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Set up ESLint 9 using the flat configuration system. This example extends Next.js core web vitals rules and specifies files to ignore.

```javascript
import nextConfig from 'eslint-config-next/core-web-vitals';

const config = [
  ...nextConfig,
  { ignores: ['docs/**', '.next/**', 'out/**', 'build/**', 'next-env.d.ts'] }
];

export default config;
```

--------------------------------

### Public Environment Variable Example

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

NEXT_PUBLIC_SITE_URL is a public variable, exposed to the browser. It's compiled at build time and suitable for URLs or public keys.

```bash
NEXT_PUBLIC_SITE_URL=https://example.com
```

--------------------------------

### Import using Path Alias

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Example of using the '@/*' path alias for cleaner imports in TypeScript files.

```typescript
import { Link } from '@/i18n/routing';
import Header from '@/components/globals/header/Header';
```

--------------------------------

### Using getTranslations

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Example of how to use the `getTranslations` function to fetch translations and translate a key. Note that the translation function itself returns a Promise.

```typescript
const t = await getTranslations({ locale: 'en-US', namespace: 'HomePage' });
const title = await t('title'); // Note: in latest versions, t returns Promise
```

--------------------------------

### Secret Environment Variable Example

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Server-only variables like DATABASE_PASSWORD or API_KEY are not exposed to the browser and should be used for sensitive information.

```bash
DATABASE_PASSWORD=secret
API_KEY=sk_live_...
```

--------------------------------

### Basic Next.js Configuration with next-intl

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

This snippet shows the basic setup for integrating next-intl into a Next.js project. It wraps the core Next.js configuration with the next-intl plugin, enabling server-side message loading.

```typescript
import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);
```

--------------------------------

### Import using Relative Path

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Example demonstrating the longer, less maintainable relative path imports that path aliases help to avoid.

```typescript
import { Link } from '../../i18n/routing';
import Header from '../../components/globals/header/Header';
```

--------------------------------

### Locale-Aware Rendering Flow

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/README.md

Illustrates the request flow for locale-aware rendering, starting from request detection to final HTML output.

```text
Request → proxy.ts (detect locale) → [locale]/layout.tsx (validate) 
→ setRequestLocale() → getMessages() → NextIntlClientProvider 
→ Page Component → useTranslations() → HTML
```

--------------------------------

### Rendered Sitemap XML with hreflang

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/seo-and-metadata.md

Example of the XML sitemap output, including `<xhtml:link>` elements for hreflang alternates for each URL.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-07-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/"/>
    <xhtml:link rel="alternate" hreflang="de-DE" href="https://example.com/de-DE/"/>
    <!-- ... other locales -->
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/"/>
  </url>
  <url>
    <loc>https://example.com/en-US/about</loc>
    <lastmod>2026-07-01</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://example.com/en-US/about"/>
    <xhtml:link rel="alternate" hreflang="de-DE" href="https://example.com/de-DE/ueber-uns"/>
    <!-- ... other locales -->
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en-US/about"/>
  </url>
</urlset>
```

--------------------------------

### Usage of MetadataRoute.Sitemap

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Example of how to export a sitemap function in `sitemap.ts` to generate a list of sitemap entries. Supports multiple languages.

```typescript
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com/',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
      alternates: {
        languages: {
          'en-US': 'https://example.com/',
          'de-DE': 'https://example.com/de-DE/',
          // ... all locales
          'x-default': 'https://example.com/'
        }
      }
    }
  ];
}
```

--------------------------------

### Header Component with LocaleSwitcher

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/api-reference/components.md

Example of how to integrate the LocaleSwitcher component within a main Header component. Ensure the LocaleSwitcher is imported correctly.

```typescript
import LocaleSwitcher from '@/components/globals/header/LocaleSwitcher';

export default function Header() {
  return (
    <header>
      <LocaleSwitcher />
    </header>
  );
}
```

--------------------------------

### useLocale Hook Usage Example

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Shows how to use the useLocale hook to retrieve the current locale and safely cast it to the Locale type.

```typescript
const locale = useLocale() as Locale;
```

--------------------------------

### Exported API Reference

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/MANIFEST.txt

This section details all exported functions and components, including their signatures, parameters, return types, and usage examples.

```APIDOC
## API Reference

This section provides details on all exported functions and components.

### Functions

All exported function signatures, including parameters and return types, are documented here.

### Components

All exported components, including their props and usage examples, are documented here.

### Configuration Options

All configuration options with explanations are documented here.

### Type Definitions

Type definitions for all public APIs are provided in `types.md`.
```

--------------------------------

### Metadata Configuration for Open Graph Image

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/seo-and-metadata.md

Example of how Next.js automatically picks up the dynamically generated Open Graph image within the generateMetadata function.

```typescript
// In generateMetadata(), OG image is auto-detected:
return {
  openGraph: {
    title: '...',
    description: '...',
    url: '...',
    // og:image is auto-loaded from opengraph-image.tsx
    // URL is resolved via metadataBase
  }
};
```

--------------------------------

### Add New Route to Pathnames Configuration

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/i18n-configuration.md

Example demonstrating how to add a new route ('/contact') to the pathnames configuration, mapping it to locale-specific URLs. This follows the structure defined in the routing configuration.

```typescript
pathnames: {
  '/': { /* ... */ },
  '/about': { /* ... */ },
  '/contact': {
    'de-DE': '/kontakt',
    'de-CH': '/kontakt',
    'de-AT': '/kontakt',
    'en-US': '/contact',
    'en-GB': '/contact',
    'es-ES': '/contacto',
    'tr-TR': '/iletisim',
    'sq-AL': '/kontakt',
    'it-IT': '/contatti',
    'fr-FR': '/contact',
    'hr-HR': '/kontakt',
    'bs-BA': '/kontakt',
    'ar-SA': '/اتصل'
  }
}
```

--------------------------------

### Generate Metadata for a Next.js Page

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Example of implementing the `generateMetadata` function to dynamically set metadata based on locale and translations. It configures title, description, canonical URLs, languages, Open Graph, and Twitter card details.

```typescript
export async function generateMetadata({
  params
}: { 
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'PageName' });

  return {
    title: t('meta.title'),
    description: t('meta.description'),
    alternates: {
      canonical: getPathname({ locale, href: '/' }),
      languages: {
        'en-US': 'https://example.com/',
        'de-DE': 'https://example.com/de-DE/',
        // ... all locales
      }
    },
    openGraph: {
      title: t('meta.title'),
      description: t('meta.description'),
      url: getPathname({ locale, href: '/' }),
      locale,
      type: 'website'
    },
    twitter: {
      card: 'summary_large_image',
      title: t('meta.title'),
      description: t('meta.description')
    }
  };
}
```

--------------------------------

### Configuration

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/README.md

Overview of project configuration files and environment variables.

```APIDOC
## Configuration

### Description
This section details the project's configuration files and environment variables. It covers Next.js configuration (`next.config.ts`), TypeScript configuration (`tsconfig.json`), PostCSS configuration (`postcss.config.mjs`), ESLint configuration (`eslint.config.mjs`), and environment variables such as `NEXT_PUBLIC_SITE_URL`.

### Configuration Files
- `next.config.ts`
- `tsconfig.json`
- `postcss.config.mjs`
- `eslint.config.mjs`

### Environment Variables
- `NEXT_PUBLIC_SITE_URL`
- Other relevant environment variables.
```

--------------------------------

### Available Development Scripts

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/README.md

A list of common scripts for development, building, and linting the project. Use these commands to manage the development lifecycle.

```bash
pnpm dev          # Start development server with Turbopack
pnpm build        # Build for production (sitemap & robots emitted natively)
pnpm start        # Start production server
pnpm lint         # Run ESLint (flat config)
pnpm lint:fix     # Fix ESLint errors automatically
pnpm type-check   # Run TypeScript type checking
```

--------------------------------

### Run Pre-build Script

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Executes a script before the build process, typically used for tasks like displaying a banner.

```bash
node scripts/banner.mjs
```

--------------------------------

### Get Current External State

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/styling-and-theming.md

Retrieves the current state value from localStorage. If no value is found, it defaults to 'system'. This function is used by `useSyncExternalStore` to get the latest state.

```typescript
function getSnapshot(): ThemeKey {
  return (localStorage.getItem(STORAGE_KEY) as ThemeKey) || 'system';
}
```

--------------------------------

### Local Development Environment Variable

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Configuration for local development using a .env.local file, setting NEXT_PUBLIC_SITE_URL to the development server address.

```bash
NEXT_PUBLIC_SITE_URL=http://localhost:3000
```

--------------------------------

### Build for Production

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Command to build the Next.js application for production deployment.

```bash
next build
```

--------------------------------

### Rendered hreflang HTML

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/seo-and-metadata.md

Example of how hreflang links are rendered in the HTML head based on the `alternates.languages` map.

```html
<link rel="alternate" hreflang="en-US" href="https://example.com/en-US/page">
<link rel="alternate" hreflang="de-DE" href="https://example.com/de-DE/ueber-us">
<!-- ... all other locales -->
<link rel="alternate" hreflang="x-default" href="https://example.com/en-US/page">
```

--------------------------------

### Static Generation Process

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/README.md

Details the steps involved in static generation for each locale, including metadata generation and page rendering.

```text
generateStaticParams() → For each locale:
  generateMetadata() → SEO metadata + hreflang
  Page render → Static HTML (no server call)
  
Output: 13 HTML files (one per locale)
```

--------------------------------

### Using setRequestLocale

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Example demonstrating how to use `setRequestLocale` within a page component to set the request's locale.

```typescript
export default function Page({ params: { locale } }) {
  setRequestLocale(locale);
  // ...
}
```

--------------------------------

### Usage of MetadataRoute.Robots

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Example of how to export a robots function in `robots.ts` to configure access rules and sitemap location for web crawlers.

```typescript
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*', 
      allow: '/'
    },
    sitemap: 'https://example.com/sitemap.xml'
  };
}
```

--------------------------------

### Styling and Theming

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/README.md

Information on styling with Tailwind CSS, global styles, color tokens, and the pre-configured theme system.

```APIDOC
## Styling and Theming

### Description
This section details the styling and theming system. It covers Tailwind CSS setup, global styles, color tokens, 6 pre-configured themes (system, nord, sakura, midnight, earthy, dark), theme CSS rules, system theme detection, hydration-safe state management with `useSyncExternalStore`, responsive design patterns, light/dark mode favicons, and adding custom themes.

### Styling Setup
- Tailwind CSS 4 setup with `@tailwindcss/postcss`.
- Global styles and color tokens.

### Theming
- 6 pre-configured themes.
- System theme detection.
- Hydration-safe state with `useSyncExternalStore`.
- Adding custom themes.
```

--------------------------------

### Development Build Output

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

During development, the 'next dev' command generates a '.next/' directory containing server code, static assets, and build manifests necessary for the development server.

```tree
.next/ 
├── server/ 
├── static/ 
├── app-build-manifest.json 
└── ...
```

--------------------------------

### PostCSS Configuration for Tailwind CSS

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/README.md

Configure PostCSS to use Tailwind CSS. This setup is necessary for utility-first CSS in the project.

```javascript
const config = { plugins: { "@tailwindcss/postcss": {} } };
export default config;
```

--------------------------------

### API Reference: Components

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/MANIFEST.txt

UI component documentation for the boilerplate, including Header, Navigation, MobileMenu, LocaleSwitcher, and ThemeSelector.

```APIDOC
## API Reference: Components

### Description
Documentation for the UI components used in the boilerplate. This section covers components like `Header` (sticky, responsive), `Navigation` (desktop navigation), `MobileMenu` (hamburger menu), `LocaleSwitcher` (language dropdown with persistence), and `ThemeSelector` (theme dropdown with `useSyncExternalStore`). It details their props, signatures, styling, and responsive behavior.

### Components

#### `api-reference/components.md`
This file provides detailed documentation for each UI component.

- **Header component**: Features sticky and responsive design.
- **Navigation component**: For desktop navigation.
- **MobileMenu component**: Implements a hamburger menu.
- **LocaleSwitcher component**: A language dropdown that persists the selected locale.
- **ThemeSelector component**: A theme dropdown utilizing `useSyncExternalStore` for hydration safety.
- **Props, Signatures, Styling, Responsive Behavior**: Comprehensive details for each component.
```

--------------------------------

### Theme State Management with useSyncExternalStore

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/api-reference/components.md

Implements theme state management using `useSyncExternalStore` for hydration safety and cross-tab synchronization. It subscribes to `storage` events and retrieves the current theme from `localStorage`.

```typescript
function subscribe(onChange: () => void) {
  // Listen to storage changes across browser tabs
  window.addEventListener('storage', onStorage);
  return () => window.removeEventListener('storage', onStorage);
}

function getSnapshot(): ThemeKey {
  return (localStorage.getItem('theme') as ThemeKey) || 'system';
}

function getServerSnapshot(): ThemeKey | null {
  return null; // No value during SSR to avoid hydration mismatch
}

const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
```

--------------------------------

### Production Build Output (Static Export)

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

When using static export, the build output is placed in the 'out/' directory, containing locale-specific HTML files, sitemaps, and robots.txt.

```tree
out/ 
├── [locale]/ 
│   ├── index.html 
│   ├── about/ 
│   │   └── index.html 
│   └── ... 
├── sitemap.xml 
├── robots.txt 
└── ...
```

--------------------------------

### Header Component Usage

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/api-reference/components.md

Demonstrates how to import and use the Header component within a root layout. Ensure sufficient padding on the main content to avoid overlap with the sticky header.

```typescript
import Header from '@/components/globals/header/Header';

export default function Layout() {
  return (
    <div>
      <Header />
      <main className="pt-24"> {/* Page content */}
      </main>
    </div>
  );
}
```

--------------------------------

### SEO and Metadata

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/README.md

Guidance on SEO best practices, including metadata generation, sitemap, robots.txt, Open Graph images, and structured data.

```APIDOC
## SEO and Metadata

### Description
This section outlines SEO best practices and metadata configuration. It covers metadata base configuration, per-page metadata generation with hreflang, sitemap generation (`sitemap.ts`), robots.txt generation (`robots.ts`), Open Graph dynamic images, JSON-LD structured data, favicon and theme color configuration, environment variables, and an SEO checklist.

### Key Features
- Metadata base configuration.
- Per-page metadata with hreflang.
- Sitemap generation (`sitemap.ts`).
- Robots.txt generation (`robots.txt`).
- Open Graph dynamic images.
- JSON-LD structured data.
```

--------------------------------

### Optional Environment Variables for Next.js

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Includes variables for Node.js environment, custom logging/debugging, and analytics/monitoring services. These are optional and depend on project needs.

```bash
# Next.js environment
NODE_ENV=production|development

# Logging/debugging (custom code)
DEBUG=*              # If using debug() package
LOG_LEVEL=info|warn|error

# Analytics/monitoring (custom)
SENTRY_DSN=...       # Error tracking
GTAG_ID=...          # Google Analytics
```

--------------------------------

### PostCSS Configuration with Tailwind CSS

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Configure PostCSS plugins, specifically for Tailwind CSS, in a JavaScript module. This setup processes CSS at build time.

```javascript
const config = {
  plugins: {
    "@tailwindcss/postcss": {}
  }
};

export default config;
```

--------------------------------

### Define Global Styles with Tailwind Directives and CSS Variables

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/styling-and-theming.md

Imports Tailwind CSS and defines global color and font tokens using the `@theme` directive. These tokens are then available as Tailwind utility classes.

```css
@import "tailwindcss";

@theme {
  --color-background: #fafafa;
  --color-foreground: #000;
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --color-accent: #f59e0b;
  --color-muted: #e5e7eb;
  --color-border: #d1d5db;
}

@theme {
  --font-sans: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-geist-mono), Menlo, monospace;
}
```

--------------------------------

### Get Server Snapshot for SSR

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/styling-and-theming.md

Provides the snapshot value during Server-Side Rendering (SSR). Returning `null` ensures that the component does not render with a theme on the server, preventing hydration mismatches.

```typescript
function getServerSnapshot(): ThemeKey | null {
  return null; // No value during SSR
}
```

--------------------------------

### Project Structure

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

The root directory contains configuration files and top-level directories for source code, messages, and public assets. The 'src/app' directory holds locale-specific routes and core application files, while 'src/i18n' manages internationalization routing and message loading.

```tree
. 
├── src/ 
│   ├── app/ 
│   │   ├── [locale] 
│   │   ├── fonts/ 
│   │   ├── globals.css 
│   │   ├── layout.tsx 
│   │   ├── sitemap.ts 
│   │   ├── robots.ts 
│   │   └── global-error.tsx 
│   ├── i18n/ 
│   │   ├── routing.ts 
│   │   └── request.ts 
│   ├── components/ 
│   │   └── globals/ 
│   │       └── header/ 
│   └── proxy.ts 
├── messages/ 
│   ├── en-US.json 
│   ├── de-DE.json 
│   └── ... (13 locales total) 
├── public/ 
│   └── icon/ 
├── .env.local 
├── next.config.ts 
├── tsconfig.json 
├── postcss.config.mjs 
├── eslint.config.mjs 
├── package.json 
└── README.md
```

--------------------------------

### Dynamic Open Graph Image Generation

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/seo-and-metadata.md

Generates dynamic Open Graph images using Next.js ImageResponse API. This example shows how to fetch translations for localized image content.

```typescript
import { ImageResponse } from 'next/og';
import { getTranslations, setRequestLocale } from 'next-intl/server';

export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function OGImage({
  params
}: { 
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale); // Enable static rendering
  
  const t = await getTranslations({ locale, namespace: 'HomePage' });

  return new ImageResponse(
    (
      <div style={{ 
        fontSize: 128,
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontWeight: 'bold'
      }}>
        <div>{t('meta.ogImageTitle')}</div>
        <div style={{ fontSize: 48 }}>{t('meta.ogImageDescription')}</div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}
```

--------------------------------

### Set Metadata Base and Defaults

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/seo-and-metadata.md

Configures the base URL for relative metadata links and sets default title, description, manifest, and icons. Supports theme-aware favicons and viewport settings.

```typescript
export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'),
  title: {
    default: 'Next-Intl Boilerplate',
    template: '%s · Next-Intl Boilerplate'
  },
  description: 'Next-Intl Boilerplate',
  manifest: '/icon/site.webmanifest',
  applicationName: 'Next-Intl Boilerplate',
  icons: [
    {
      url: '/icon/icon-96x96.png',
      media: '(prefers-color-scheme: light)',
      sizes: '96x96'
    },
    {
      url: '/icon/icon-96x96-dark.png',
      media: '(prefers-color-scheme: dark)',
      sizes: '96x96'
    },
    {
      url: '/icon/favicon.ico'
    }
  ],
  apple: [
    {
      url: '/icon/apple-touch-icon.png'
    }
  ]
};

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  themeColor: [
    {
      media: '(prefers-color-scheme: light)',
      color: '#f7fafc'
    },
    {
      media: '(prefers-color-scheme: dark)',
      color: '#18181b'
    }
  ]
};
```

--------------------------------

### Type-Safe Locale Usage Example

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/types.md

Demonstrates how to use the `Locale` type for type-safe locale handling within a component. It shows how type checking prevents the use of invalid locale codes.

```typescript
import { type Locale, routing } from '@/i18n/routing';

function MyComponent({ locale }: { locale: Locale }) {
  // Type-safe: locale is guaranteed to be valid
  const currentLocale = useLocale() as Locale; // Cast for type safety
  
  if (locale === 'de-DE') {
    // ...
  }
}

// Type checking catches invalid locales:
const invalid: Locale = 'xyz-XYZ'; // ❌ Type error
const valid: Locale = 'en-US';     // ✅ OK
```

--------------------------------

### Static Rendering Configuration with next-intl

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/i18n-configuration.md

Configures static rendering for i18n by pre-generating HTML per locale at build time. This involves implementing `generateStaticParams`, setting `dynamic = 'auto'`, calling `setRequestLocale` in layouts/pages, and using `getTranslations` in `generateMetadata`.

```typescript
// 1. Pre-generate one HTML per locale at build time
export async function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }));
}

// 2. Opt into static rendering
export const dynamic = 'auto';

// 3. Call setRequestLocale() in layout and pages
export default function Layout({ params: { locale } }) {
  setRequestLocale(locale);
  // ... render
}

// 4. Use getTranslations() in generateMetadata()
export async function generateMetadata({ params }) {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: 'PageName' });
  return { title: t('meta.title') };
}
```

--------------------------------

### Responsive Grid Layout

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/styling-and-theming.md

Define a responsive grid layout that changes the number of columns based on screen size. Starts with a single column on mobile and expands to multiple columns on larger screens.

```typescript
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

```

--------------------------------

### Translation Message Structure (en-US.json)

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/PROJECT_OVERVIEW.md

Example JSON structure for translation messages in English (US). All locale files must adhere to this schema, with keys present across all locales to avoid warnings.

```json
{
  "HomePage": {
    "title": "...",
    "meta": { "title": "...", "description": "...", "ogImageTitle": "..." }
  },
  "AboutPage": {
    "title": "...",
    "meta": { "..." }
  },
  "Header": {
    "navigation": { "home": "...", "about": "...", "openMenu": "...", "closeMenu": "..." }
  },
  "LocaleSwitcher": { "changeLanguage": "...", "label": "..." },
  "ThemeSelector": { "system": "...", "nord": "...", "dark": "...", "label": "...", "changeTheme": "..." },
  "NotFoundPage": { "title": "...", "description": "...", "backToHome": "..." },
  "ErrorPage": { "title": "...", "description": "...", "tryAgain": "..." }
}
```

--------------------------------

### Required Production Environment Variable

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

NEXT_PUBLIC_SITE_URL is essential for production builds to ensure correct URLs in metadata, sitemaps, and robots.txt. Without it, production URLs may default to localhost.

```bash
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
```

--------------------------------

### API Reference: Routing

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/MANIFEST.txt

Documentation for i18n routing configuration and navigation helpers, including Link component, useRouter, and usePathname hooks.

```APIDOC
## API Reference: Routing

### Description
Provides documentation for i18n routing configuration and navigation helpers. This includes the `routing` object configuration, `Locale` type definition, `Link` component with its full signature, `useRouter()` hook, `usePathname()` hook, and `getPathname()` function. It also covers usage patterns for locale switching, hreflang, and sitemap generation.

### Endpoints

#### `api-reference/routing.md`
This file details the routing configuration and navigation utilities.

- **routing object configuration**: Defines the structure for i18n routing.
- **Locale type definition**: Specifies the type for locale identifiers.
- **Link component**: A component for creating localized links with a full signature provided.
- **useRouter() hook**: Hook for accessing router information.
- **usePathname() hook**: Hook for getting the current pathname.
- **getPathname() function**: Utility function to retrieve the pathname.
- **Usage patterns**: Examples for locale switching, hreflang implementation, and sitemap generation.
```

--------------------------------

### Extend RTL Support for More Languages

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/i18n-configuration.md

Extends RTL support to include Hebrew, Persian, and Urdu locales by checking if the locale code starts with 'ar', 'he', 'fa', or 'ur'. Ensure these locales are added to `routing.locales`.

```typescript
dir={
  ['ar', 'he', 'fa', 'ur'].some(lang => locale.startsWith(lang))
    ? 'rtl'
    : 'ltr'
}
```

```typescript
export const locales = [
  ...,
  'ar-SA',
  'he-IL',     // ← Hebrew (Israel)
  'fa-IR',     // ← Persian (Iran)
  'ur-PK'      // ← Urdu (Pakistan)
];
```

--------------------------------

### Available Themes Configuration

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/styling-and-theming.md

Defines the available themes with their keys, associated icons, and color classes. This array serves as the source of truth for theme options.

```typescript
const themes = [
  { key: 'system', icon: SunIcon, color: 'bg-gray-200 border-gray-400' },
  { key: 'nord', icon: GlobeAltIcon, color: 'bg-[#2e3440] border-[#88c0d0]' },
  { key: 'sakura', icon: SparklesIcon, color: 'bg-[#fff0f6] border-[#f472b6]' },
  { key: 'midnight', icon: FireIcon, color: 'bg-[#161622] border-[#7f5af0]' },
  { key: 'earthy', icon: PaintBrushIcon, color: 'bg-[#ede9dd] border-[#94734b]' },
  { key: 'dark', icon: MoonIcon, color: 'bg-[#18181b] border-[#2563eb]' }
] as const;
```

--------------------------------

### Extending Next.js Configuration with Experimental Features and Headers

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Demonstrates how to extend the Next.js configuration to enable experimental features and configure custom headers. This is useful for customizing application behavior and security.

```typescript
const nextConfig = {
  // Example: enable experimental features
  experimental: {
    // ...
  },
  
  // Example: configure headers
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Content-Type-Options', value: 'nosniff' }
        ]
      }
    ];
  }
};

export default withNextIntl(nextConfig);
```

--------------------------------

### Next.js Project Module Organization

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/PROJECT_OVERVIEW.md

Provides a hierarchical view of the project's directory structure, detailing the location and purpose of key modules and files.

```treeview
src/
├─ i18n/
│  ├─ routing.ts          [exported] locale config + navigation helpers
│  └─ request.ts          [exported] message loading per request
├─ app/
│  ├─ proxy.ts            [exported] middleware replacement for locale routing
│  ├─ global-error.tsx     Error boundary for root layout failures
│  ├─ sitemap.ts          [exported] native next.js sitemap route
│  ├─ robots.ts           [exported] native next.js robots route
│  ├─ globals.css         Tailwind @theme + [data-theme] color overrides
│  └─ [locale]/
│     ├─ layout.tsx       [exported] root for locale pages
│     ├─ page.tsx         [exported] home page
│     ├─ error.tsx        [exported] locale error boundary
│     ├─ not-found.tsx    [exported] 404 page
│     ├─ [...rest]/page.tsx  catch-all for unknown routes
│     ├─ opengraph-image.tsx  dynamic OG for home
│     └─ about/
│        ├─ page.tsx      [exported] about page
│        └─ opengraph-image.tsx  dynamic OG for about
├─ components/
│  └─ globals/
│     └─ header/
│        ├─ Header.tsx    [exported] main header
│        ├─ Navigation.tsx [exported] desktop nav
│        ├─ MobileMenu.tsx [exported] hamburger menu
│        ├─ LocaleSwitcher.tsx [exported] language dropdown
│        └─ ThemeSelector.tsx   [exported] theme dropdown
├─ fonts/
│  ├─ GeistVF.woff        Self-hosted sans-serif variable font
│  └─ GeistMonoVF.woff    Self-hosted monospace variable font
└─ messages/
   ├─ en-US.json          English (US) translations
   ├─ de-DE.json          German (Germany) translations
   ├─ ... (11 more locales)
   └─ ar-SA.json          Arabic (Saudi Arabia) translations
```

--------------------------------

### API Reference: Routing

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/README.md

Documentation for the `routing` object configuration, locale types, navigation helpers, and locale configuration.

```APIDOC
## API Reference: Routing

### Description
This section details the `routing` object configuration, including the `Locale` type definition, exported navigation helpers like `Link`, `useRouter()`, `usePathname()`, and `getPathname()`. It also covers locale configuration, including 13 locales, pathnames mapping, and usage patterns for locale switching and URL generation.

### Exported Navigation Helpers
- `Link`
- `useRouter()`
- `usePathname()`
- `getPathname()`

### Locale Configuration
- Supports 13 locales.
- Pathnames mapping for routing.
- Usage patterns for locale switching and URL generation.
```

--------------------------------

### Generate Static Params for Home Page

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/api-reference/pages.md

This function generates static parameters for the home page, returning one entry per locale to enable full static site generation at build time.

```typescript
export async function generateStaticParams(): Promise<{ locale: string }[]> {
  // Implementation details would go here
  return []; // Placeholder
}
```

--------------------------------

### Running ESLint Commands

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/configuration.md

Commands to run ESLint for checking and automatically fixing code issues.

```bash
pnpm lint

pnpm lint:fix
```

--------------------------------

### Components

Source: https://github.com/amuradesign/next.js-16-next-intl-boilerplate/blob/master/_autodocs/INDEX.md

Reusable UI components for the application, including header elements, navigation, and locale switchers.

```APIDOC
## Components

### Description
Reusable UI components for the application, including header elements, navigation, and locale switchers.

### Components List
- **`Header`** (Server Component): Main header component.
- **`Navigation`** (Server Component): Navigation menu component.
- **`MobileMenu`** (Client Component): Mobile navigation menu.
- **`LocaleSwitcher`** (Client Component): Component to switch between locales.
- **`ThemeSelector`** (Client Component): Component to select the application theme.

### Documentation
See [api-reference/components.md](api-reference/components.md) for complete component documentation.
```