​
Internationalization

The internationalization package provides comprehensive multi-language support for Next.js applications in the project. It combines multiple internationalization libraries to deliver a complete solution for creating multilingual applications.

​
Key Features

Multiple Locale Support

Support for English, Turkish, Spanish, and German with an easy way to add more languages

Automatic Locale Detection

Detects user’s preferred language from browser settings

URL-based Locale Switching

Supports locale prefixes in URLs (e.g., /en/about, /tr/about)

Server and Client Components

Works seamlessly with both server and client components

Type-Safe Translations

Provides TypeScript types for translations

Fallback Mechanism

Falls back to English when translations are missing

​
Architecture

The internationalization package uses a combination of:

​
Getting Started

To use the internationalization package in your application:

# Add the package to your application's dependencies
npm install @repo/internationalization

Then, set up the middleware in your application:

// middleware.ts
import { internationalizationMiddleware } from '@repo/internationalization/middleware';
import { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return internationalizationMiddleware(request);
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

​
Basic Usage

​
In Server Components

import { getDictionary } from '@repo/internationalization';

export default async function Page({ params }: { params: { locale: string } }) {
  const dictionary = await getDictionary(params.locale);
  
  return (
    <div>
      <h1>{dictionary.web.header.home}</h1>
      <p>{dictionary.web.home.meta.description}</p>
    </div>
  );
}

​
In Client Components

'use client';

import { useTranslation } from '@repo/internationalization/useTranslation';

export default function ClientComponent() {
  const { t } = useTranslation('web');
  
  return (
    <div>
      <h1>{t('header.home')}</h1>
      <p>{t('header.product.description')}</p>
    </div>
  );
}

​
Next Steps

Setup Guide

Learn how to set up internationalization in your application

Server Components

Working with translations in server components

Client Components

Working with translations in client components

Adding New Languages

How to add support for new languages