A production-ready Next.js starter template with built-in internationalization (i18n) support using next-intl and Sanity CMS integration. Perfect for building multilingual websites and applications with content management capabilities.
- Internationalization (i18n): Full multilingual support with next-intl
- Multiple Languages: Preconfigured with English, Spanish, and French
- Language Selector: User-friendly language switcher with persistent preferences
- Cookie-based Locale Storage: Seamless language selection across sessions
- Sanity CMS Ready: Structured for Sanity content management integration
- Next.js 16: Built on the latest Next.js App Router
- TypeScript: Full type safety throughout the project
- Tailwind CSS: Modern styling with Tailwind CSS v4
- Biome: Fast linting and formatting with Biome
- Dark Mode Support: Built-in dark mode styling
├── messages/ # Translation files
│ ├── en.json # English translations
│ ├── es.json # Spanish translations
│ └── fr.json # French translations
├── src/
│ ├── app/
│ │ ├── actions.ts # Server actions for locale management
│ │ ├── layout.tsx # Root layout with NextIntlClientProvider
│ │ └── page.tsx # Home page with translations
│ ├── components/
│ │ └── LanguageSelector.tsx # Language switcher component
│ └── i18n/
│ └── request.ts # next-intl configuration
└── next.config.ts # Next.js configuration with next-intl plugin
- Node.js 18.x or later
- pnpm (recommended), npm, or yarn
- Clone the repository:
git clone <repository-url>
cd multilingual- Install dependencies:
pnpm install- Run the development server:
pnpm dev- Open http://localhost:3000 in your browser.
- Create a new translation file in the
messages/directory (e.g.,de.jsonfor German):
{
"HomePage": {
"title": "Um zu beginnen, bearbeiten Sie die Datei page.tsx.",
"descriptionStart": "Suchen Sie nach einem Ausgangspunkt oder weiteren Anweisungen? Gehen Sie zu",
"templates": "Vorlagen",
"descriptionMiddle": "oder zum",
"learning": "Lernzentrum",
"descriptionEnd": ".",
"deployNow": "Jetzt Bereitstellen",
"documentation": "Dokumentation"
}
}- Add the language to the
LanguageSelectorcomponent insrc/components/LanguageSelector.tsx:
const languages = [
{ code: "en", name: "English", flag: "🇬🇧" },
{ code: "es", name: "Español", flag: "🇪🇸" },
{ code: "fr", name: "Français", flag: "🇫🇷" },
{ code: "de", name: "Deutsch", flag: "🇩🇪" }, // Add new language
];In Server Components:
import { getTranslations } from "next-intl/server";
export default async function Page() {
const t = await getTranslations("HomePage");
return <h1>{t("title")}</h1>;
}In Client Components:
"use client";
import { useTranslations } from "next-intl";
export default function Component() {
const t = useTranslations("HomePage");
return <h1>{t("title")}</h1>;
}# Check code quality
pnpm lint
# Format code
pnpm formatpnpm buildpnpm start- Next.js - React framework
- next-intl - Internationalization for Next.js
- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS - Utility-first CSS framework
- Biome - Fast linting and formatting
- Sanity - Headless CMS (ready for integration)
The easiest way to deploy this application is using the Vercel Platform:
This application can be deployed to any platform that supports Next.js:
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with create-next-app
- Internationalization powered by next-intl
- Fonts optimized with next/font