Internationalization (i18n)

Internationalization (i18n)

Expanding your application to a global audience is a core feature of the Next.js Boilerplate. By integrating next-intl, the boilerplate provides a robust, type-safe framework for multi-language support that works seamlessly with the Next.js App Router. This allows you to deliver a localized experience that improves user engagement and broadens your market reach.

Seamless Global Navigation

The boilerplate utilizes localized routing, meaning your URLs automatically reflect the user's language preference (e.g., /en/dashboard vs. /fr/dashboard).

• Automatic Locale Detection: The system can intelligently route users based on their preferred language.
• Dynamic Path Handling: Use the getI18nPath utility to ensure internal links always preserve the current locale, preventing users from accidentally switching languages while navigating.

Localized SEO and Metadata

Maximize your global search engine visibility with built-in support for localized metadata. Each page uses the generateMetadata function to fetch translated titles and descriptions, ensuring that your site looks professional and ranks well in every language you support.

export async function generateMetadata(props: { params: Promise<{ locale: string }> }) {
  const { locale } = await props.params;
  const t = await getTranslations({ locale, namespace: 'Index' });

  return {
    title: t('meta_title'),
    description: t('meta_description'),
  };
}

Multilingual Authentication with Clerk

User experience remains consistent even during sensitive flows like authentication. The boilerplate pre-configures Clerk to match the application's locale. When a user switches to French, the sign-in, sign-up, and profile management components automatically transition to French, providing a frictionless experience.

Localization for Clerk is managed centrally in src/utils/AppConfig.ts, allowing you to map application locales to Clerk’s localization packages effortlessly.

Professional Translation Workflow with Crowdin

To streamline the translation process, the boilerplate is designed to work with Crowdin, a leading Translation Management System (TMS).

• Collaborative Editing: Allow translators to work on your JSON translation files without touching the code.
• Consistency: Ensure terminology is consistent across your entire application.
• Automation: Easily sync your translation keys between your development environment and the Crowdin platform.

Quick Configuration

Managing your supported languages is handled in a single configuration file. Whether you are launching in two languages or twenty, you can update your localization strategy in seconds via AppConfig.ts.

export const AppConfig = {
  name: 'Nextjs Starter',
  locales: ['en', 'fr', 'es'], // Easily add new languages here
  defaultLocale: 'en',
  localePrefix: 'as-needed',
};

Key Benefits

• User Retention: Users are more likely to convert when interacting with a product in their native language.
• Type Safety: Leveraging TypeScript ensures that you never miss a translation key during development.
• Developer Experience: Pre-configured middleware handles the heavy lifting of locale detection and redirection, so you can focus on building features.