Internationalization

Installation

Included by Default

Internationalization is included by default in every Tailar project. No installation is required.

When you initialize a new Tailar project with tailar init, internationalization support is automatically set up and ready to use.

Preview

Explore representative UI flows and snippets generated for this module (same previews as on the home page modules section).

Locale files live under messages/; routing uses next-intl (see i18n/).

messages/en.json

1
// messages/en.json (excerpt)
2
{
3
  "homePage": {
4
    "title": "My app",
5
    "description": "Localized SEO metadata"
6
  }
7
}

File Tree

The following files are installed when you add Internationalization:

File Structure

1
├─ i18n/
2
│  ├─ request.ts
3
│  └─ routing.ts
4
└─ messages/
5
   ├─ en.json
6
   ├─ es.json
7
   └─ fr.json

Usage

Once you've installed Internationalization, you can start using the following actions:

Adding Translations

Add translations to your message files. Structure your translations using namespaces for better organization. Here's an example structure:

messages/en.json

1
{
2
  "common": {
3
    "welcome": "Welcome",
4
    "hello": "Hello, {name}!",
5
    "save": "Save",
6
    "cancel": "Cancel"
7
  },
8
  "homePage": {
9
    "title": "Welcome to our App",
10
    "description": "Get started with our amazing features"
11
  },
12
  "navigation": {
13
    "home": "Home",
14
    "about": "About",
15
    "contact": "Contact"
16
  }
17
}

getTranslations

Server-side function to get translations in Server Components or API routes. Use this in async Server Components.

app/page.tsx

1
import { getTranslations } from 'next-intl/server'
2
 
3
export default async function Page() {
4
  const t = await getTranslations('common')
5
  
6
  return (
7
    <div>
8
      <h1>{t('welcome')}</h1>
9
      <p>{t('hello', { name: 'John' })}</p>
10
    </div>
11
  )
12
}

useTranslations

React hook to translate text in client components. Returns a function to get translated strings.

components/my-component.tsx

1
'use client'
2
 
3
import { useTranslations } from 'next-intl'
4
 
5
export function MyComponent() {
6
  const t = useTranslations('common')
7
  
8
  return (
9
    <div>
10
      <h1>{t('welcome')}</h1>
11
      <p>{t('hello', { name: 'John' })}</p>
12
      <button>{t('save')}</button>
13
    </div>
14
  )
15
}

Changing Locale

Change the language/locale using next-intl's navigation helpers. Import useRouter and usePathname from your i18n/routing file.

components/language-switcher.tsx

1
'use client'
2
 
3
import { useRouter, usePathname } from '@/i18n/routing'
4
 
5
export function LanguageSwitcher() {
6
  const router = useRouter()
7
  const pathname = usePathname()
8
  
9
  const switchLocale = (locale: string) => {
10
    router.replace(pathname, { locale })
11
  }
12
  
13
  return (
14
    <select onChange={(e) => switchLocale(e.target.value)}>
15
      <option value="en">English</option>
16
      <option value="es">Español</option>
17
      <option value="fr">Français</option>
18
    </select>
19
  )
20
}

Router-Based Translations

Set up router-based translations using Next.js middleware. This enables locale prefixes in your URLs (e.g., /en/about, /es/about). How it works: When a user visits /about, the middleware detects their preferred language and redirects to /en/about (or /es/about, etc.). Your app structure uses [locale] dynamic segments (e.g., app/[locale]/about/page.tsx) to handle different languages. The middleware automatically handles locale detection, redirects, and rewrites. Create a middleware.ts file in your project root (or src folder) to enable this feature.

middleware.ts

1
import createMiddleware from 'next-intl/middleware'
2
import { routing } from './i18n/routing'
3
 
4
export default createMiddleware(routing)
5
 
6
export const config = {
7
  // Match all pathnames except for
8
  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
9
  // - … the ones containing a dot (e.g. `favicon.ico`)
10
  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
11
}

References

For more information about Internationalization, check out these resources:

next-intl Documentation

Complete documentation for next-intl, including setup, translations, routing, middleware, and advanced features.

Visit documentation

next-intl Middleware Guide

Learn how to set up router-based translations with locale prefixes using Next.js middleware.

Visit documentation