Internationalization

Overview

NextReady uses next-intl to provide a comprehensive internationalization solution for your SaaS application. The system is built to support multiple languages with minimal configuration, allowing you to reach a global audience.

Supported Languages

NextReady supports the following languages out of the box:

Adding More Languages

You can easily add more languages by updating the configuration files in src/i18n.ts and adding translation files for the new language.

Internationalized Routing

NextReady uses Next.js App Router with internationalized routing based on URL subpaths.

Routing Configuration

The routing configuration is set up in the middleware.ts file to handle locale detection and routing.

App Directory Structure

The app directory structure follows the Next.js App Router conventions with the locale parameter:

Locale Parameter

Each page component receives the locale parameter from the URL structure.

Managing Translations

Translations are stored in JSON files organized by language and namespace.

Translation Files

Translation files are located in the messages directory, with one file per supported language.

Translation Structure

Each translation file contains namespaced translations for different parts of your application.

Translation Components

NextReady provides components and hooks to use translations in your application.

Server Components

For server components, use the getTranslations function from next-intl/server.

Client Components

For client components, use the useTranslations hook from next-intl.

Date and Number Formatting

NextReady provides utilities for formatting dates, times, and numbers according to the user's locale.

Date Formatting

Use the useFormatter hook to format dates and times according to the current locale.

Number Formatting

Use the useFormatter hook to format numbers, currencies, and percentages according to the current locale.

Language Switcher

NextReady includes a language switcher component that allows users to change the language of the application.

Language Switcher Component

The language switcher component is implemented in src/components/LanguageSwitcher.tsx.

Using the Language Switcher

Add the language switcher to your layout or navigation component for easy language switching.

SEO Considerations

NextReady is configured for optimal SEO with internationalized content.

HTML Lang Attribute

The html element's lang attribute is automatically set based on the current locale.

Alternate Language Links

Alternate language links are added in the document head for better SEO.

Translated Metadata

Metadata for each page is translated based on the current locale.