When it comes to Laravel internationalization (i18n), a good built-in foundation is complemented by third-party packages. In this guide, we’ll use these features to localize a Laravel app, covering translations, localized routing, formatting, localizing models, and more.

🔗 Resource » Internationalization (i18n) and localization (l10n) allow us to make our apps available in different languages and regions, often for more profit. If you’re new to i18n and l10n, check out our guide to internationalization.

Our demo

Our starting point will be the fictional bookavel, a used bookstore app.

We won’t cover any e-commerce functionality here, since we want to focus on i18n.

Packages and versions used

We’ll use the following technologies and packages when building this app.

• PHP v8.3.10 — our programming language
• Laravel v11.21.0 — the framework for web artisans
• codezero/laravel-localized-routes v4.0.1 — allows us to localize our routes quickly
• kkomelin/laravel-translatable-string-exporter v1.22.0 — provides translation extraction from our code into message files
• tailwindcss v3.4.10 — for styling; largely optional for our purposes

🗒️ Note » We’ll cover the installation of laravel-localized-routes and laravel-translatable-string-exporter a bit later. All other packages are included with our starter app.

The starter app

Normally, we build demo apps from scratch in our tutorials. However, we have lots to cover here, so we’ll work from a pre-built starter for brevity. Here’s how to install the starter app:

🗒️ Heads up » You’ll need PHP 8+, Composer, and Node.js 20+ installed to continue.

1. Clone the GitHub repo and switch to the start branch (alternatively, download the ZIP of the start branch and unzip it)
2. If you’re using Laravel Herd, make sure to place the project directory inside your Herd directory
3. From the project root, run composer install
4. Run npm install
5. Duplicate the .env.example file and rename the copy to .env
6. Run php artisan key:generate
7. Run php artisan migrate --seed and select “Yes” when asked to create the SQLite database
8. Run php artisan serve to start the dev server (you don’t need to do this if you’re using Laravel Herd; just find the app under Sites and visit its URL)
9. In a separate terminal tab, run npm run dev to start Vite

🗒️ Note » If you’re using Laravel Sail with Docker, we’ve provided a docker-compose.yml file in the repo. However, Sail/Docker instructions are a bit outside the scope of this article.

If all goes well, you should see the demo app in all its glory when you visit the local URL.

The app is simple:

• A Book model is used by a BookController to expose a book index (under /books) and a single book show (under /books/{id}).
• The root route (/) exposes BookController@index, presenting the book listing above.
• An /about route shows a simple text view.

// routes/web.php

<?php

use App\Http\Controllers\BookController;
use Illuminate\Support\Facades\Route;

Route::get('/', [BookController::class, 'index'])->name('root');
Route::resource('books', BookController::class)->only('index', 'show');

Route::get('/about', fn () => view('about'))->name('about');

# .env

  APP_NAME=bookavel
  APP_ENV=local
  APP_KEY=yourappkeyliveshere
  APP_DEBUG=true
  APP_TIMEZONE=UTC
  APP_URL=http://localhost

- APP_LOCALE=en
+ APP_LOCALE=en_US
- APP_FALLBACK_LOCALE=en
+ APP_FALLBACK_LOCALE=en_US
  APP_FAKER_LOCALE=en

  APP_MAINTENANCE_DRIVER=file
  # APP_MAINTENANCE_STORE=database

  BCRYPT_ROUNDS=12

  # ...

.
└── lang
    ├── ar_EG
    │   └── # We'll place Arabic translation files here.
    └── en_US
        └── # We'll place English translation files here.

// lang/en_US/global.php

<?php

return [
  'app_name' => 'bookavel',
];

// lang/ar_EG/global.php

<?php

return [
  'app_name' => 'بوكاڤِل',
];

{{-- resources/views/components/layout/header.blade.php --}}

  <header class="...">
    <x-layout.logo />
    
    <p class="...">
      <a href="{{ route('root') }}">
-       bookavel
+       {{ __('global.app_name') }}
      </a>
    </p>

    <nav class="...">
      <!-- ... -->
    </nav>
  </header>

# .env

  # ...
  APP_TIMEZONE=UTC
  APP_URL=http://localhost

- APP_LOCALE=en_US
+ APP_LOCALE=ar_EG
  APP_FALLBACK_LOCALE=en_US
  APP_FAKER_LOCALE=en_US

  # ...

That’s basic string translation in a nutshell. We can use as many files as we want under our locale directories. Let’s add a couple for navigation links.

// lang/en_US/nav.php

<?php

return [
  'books' => 'Books',
  'about' => 'About us',
];

// lang/ar_EG/nav.php

<?php

return [
  'books' => 'الكتب',
  'about' => 'نبذة عنا',
];

{{-- resources/views/components/layout/header.blade.php --}}

  <header class="...">
    <x-layout.logo />
    
    <p class="...">
      <a href="{{ route('root') }}">
        {{ __('global.app_name') }}
      </a>
    </p>

    <nav class="...">
      <ul class="...">
        <li>
          <x-layout.nav-link :href="route('books.index')">
-           Books
+           @lang('nav.books')
          </x-layout.nav-link>
        </li>
        <li>
          <x-layout.nav-link :href="route('about')">
-           About us
+           @lang('nav.about')
          </x-layout.nav-link>
        </li>
      </ul>
    </nav>
  </header>

// lang/ar_EG/nav.php

  <?php

  return [
    'books' => 'الكتب',
-   'about' => 'نبذة عنا',
  ];

// lang/en_US/nav.php

  <?php

  return [
    'books' => 'Books',
-   'about' => 'About us',
  ];

{{-- resources/views/components/layout/header.blade.php --}}

  <header class="...">
    <x-layout.logo />
    
    <p class="...">
      <a href="{{ route('root') }}">
-       {{ __('global.app_name') }}
+       {{ __('bookavel') }}
      </a>
    </p>

    <nav class="...">
      <ul class="...">
        <li>
          <x-layout.nav-link :href="route('books.index')">
-           @lang('nav.books')
+           @lang('Books')
          </x-layout.nav-link>
        </li>
        <li>
          <x-layout.nav-link :href="route('about')">
-           @lang('nav.about')
+           @lang('About')
          </x-layout.nav-link>
        </li>
      </ul>
    </nav>
  </header>

// lang/ar_EG.json

{
  "bookavel": "بوكاڤِل",
  "Books": "الكتب",
  "About us": "نبذة عنا"
}

composer require kkomelin/laravel-translatable-string-exporter --dev

{{-- resources/views/books/index.blade.php --}}

  <x-layout.main title="Books">
    <h1 class="...">
-     Recently added   
+     {{ __('Recently added') }}
    </h1>

    <section class="...">
      @foreach ($books as $book)
        {{-- ... --}}
      @endforeach
    </section>
  </x-layout.main>

php artisan translatable:export ar_EG

 // lang/ar_EG.json
 
  {
+     "Recently added": "Recently added",
      "Books": "الكتب",
      "About us": "بذة عنا",
      "bookavel": "بوكاڤِل"
  }

 // lang/ar_EG.json
 
  {
-   "Recently added": "Recently added",
+   "Recently added": "الجديد عندنا",
    "Books": "الكتب",
    "About us": "بذة عنا",
    "bookavel": "بوكاڤِل"
 }

composer require codezero/laravel-localized-routes

php artisan vendor:publish --provider="CodeZero\LocalizedRoutes\LocalizedRoutesServiceProvider" --tag="config"

// config/localized-routes.php

  <?php

  return [

    /**
     * The locales you wish to support.
     */
-   'supported_locales' => [],
+   'supported_locales' => ['en_US', 'ar_EG'],
  
    /**
     * The fallback locale to use when generating a route URL
     * and the provided locale is not supported.
     */
-   'fallback_locale' => null,
+   'fallback_locale' => 'en_US',

    /**
     * If you have a main locale, and you want to omit
     * its slug from the URL, specify it here.
     */
    'omitted_locale' => null,

    /**
     * Set this option to true if you want to redirect URLs
     * without a locale slug to their localized version.
     * You need to register the fallback route for this to work.
     */
-   'redirect_to_localized_urls' => false,
+   'redirect_to_localized_urls' => true,
 
    'redirect_status_code' => 301,

    // ...

  ];

// bootstrap/app.php

  <?php

  use Illuminate\Foundation\Application;
  use Illuminate\Foundation\Configuration\Exceptions;
  use Illuminate\Foundation\Configuration\Middleware;

  return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
      web: __DIR__ . '/../routes/web.php',
      commands: __DIR__ . '/../routes/console.php',
      health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
+     $middleware->web(remove: [
+       \Illuminate\Routing\Middleware\SubstituteBindings::class,
+     ]);
+     $middleware->web(append: [
+       \CodeZero\LocalizedRoutes\Middleware\SetLocale::class,
+       \Illuminate\Routing\Middleware\SubstituteBindings::class,
+     ]);
    })
    ->withExceptions(function (Exceptions $exceptions) {
      //
    })->create();

// routes/web.php

  <?php

  use App\Http\Controllers\BookController;
+ use CodeZero\LocalizedRoutes\Controllers\FallbackController;
  use Illuminate\Support\Facades\Route;

+ Route::localized(function () {
    Route::get('/', [BookController::class, 'index'])->name('root');
    Route::resource('books', BookController::class)->only('index', 'show');

    Route::get('/about', fn () => view('about'))->name('about');
+ });

+ Route::fallback(FallbackController::class);

// routes/web.php

<?php

// ...

Route::localized(function () {
  // Explicit naming with `name()`
  Route::get('/', [BookController::class, 'index'])->name('root');

  // Implicit naming with `resource()` generates names:
  // `books.index` and `books.show`
  Route::resource('books', BookController::class)->only('index', 'show');

  Route::get('/about', fn () => view('about'))->name('about');
});

// ...

// config/localized-routes.php

<?php

return [

  // ...

  /**
   * The detectors to use to find a matching locale.
   * These will be executed in the order that they are added to the array!
   */
  'detectors' => [
    // required for scoped config
    CodeZero\LocalizedRoutes\Middleware\Detectors\RouteActionDetector::class, 
    // required
    CodeZero\LocalizedRoutes\Middleware\Detectors\UrlDetector::class, 
    // required for omitted locale
    CodeZero\LocalizedRoutes\Middleware\Detectors\OmittedLocaleDetector::class,
    
    CodeZero\LocalizedRoutes\Middleware\Detectors\UserDetector::class,
    CodeZero\LocalizedRoutes\Middleware\Detectors\SessionDetector::class,
    CodeZero\LocalizedRoutes\Middleware\Detectors\CookieDetector::class,
    CodeZero\LocalizedRoutes\Middleware\Detectors\BrowserDetector::class,
    
    // required
    CodeZero\LocalizedRoutes\Middleware\Detectors\AppDetector::class, 
  ],

  // ...

  /**
   * The stores to store the first matching locale in.
   */
   'stores' => [
      CodeZero\LocalizedRoutes\Middleware\Stores\SessionStore::class,
      CodeZero\LocalizedRoutes\Middleware\Stores\CookieStore::class,
      
      // required
      CodeZero\LocalizedRoutes\Middleware\Stores\AppStore::class,
   ],
];

// config/localized-routes.php

  <?php

  return [

    // ...

    /**
     * The detectors to use to find a matching locale.
     * These will be executed in the order that they are added to the array!
     */
    'detectors' => [
      // required for scoped config
      CodeZero\LocalizedRoutes\Middleware\Detectors\RouteActionDetector::class, 
      // required
      CodeZero\LocalizedRoutes\Middleware\Detectors\UrlDetector::class, 
-     // required for omitted locale
-     CodeZero\LocalizedRoutes\Middleware\Detectors\OmittedLocaleDetector::class,
    
-     CodeZero\LocalizedRoutes\Middleware\Detectors\UserDetector::class,
-     CodeZero\LocalizedRoutes\Middleware\Detectors\SessionDetector::class,
      CodeZero\LocalizedRoutes\Middleware\Detectors\CookieDetector::class,
      CodeZero\LocalizedRoutes\Middleware\Detectors\BrowserDetector::class,
    
      // required
      CodeZero\LocalizedRoutes\Middleware\Detectors\AppDetector::class, 
    ],

   // ...

    /**
     * The stores to store the first matching locale in.
     */
     'stores' => [
-       CodeZero\LocalizedRoutes\Middleware\Stores\SessionStore::class,
        CodeZero\LocalizedRoutes\Middleware\Stores\CookieStore::class,
      
        // required
        CodeZero\LocalizedRoutes\Middleware\Stores\AppStore::class,
     ],
  ];

composer require zonuexe/http-accept-language

// app/Http/Middleware/LocaleDetectors/AcceptLanguageDetector.php

<?php

namespace App\Http\Middleware\LocaleDetectors;

use CodeZero\LocalizedRoutes\Middleware\Detectors\Detector;
use Illuminate\Support\Arr;
use Teto\HTTP\AcceptLanguage;

class AcceptLanguageDetector implements Detector
{
  /**
   * Detect the locale.
   *
   * @return string|array|null
   */
  public function detect()
  {
    // Get locales from the Accept-Language header
    $accept_locales = AcceptLanguage::get();
    
    // Get the languages parts only
    $languages = array_unique(Arr::pluck(
      $accept_locales, 'language'));

    $supported_locales =
      config('localized-routes.supported_locales');

    foreach ($languages as $language) {
      foreach ($supported_locales as $locale) {
        if (str_starts_with(
          $locale,
          strtolower($language))) {
          return $locale;
        }
      }
    }

    return null;
  }
}

// config/localized-routes.php

  <?php

  return [

    // ...
 
    'detectors' => [
      CodeZero\LocalizedRoutes\Middleware\Detectors\RouteActionDetector::class, 
      CodeZero\LocalizedRoutes\Middleware\Detectors\UrlDetector::class, 
      CodeZero\LocalizedRoutes\Middleware\Detectors\CookieDetector::class,
-     CodeZero\LocalizedRoutes\Middleware\Detectors\BrowserDetector::class
+     App\Http\Middleware\LocaleDetectors\AcceptLanguageDetector::class,
      CodeZero\LocalizedRoutes\Middleware\Detectors\AppDetector::class,
    ],

    // ...
    ],

  ];

// config/i18n.php

<?php

return [
  'rtl_locales' => [
      'ar_EG',
  ],
];

// app/i18n-functions.php

<?php

function locale_dir() : string
{
  $rtl_locales = config('i18n.rtl_locales');
  $locale = app()->getLocale();

  return in_array($locale, $rtl_locales)
    ? "rtl"
    : "ltr";
}

// composer.json

{
  "name": "laravel/laravel",

  // ...

  "autoload": {
    "psr-4": {
      "App\\": "app/",
      "Database\\Factories\\": "database/factories/",
      "Database\\Seeders\\": "database/seeders/"
    },
+   "files": [
+     "app/i18n-functions.php"
+   ]
  },
  "autoload-dev": {
    "psr-4": {
      "Tests\\": "tests/"
    }
  },

  // ...
}

composer dumpautoload

//  resources/views/components/layout/main.blade.php

  <!DOCTYPE html>
  <html
    lang="{{ str_replace("_", "-", app()->getLocale()) }}"
+   dir="{{ locale_dir() }}"
  >
    <head>
      <!-- ... -->
    </head>

    <body class="...">
      <!-- ... -->
    </body>
  </html>

🔗 Resource » We often must ensure our CSS works in both directions, which we cover in CSS Localization.

How do I build a language switcher?

OK, let’s return to setting the active locale. We’re attempting to detect the user’s locale from their browser settings. However, the user should be able to override this selection manually. This is often achieved with a locale switcher UI. Let’s build ours.

First, let’s add an array to our i18n.php config file that lists our supported locale codes with human-readable text for each.

// config/i18n.php

 <?php

 return [
+  'supported_locales' => [
+    'en_US' => 'English',
+    'ar_EG' => 'العربية (Arabic)'
+  ],
   'rtl_locales' => [
       'ar_EG',
   ]
 ];

// resources/views/components/layout/locale-switcher.blade.php

<div {{ $attributes->merge(["class" => "relative"]) }}>
  <select
    class="..."
    autocomplete="off"
    onchange="window.location = this.options[this.selectedIndex].getAttribute('data-url')"
  >
    @foreach (config("i18n.supported_locales") as $locale => $name)
      <option
        value="{{ $locale }}"
        data-url="{{ Route::localizedUrl($locale) }}"
        {{ $locale == app()->getLocale() ? "selected" : "" }}
      >
        {{ $name }}
      </option>
    @endforeach
  </select>
  
  <div class="...">
    <x-layout.icon-chevron-down />
  </div>
</div>

// resources/views/books/index.blade.php

  <x-layout.main title="Books">
+   <p class="...">
+       {{
+         __("👋 Hey :username, :book_title just came in :)", [
+           "username" => "Nunu",
+           "book_title" => "A Brief of History of Time",
+         ])
+       }}
+   </p>

    <h1 class="...">{{ __("Recently added") }}</h1>
  
    <!-- ... -->  
  
  </x-layout.main>

php artisan translatable:export ar_EG

  {
    "About us": "بذة عنا",
    "bookavel": "بوكاڤِل",
    "Books": "الكتب",
    "Recently added": "الجديد عندنا",
+   "👋 Hey :username, :book_title just came in :)": "👋 أهلاً :username، لقد وصل للتو :book_title :)"
  }

// resources/views/books/index.blade.php

  <x-layout.main title="Books">
    <p class="...">
        {{ __("👋 Hey :username, :book_title just came in :)", ["username" => "Nunu", "book_title" => "A Brief of History of Time"]) }}
    </p>

    <h1 class="...">{{ __("Recently added") }}</h1>
+   <p>
+     {{ trans_choice("One book|:count books", $books->count()) }}
+   </p>
    
    <!-- ... -->
    
  </x-layout.main>

{{
    trans_choice(
      "{0} No books|{1} One book|[2,*] :count books",
      $books->count(),
    )
}}

php artisan vendor:publish --provider="KKomelin\TranslatableStringExporter\Providers\ExporterServiceProvider"

// config/laravel-translatable-string-exporter.php

  <?php
  return [
    'directories' => ['app', 'resources'],

    'excluded-directories' => [],

    'patterns' => [
      '*.php',
      '*.js',
    ],
  
    'allow-newlines' => false,

    'functions' => [
      '__',
      '_t',
      '@lang',
+     'trans_choice',
    ],

    'sort-keys' => true,
  
    // ...
  
  ];

php artisan translatable:export ar_EG

  {
    "About us": "بذة عنا",
    "bookavel": "بوكاڤِل",
    "Books": "الكتب",
    "Recently added": "الجديد عندنا",
+   "{0} No books|{1} One book|[2,*] :count books": "لا توجد كتب|كتاب واحد|كتابين|:count كتب|:count كتاب|:count كتاب",
    "👋 Hey :username, :book_title just came in :)": "👋 أهلاً :username، لقد وصل للتو :book_title :)"
  }

// In our views

{{ Number::format(1000) }}
// => '1,000'

{{ Number::currency(1234.56) }}
// => '$1,234.56'

// In our views

{{ Number::format(1000, locale: 'ar_EG') }}
// => '١٬٠٠٠'

{{ Number::currency(1234.56, locale: 'ar_EG') }}
// => '١٬٢٣٤٫٥٦ US$'

php artisan make:middleware FormatSetLocale

// app/Http/Middleware/FormatSetLocale.php

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Number;
use Symfony\Component\HttpFoundation\Response;

class FormatSetLocale
{
  public function handle(Request $request, Closure $next) : Response
  {
    // Set the locale to use for all number formatters
    // as the active locale.
    Number::useLocale(app()->getLocale());
    
    return $next($request);
  }
}

// bootstrap/app.php

  <?php

+ use App\Http\Middleware\FormatSetLocale;
  use Illuminate\Foundation\Application;
  use Illuminate\Foundation\Configuration\Exceptions;
  use Illuminate\Foundation\Configuration\Middleware;

  return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
      web: __DIR__ . '/../routes/web.php',
      commands: __DIR__ . '/../routes/console.php',
      health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
      $middleware->web(remove: [
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
      ]);
      $middleware->web(append: [
        \CodeZero\LocalizedRoutes\Middleware\SetLocale::class,
+       FormatSetLocale::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
      ]);
    })
    ->withExceptions(function (Exceptions $exceptions) {
      //
    })->create();

// In our views
<?php $datetime = Illuminate\Support\Carbon::create(2024, 9, 24, 14, 37, 6); ?>

<p>{{ $datetime->isoFormat("MMMM Do YYYY, h:mm:ss a") }}</p>
<p>{{ $datetime->isoFormat("LL") }}</p>
<p>{{ $datetime->diffForHumans() }}</p>

The post The Ultimate Guide to Laravel Localization appeared first on Phrase.

 npm create qwik@latest

 npm run qwik add tailwind

/* src/global.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

// src/routes/layout.tsx

import { component$, Slot } from "@builder.io/qwik";
import type { RequestHandler } from "@builder.io/qwik-city";
import { routeLoader$ } from "@builder.io/qwik-city";
import Header from "~/components/layout/header";

export const onGet: RequestHandler = async ({
  cacheControl,
}) => {
  cacheControl({
    staleWhileRevalidate: 60 * 60 * 24 * 7,
    maxAge: 5,
  });
};

export const useServerTimeLoader = routeLoader$(() => {
  return {
    date: new Date().toISOString(),
  };
});

export default component$(() => {
  return (
    <>
      <Header />
      <main class="...">
        <Slot />
      </main>
    </>
  );
});

// src/components/layout/header.tsx

import { component$ } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";

export default component$(() => {
  return (
    <header class="...">
      <nav class="...">
        <Link href="/">
          <span class="...">👾 Etttro</span>
        </Link>

        <ul class="...">
          <li>
            <Link href="/">Latest products</Link>
          </li>
          <li>
            <Link href="/about">About us</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
});

// src/data/retro-hardware.ts

const retroHardware = [
  {
    id: 1,
    title: "Commodore 64",
    priceInCents: 14999,
    imageUrl: "commodore-64.jpg",
    publishedAt: "2024-06-01T10:00:00Z",
    description: "Classic Commodore 64 in working condition...",
  },
  {
    id: 2,
    title: "Virtual Boy",
    // ...
  },
  // ...
] as const;

export default retroHardware;

export type Product = (typeof retroHardware)[number];

// src/routes/index.tsx

import { component$ } from "@builder.io/qwik";
import {
  Link,
  routeLoader$,
  type DocumentHead,
} from "@builder.io/qwik-city";
import retroHardware, {
  type Product,
} from "~/data/retro-hardware";

export const useProducts = routeLoader$<
  Readonly<Product[]>
>(() => {
  return retroHardware;
});

export default component$(() => {
  const productsS = useProducts();

  return (
    <>
      <h1 class="...">Latest products</h1>

      <section class="...">
        {productsS.value.map((product) => (
          <Link
            href={`products/${product.id}`}
            key={product.id}
          >
            <article class="...">
              <h3 class="...">{product.title}</h3>
              <img
                class="..."
                width={600}
                height={600}
                alt={product.title}
                src={`/product-img/${product.imageUrl}`}
              />
              <div class="...">
                <p>${product.priceInCents / 100.0}</p>
                <p>
                  {new Date(
                    product.publishedAt,
                  ).toLocaleDateString("en-US")}
                </p>
              </div>
              <p class="...">
                {product.description.slice(0, 65)}...
              </p>
            </article>
          </Link>
        ))}
      </section>
    </>
  );
});

export const head: DocumentHead = {
  title: "Etttro | Retro Hardware Marketplace",
  meta: [
    {
      name: "description",
      content: "Etttro is your community second-hand...",
    },
  ],
};

npm install qwik-speak --save-dev

// vite.config.ts

  import { defineConfig, type UserConfig } from "vite";
  import { qwikVite } from "@builder.io/qwik/optimizer";
  import { qwikCity } from "@builder.io/qwik-city/vite";
+ import { qwikSpeakInline } from 'qwik-speak/inline';
  import tsconfigPaths from "vite-tsconfig-paths";
  import pkg from "./package.json";

  //...

  export default defineConfig(({ command, mode }): UserConfig => {
    return {
      plugins: [
        qwikCity(),
        qwikVite(),
+       qwikSpeakInline({
+         supportedLangs: ['en-US', 'ar-EG'],
+         defaultLang: 'en-US',
+         assetsPath: 'i18n'
+       }),
        tsconfigPaths(),
      ],
      optimizeDeps: {
        exclude: [],
      },
      // ...
    };
  });

// ...

// src/speak-config.ts

import type { SpeakConfig } from "qwik-speak";

export const config: SpeakConfig = {
  // Note that we expand on the locale config
  // here, setting a currency and time zone.
  defaultLocale: {
    lang: "en-US",
    currency: "USD",
    timeZone: "America/Los_Angeles",
  },
  supportedLocales: [
    {
      lang: "ar-EG",
      currency: "USD",
      timeZone: "Africa/Cairo",
    },
    {
      lang: "en-US",
      currency: "USD",
      timeZone: "America/Los_Angeles",
    },
  ],

  // Translations available in the whole
  // app. These map to files under our
  // `i18n/{lang}` directories.
  assets: ["app"],

  // Translations that require dynamic keys,
  // and cannot be set at compile-time.
  runtimeAssets: [],
};

// src/speak-functions.ts

import { server$ } from "@builder.io/qwik-city";
import type {
  LoadTranslationFn,
  Translation,
  TranslationFn,
} from "qwik-speak";

/**
 * Translation files are lazy-loaded via dynamic import
 * and will be split into separate chunks during build.
 * Assets names and keys must be valid variable names.
 */
const translationData = import.meta.glob<Translation>(
  "/i18n/**/*.json",
);

/**
 * Using server$, translation data is always accessed
 * on the server.
 */
const loadTranslation$: LoadTranslationFn = server$(
  async (lang: string, asset: string) =>
    await translationData[`/i18n/${lang}/${asset}.json`](),
);

export const translationFn: TranslationFn = {
  loadTranslation$: loadTranslation$,
};

// src/root.tsx

  import { component$ } from "@builder.io/qwik";
  import {
    QwikCityProvider,
    RouterOutlet,
    ServiceWorkerRegister,
  } from "@builder.io/qwik-city";
  import { RouterHead } from "./components/router-head/router-head";
+ import { useQwikSpeak } from "qwik-speak";
+ import { config } from "./speak-config";
+ import { translationFn } from "./speak-functions";

  import "./global.css";

  export default component$(() => {
+   useQwikSpeak({ config, translationFn });

    return (
      <QwikCityProvider>
        <head>
          <meta charset="utf-8" />
          <RouterHead />
          <ServiceWorkerRegister />
        </head>
        <body lang="en" class="...">
          <RouterOutlet />
        </body>
      </QwikCityProvider>
    );
  });

// src/entry.ssr.tsx

+ import { isDev } from "@builder.io/qwik/build";
  import {
    renderToStream,
+   type RenderOptions,
    type RenderToStreamOptions,
  } from "@builder.io/qwik/server";
  import { manifest } from "@qwik-client-manifest";
  import Root from "./root";
+ import { config } from "./speak-config";

+ export function extractBase({
+   serverData,
+ }: RenderOptions): string {
+   if (!isDev && serverData?.locale) {
+     return "/build/" + serverData.locale;
+   } else {
+     return "/build";
+   }
+ }

  export default function (opts: RenderToStreamOptions) {
+   // Let's set the lang attribute on the
+   // <html> tag while we're at it.
+   const lang =
+     opts.serverData?.locale || config.defaultLocale.lang;

    return renderToStream(<Root />, {
      manifest,
      ...opts,
+     base: extractBase,
      containerAttributes: {
+       lang,
        ...opts.containerAttributes,
      },
      serverData: {
        ...opts.serverData,
      },
    });
  }

// i18n/en-US/app.json

{
  "appTitle": "Ettro"
}

// i18n/ar-EG/app.json

{
  "appTitle": "إترو"
}

// src/components/layout/header.tsx

  import { component$ } from "@builder.io/qwik";
  import { Link } from "@builder.io/qwik-city";
+ import { inlineTranslate } from "qwik-speak";

  export default component$(() => {
+   const t = inlineTranslate();

    return (
      <header class="...">
        <nav class="...">
          <Link href="/">
            <span class="...">
-             👾 Etttro
+             👾 {t("appTitle")}
            </span>
          </Link>

          <ul class="...">
            {/* ... */}
          </ul>
        </nav>
      </header>
    );
  });

// src/speak-config.ts

import type { SpeakConfig } from "qwik-speak";

export const config: SpeakConfig = {
  defaultLocale: {
-   lang: "en-US",
+   lang: "ar-EG",
    currency: "USD",
    timeZone: "America/Los_Angeles",
  },
  // ...
};

# BEFORE
.
└── src/
    └── routes/
        ├── about/
        │   └── index.tsx
        ├── products/
        │   └── [id]/
        │       └── index.ts
        └── index.tsx


# AFTER
.
└── src/
    └── routes/
        └── [...lang]/
            ├── about/
            │   └── index.tsx
            ├── products/
            │   └── [id]/
            │       └── index.ts
            └── index.tsx

// src/routes/plugin.ts

import type { RequestHandler } from "@builder.io/qwik-city";
import {
  setSpeakContext,
  validateLocale,
} from "qwik-speak";

import { config } from "../speak-config";

/**
 * This middleware function must only contain the logic to
 * set the locale, because it is invoked on every request
 * to the server.
 * Avoid redirecting or throwing errors here, and prefer
 * layouts or pages.
 */
export const onRequest: RequestHandler = ({
  params,
  locale,
}) => {
  let lang: string | undefined = undefined;

  if (params.lang && validateLocale(params.lang)) {
    lang = config.supportedLocales.find(
      (value) => value.lang === params.lang,
    )?.lang;
  } else {
    lang = config.defaultLocale.lang;
  }

  // Set Qwik locale.
  locale(lang);
};

// src/routes/layout.tsx

  import { component$, Slot } from "@builder.io/qwik";
  import type { RequestHandler } from "@builder.io/qwik-city";
  import { routeLoader$ } from "@builder.io/qwik-city";
  import Footer from "~/components/layout/footer";
  import Header from "~/components/layout/header";
+ import { config } from "~/speak-config";

  export const onGet: RequestHandler = async ({
    cacheControl,
+   params,
+   send,
  }) => {
    cacheControl({
      staleWhileRevalidate: 60 * 60 * 24 * 7,
      maxAge: 5,
    });

+   if (
+     !config.supportedLocales.find(
+       (loc) => loc.lang === params.lang,
+     )
+   ) {
+     send(404, "Not Found");
+   }
+ };

  export const useServerTimeLoader = routeLoader$(() => {
    return {
      date: new Date().toISOString(),
    };
  });

  export default component$(() => {
    return (
      <>
        <Header />
        <main class="...">
          <Slot />
        </main>
        <Footer />
      </>
    );
  });

// src/routes/[...lang]/index.tsx

  import { component$ } from "@builder.io/qwik";
  import {
    routeLoader$,
    type DocumentHead,
+   type RequestHandler,
  } from "@builder.io/qwik-city";
+ import { config } from "~/speak-config";
// ...

+ export const onGet: RequestHandler = async ({
+   params,
+   redirect,
+ }) => {
+   if (!params.lang) {
+     throw redirect(301, `/${config.defaultLocale.lang}/`);
+   }
+ };

// ...

//  src/util/i18n/loc-path.ts

import { config } from "~/speak-config";

export default function locPath$(
  path: string,
  lang: string,
): string {
  if (path === "/") {
    return `/${lang}`;
  }

  const pathParts = path
    .split("/")
    .filter((segment) => segment);

  if (
    config.supportedLocales.find(
      (locale) => locale.lang === pathParts[0],
    )
  ) {
    pathParts[0] = lang;
  } else {
    pathParts.unshift(lang);
  }

  return `/${pathParts.join("/")}`;
}

// src/components/i18n/loc-link.tsx

import { Slot, component$ } from "@builder.io/qwik";
import {
  Link,
  useLocation,
  type LinkProps,
} from "@builder.io/qwik-city";
import locPath$ from "~/util/i18n/loc-path";

type LocLinkProps = LinkProps & { href: string };

export default component$(
  ({ href, ...props }: LocLinkProps) => {
    const {
      params: { lang },
    } = useLocation();
    const localizedHref = locPath$(href, lang);

    return (
      <Link href={localizedHref} {...props}>
        <Slot />
      </Link>
    );
  },
);

// src/components/layout/header.tsx

  import { component$ } from "@builder.io/qwik";
- import { Link } from "@builder.io/qwik-city";
+ import LocLink from "../i18n/loc-link";
  import { inlineTranslate } from "qwik-speak";

  export default component$(() => {
    const t = inlineTranslate();

    return (
      <header class="...">
        <div class="...">
          <nav class="...">
-           <Link href="/">
+           <LocLink href="/">
              <span class="text-2xl font-thin">
                👾 {t("appTitle")}
              </span>
-           </Link>
+           </LocLink>
            <ul class="...">
              <li>
-               <Link href="/">
+               <LocLink href="/">
                  {t("nav.latestProducts")}
-               </Link>
+               </LocLink>
              </li>
              <li>
-               <Link href="/about">
+               <LocLink href="/about">
                  {t("nav.aboutUs")}
-               </Link>
+               </LocLink>
              </li>
            </ul>
          </nav>
        </div>
      </header>
    );
  });

Now our links will always include the locale prefix for the active locale.

How do I build a language switcher?

We often want to allow our visitors to select their preferred locale. Qwik Speak doesn’t have a function to switch locales, so we need to reload the app when a new locale is selected. Let’s build a locale switcher <select> component to achieve this.

// src/components/i18n/locale-switcher.tsx

import { $, component$ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";
import {
  useSpeakLocale,
  type SpeakLocale,
} from "qwik-speak";
import { config } from "~/speak-config";
import locPath$ from "~/util/i18n/loc-path";

const langNames: Record<SpeakLocale["lang"], string> = {
  "en-US": "English",
  "ar-EG": "العربية (Arabic)",
};

export default component$(() => {
  const { lang: activeLang } = useSpeakLocale();
  const loc = useLocation();

  const changeLocale$ = $((evt: Event) => {
    const selectedLang = (evt.target as HTMLSelectElement)
      .value;

    // Reload the whole app/page with the newly
    // selected locale.
    window.location.href = locPath$(
      loc.url.pathname,
      selectedLang,
    );
  });

  return (
    <select
      onChange$={changeLocale$}
      class="..."
    >
      {config.supportedLocales.map(({ lang }) => (
        <option
          key={lang}
          value={lang}
          selected={lang === activeLang}
        >
          {langNames[lang]}
        </option>
      ))}
    </select>
  );
});

// package.json

{
  "name": "my-qwik-basic-starter",
  "description": "Demo App with Routing built-in (recommended)",
  // ...
  "scripts": {
    //...
    "start": "vite --open --mode ssr",
    "qwik": "qwik",
+   "i18n:extract": "qwik-speak-extract --supportedLangs=en-US,ar-EG --assetsPath=i18n --unusedKeys=true"
  },
  "devDependencies": {
    //...
  }
}

// src/components/layout/header.tsx

import { component$ } from "@builder.io/qwik";
import { inlineTranslate } from "qwik-speak";
import LocLink from "../i18n/loc-link";
import LocaleSwitcher from "../i18n/locale-switcher";

export default component$(() => {
  const t = inlineTranslate();

  return (
    <header class="...">
      <div class="...">
        <nav class="...">
          <LocLink href="/">
            <span class="...">
              {/* 👇 The extraction script will look
                     for `t(key)` calls. This will be
                     extracted into `app.json`. */}
              👾 {t("appTitle")}
            </span>
          </LocLink>
          <ul class="...">
            <li>
              <LocLink href="/">
                {/* 👇 This will be extracted into
                       `nav.json`.  */}
                {t("nav.latestProducts")}
              </LocLink>
            </li>
            <li>
              <LocLink href="/about">
                {t("nav.aboutUs")}
              </LocLink>
            </li>
          </ul>
        </nav>

        <LocaleSwitcher />
      </div>
    </header>
  );
});

.
└── i18n/
    ├── ar-EG/
    │   ├── app.json
    │   └── nav.json
    └── en-US/
        ├── app.json
        └── nav.json

// i18n/en-US/app.json
{
  "appTitle": ""
}

// i18n/ar-EG/app.json
{
  "appTitle": ""
}

// i18n/en-US/nav.json
{
  "nav": {
    "aboutUs": "",
    "latestProducts": ""
  }
}

// i18n/ar-EG/nav.json
{
  "nav": {
    "aboutUs": "",
    "latestProducts": ""
  }
}

// src/speak-config.ts

import type { SpeakConfig } from "qwik-speak";

export const config: SpeakConfig = {
  // ...
  supportedLocales: [
    //...
  ],
  // Translations available in the whole app
- assets: ["app"],
+ assets: ["app", "nav"],
  runtimeAssets: [],
};

npm install --save-dev rtl-detect @types/rtl-detect

// src/entry.ssr.tsx

  import { isDev } from "@builder.io/qwik/build";
  import {
    renderToStream,
    type RenderOptions,
    type RenderToStreamOptions,
  } from "@builder.io/qwik/server";
  import { manifest } from "@qwik-client-manifest";
+ import rtlDetect from "rtl-detect";
  import Root from "./root";
  import { config } from "./speak-config";

  export function extractBase(/* ... */) {
    // ...
  }

  export default function (opts: RenderToStreamOptions) {
    const lang =
      opts.serverData?.locale || config.defaultLocale.lang;

    return renderToStream(<Root />, {
      manifest,
      ...opts,
      base: extractBase,
      // Use container attributes to set attributes on
      // the html tag.
      containerAttributes: {
        lang,
+       // Use rtl-detect to determine the dir of
+       // the current locale and set it as the
+       // `<html dir>` attribute.
+       dir: rtlDetect.getLangDir(lang),
        ...opts.containerAttributes,
      },
      serverData: {
        ...opts.serverData,
      },
    });
  }

export const useMyTranslatedString = routeLoader$<string>(
  (requestEvent) => {
    const t = inlineTranslate();
    // We need to provide the locale explicitly
    // to `t()`. We can get the Qwik locale, from
    // `requestEvent.locale()`. We set this in our
    // plugin middleware.
    const translatedString = t(
      "myTranslation",
      {},
      requestEvent.locale(),
    );

    return translatedString;
  },
);

// i18n/en-US/app.json

{
+ "app": {
+   "meta": {
+     "description": "Etttro is your community second-hand market for all retro electronics.",
+     "title": "Etttro | Retro Hardware Marketplace"
+   }
+ },
  "appTitle": "Etttro",
  // ...
}

// i18n/ar-EG/app.json

{
+ "app": {
+   "meta": {
+     "description": "إترو هو سوق مجتمعي لجميع الأجهزة الإلكترونية الرجعية المستعملة.",
+     "title": "إترو | سوق الأجهزة الرجعية"
+   }
+ },
  "appTitle": "إترو",
  // ...
}

// src/routes/[...lang]/index.tsx

import { component$ } from "@builder.io/qwik";
import {
  routeLoader$,
  type DocumentHead,
} from "@builder.io/qwik-city";
import { inlineTranslate } from "qwik-speak";

// ...

export default component$(() => {
  // ...
});

export const head: DocumentHead = ({ params }) => {
  const t = inlineTranslate();

  // We pass the `lang` route param to `t()` as
  // the third argument.
  return {
    title: t("app.meta.title", {}, params.lang),
    meta: [
      {
        name: "description",
        content: t("app.meta.description", {}, params.lang),
      },
    ],
  };
};

The title and meta description are translated to Arabic when our home page locale is ar-EG.

How do I work with basic translation messages?

We’ve covered basic translations a few times by now, so we’ll briefly refresh ourselves before we cover more advanced formatting topics.

Translated strings are added to our translation files, one for each locale.

// i18n/en-US/app.json
{
  //...
  "water": "Water"
}

// i18n/ar-EG/app.json
{
  //...
  "water": "ماء"
}

import { component$ } from "@builder.io/qwik";
import { inlineTranslate } from "qwik-speak";

export default component$(() => {
  const t = inlineTranslate();

  return <p>{t("water")}</p>
});

// i18n/en-US/app.json
  {
    "appTitle": "Ettro",
    //...
+   "userGreeting": "Hello, {{username}}."
  }

// i18n/ar-EG/app.json
  {
    "appTitle": "إترو",
    //...
+   "userGreeting": "مرحبًا، {{username}}."
  }

// src/routes/[...lang]/index.tsx

import { $, component$ } from "@builder.io/qwik";
// ...
import {
  inlineTranslate,
  type Translation,
} from "qwik-speak";
// ...

// ...

export default component$(() => {
  const t = inlineTranslate();
  const productsS = useProducts();

  return (
    <>
      <div class="...">
        <h1 class="...">
          {t("homePageTitle")}
        </h1>

+       <p>{t("userGreeting", { username: "Hannah" })}</p>
      </div>

      <section class="...">
        {/* ... */}
      </section>
    </>
  );
});

// ...

// i18n/en-US/app.json

{
  "appTitle": "Ettro",
- "latestProducts": "Latest products",
+ "latestProducts": {
+   "one": "{{value}} Latest Product",
+   "other": "{{value}} Latest Products"
+ },
  // ...
  "userGreeting": "Hello, {{name}}."
}

// i18n/ar-EG/app.json
{
  "appTitle": "إترو",
- "latestProducts": "أحدث المنتجات",
+ "latestProducts": {
+   "zero": "لا توجد منتجات",
+   "one": "أحدث منتج",
+   "two": "أحدث منتجين",
+   "few": "أحدث {{value}} منتجات",
+   "many": "أحدث {{value}} منتج",
+   "other": "أحدث {{value}} منتج"
+ },
  // ...
  "userGreeting": "مرحبًا، {{name}}."
}

import { $, component$ } from "@builder.io/qwik";
// ...
import {
+ inlinePlural,
  inlineTranslate,
  type Translation,
} from "qwik-speak";

//...

export default component$(() => {
  const t = inlineTranslate();
+ const p = inlinePlural();
  const productsS = useProducts();

  return (
    <>
      <div class="...">
        <h1 class="...">
-         {t("latestProducts")}
+         {/* The first argument is an integer
+             counter used to select the plural
+             form. The second argument is the
+             message key. */}
+         {p(productsS.value.length, "latestProducts")}
        </h1>

        <p>{t("userGreeting", { name: "Hannah" })}</p>
      </div>

      <section class="...">
        {/* ... */}
      </section>
    </>
  );
});

// ...

// i18n/en-US/app.json

{
  "appTitle": "Etttro",
+ "footerText": "<strong>Etttro</strong> is a demo app made with Qwik &amp; Qwik Speak.",
  //...
}

// i18n/ar-EG/app.json

{
  "appTitle": "إترو",
+ "footerText": "<strong>إترو</strong> هو تطبيق تجريبي تم تصميمه باستخدام Qwik &amp; Qwik Speak.",
  // ...
}

// src/components/layout/footer.tsx

import { component$ } from "@builder.io/qwik";
import { inlineTranslate } from "qwik-speak";

export default component$(() => {
  const t = inlineTranslate();

  return (
    <footer class="...">
      <div class="...">
        <p
          class="..."
          dangerouslySetInnerHTML={t("footerText")}
        ></p>
      </div>
    </footer>
  );
});

Again, note the dangerouslySetInnerHTML, which allows injecting raw innerHTML into a DOM element.

🗒️ Note » If you’re coding along, tuck the new Footer component in the root layout to see it render.

How do I format localized numbers?

i18n is more than just string translations. Working with numbers and dates is crucial for most apps, and each region handles number and date formatting differently.

A note on regional formatting

Number and date formatting are determined by region, not just language. For example, the US and Canada use English but have different date formats and measurement units. So it’s better to use a qualified locale (like en-US) instead of just a language code (en).

Using a language code alone, such as ar for Arabic, can lead to inconsistency. Different browsers might default to various regions, like Saudi Arabia (ar-SA) or Egypt (ar-EG), resulting in varied date formats due to distinct regional calendars.

Luckily, Qwik Speak provides a number formatting function built on the robust standard Intl.NumberFormat object. Let’s use it to format our product prices.

// src/routes/[...lang]/index.tsx

import { $, component$ } from "@builder.io/qwik";
// ...
import {
  inlinePlural,
  inlineTranslate,
+ useFormatNumber,
  type Translation,
} from "qwik-speak";
import LocLink from "~/components/i18n/loc-link";

// ...

export default component$(() => {
  const t = inlineTranslate();
  const p = inlinePlural();
+ const fn = useFormatNumber();
  const productsS = useProducts();

  return (
    <>
      <div class="...">
        {/* ... */}
      </div>

      <section class="...">
        {productsS.value.map((product) => (
          <LocLink
            href={`products/${product.id}`}
            key={product.id}
          >
            <article class="...">
              {/* ... */}
              <img
                width={600}
                height={600}
                alt={product.title}
                class="block aspect-square w-full"
                src={`/product-img/${product.imageUrl}`}
              />
              <div class="...">
-               <p>${product.priceInCents / 100.0}</p>
+               <p>
+                 {fn(product.priceInCents / 100.0, {
+                   style: "currency",
+                 })}
+               </p>
                {/* ... */}
              </div>
              <p class="...">
                {product.description.slice(0, 65)}...
              </p>
            </article>
          </LocLink>
        ))}
      </section>
    </>
  );
});

// ...

// src/speak-config.ts

import type { SpeakConfig } from "qwik-speak";

export const config: SpeakConfig = {
  defaultLocale: {
    lang: "en-US",
    currency: "USD",
    timeZone: "America/Los_Angeles",
  },
  supportedLocales: [
    {
      lang: "ar-EG",
      // We can change the currency for Arabic
      // here, but we need to convert it from
      // USD in our app if we do.
      currency: "USD",
      timeZone: "Africa/Cairo",
    },
    {
      lang: "en-US",
      currency: "USD",
      timeZone: "America/Los_Angeles",
    },
  ],
  assets: ["app", "nav"],
  runtimeAssets: [],
};

import { $, component$ } from "@builder.io/qwik";
// ...
import {
  inlinePlural,
  inlineTranslate,
+ useFormatDate,
  useFormatNumber,
  type Translation,
} from "qwik-speak";
import LocLink from "~/components/i18n/loc-link";

// ...

export default component$(() => {
  const t = inlineTranslate();
  const p = inlinePlural();
  const fn = useFormatNumber();
+ const fd = useFormatDate();
  const productsS = useProducts();

  return (
    <>
      <div class="...">
        {/* ... */}
      </div>

      <section class="...">
        {productsS.value.map((product) => (
          <LocLink
            href={`products/${product.id}`}
            key={product.id}
          >
            <article class="...">
              {/* ... */}
              <div class="...">
                <p>
                  {fn(product.priceInCents / 100.0, {
                      style: "currency",
                   })}
                </p>
                <p>
-                 // We no longer need the custom
-                 // `toShortDate$` function.
-                 {toShortDate$(product.publishedAt)}
+                 {fd(product.publishedAt, {
+                   dateStyle: "short",
+                 })}
                </p>
              </div>
              <p class="...">
                {product.description.slice(0, 65)}...
              </p>
            </article>
          </LocLink>
        ))}
      </section>
    </>
  );
});

// ...

The post Mastering Qwik Localization: A Comprehensive Guide appeared first on Phrase.

GET    /          # Root, redirects to /info
GET    /info      # Lists available endpoints
GET    /today     # Shows a daily quote
POST   /posts     # Creates a new blog post
GET    /posts     # Lists all blog posts
GET    /posts/1   # Shows a blog post with ID 1
PATCH  /posts/1   # Updates blog post with ID 1

$ npm install -g @nestjs/cli
$ nest new yogger-chicken

$ nest generate module info
$ nest generate controller info
$ nest generate service info

// src/info/info.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class InfoService {
  getInfo() {
    return {
      about: 'yogger chicken: a headless running blog',
      lastUpdated: new Date().toISOString(),
      routes: [
        {
          verb: 'GET',
          path: '/',
          description: 'Redirects to /info',
        },
        {
          verb: 'GET',
          path: '/info',
          description: 'You are here',
        },
        {
          verb: 'GET',
          path: '/today',
          description: 'Daily quote',
        },
        {
          posts: [
            {
              verb: 'GET',
              path: '/posts',
              description: 'Index of all posts',
            },
            {
              verb: 'GET',
              path: '/posts/1',
              description: 'Post with ID 1',
            },
            {
              verb: 'POST',
              path: '/posts',
              description: 'Create a new post',
            },
            {
              verb: 'PATCH',
              path: '/posts/1',
              description: 'Update post with ID 1',
            },
          ],
        },
      ],
    };
  }
}

// src/app.controller.ts

import { Controller, Get, Redirect } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Redirect('/info', 301)
  getRoot() {}
}

 $ npm install sqlite3 typeorm @nestjs/typeorm

$ npm install class-validator class-transformer

$ npm install @nestjs/mapped-types

// src/app.module.ts

  import { Module } from '@nestjs/common';
+ import { TypeOrmModule } from '@nestjs/typeorm';
  import { AppController } from './app.controller';
  import { InfoModule } from './info/info.module';
  import { TodayModule } from './today/today.module';

  @Module({
    imports: [
+     TypeOrmModule.forRoot({
+       type: 'sqlite',
+       database: 'db.sqlite',
+       entities: [__dirname + '/**/*.entity.{ts,js}'],
+       synchronize: true, // DO NOT USE IN PRODUCTION
+       logging: true,
+     }),
      InfoModule,
      TodayModule,
    ],
    controllers: [AppController],
    providers: [],
  })
  export class AppModule {}

$ nest generate module posts
$ nest generate service posts
$ nest generate controller posts

// src/posts/entities/post.entity.ts

import {
  Column,
  Entity,
  PrimaryGeneratedColumn,
} from 'typeorm';

@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column()
  content: string;
}

// src/posts/posts.module.ts

  import { Module } from '@nestjs/common';
+ import { TypeOrmModule } from '@nestjs/typeorm';
+ import { Post } from './entities/post.entity';
  import { PostsController } from './posts.controller';
  import { PostsService } from './posts.service';

  @Module({
+   imports: [TypeOrmModule.forFeature([Post])],
    providers: [PostsService],
    controllers: [PostsController],
  })
  export class PostsModule {}

// src/posts/dto/create-post.dto.ts

import {
  IsNotEmpty,
  IsString,
  Length,
} from 'class-validator';

export class CreatePostDto {
  @IsString()
  @IsNotEmpty()
  @Length(1, 255)
  title: string;

  @IsString()
  @IsNotEmpty()
  content: string;
}

// src/posts/dto/update-post.dto.ts

import { PartialType } from '@nestjs/mapped-types';
import { CreatePostDto } from './create-post.dto';

export class UpdatePostDto extends PartialType(
  CreatePostDto,
) {}

// src/posts/posts.service.ts

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreatePostDto } from './dto/create-post.dto';
import { UpdatePostDto } from './dto/update-post.dto';
import { Post } from './entities/post.entity';

export interface PostSummary {
  id: number;
  title: string;
}

@Injectable()
export class PostsService {
  constructor(
    @InjectRepository(Post)
    private postRepo: Repository<Post>,
  ) {}

  async findAll(): Promise<PostSummary[]> {
    return await this.postRepo.find({
      select: ['id', 'title'],
    });
  }

  async findOne(id: number): Promise<Post | null> {
    return await this.postRepo.findOneBy({ id });
  }

  async create(
    createPostDto: CreatePostDto,
  ): Promise<Post> {
    const newPost = this.postRepo.create({
      ...createPostDto,
    });

    return this.postRepo.save(newPost);
  }

  async update(
    id: number,
    updatePostDto: UpdatePostDto,
  ): Promise<Post | null> {
    const post = await this.findOne(id);

    if (!post) {
      return null;
    }

    if (post) {
      post.title = updatePostDto.title ?? post.title;
      post.content = updatePostDto.content ?? post.content;
    }

    return await this.postRepo.save(post);
  }

  async remove(id: number): Promise<boolean> {
    const post = await this.findOne(id);

    if (!post) {
      return false;
    }

    await this.postRepo.remove(post);

    return true;
  }
}

// src/posts/posts.controller.ts

import {
  Body,
  Controller,
  Delete,
  Get,
  NotFoundException,
  Param,
  Patch,
  Post,
  UsePipes,
  ValidationPipe,
} from '@nestjs/common';
import { CreatePostDto } from './dto/create-post.dto';
import { UpdatePostDto } from './dto/update-post.dto';
import { Post as PostEntity } from './entities/post.entity';
import { PostSummary, PostsService } from './posts.service';

@Controller('posts')
export class PostsController {
  constructor(
    private readonly postsService: PostsService,
  ) {}

  @Get()
  async findAll(): Promise<PostSummary[]> {
    return this.postsService.findAll();
  }

  @Get(':id')
  async findOne(
    @Param('id') id: string,
  ): Promise<PostEntity> {
    const post = await this.postsService.findOne(+id);

    if (!post) {
      this.throwNotFound(id);
    }

    return post;
  }

  @Post()
  @UsePipes(new ValidationPipe({ whitelist: true }))
  async create(
    @Body() createPostDto: CreatePostDto,
  ): Promise<PostEntity> {
    return this.postsService.create(createPostDto);
  }

  @Patch(':id')
  @UsePipes(new ValidationPipe({ whitelist: true }))
  async update(
    @Param('id') id: string,
    @Body() updatePostDto: UpdatePostDto,
  ): Promise<PostEntity> {
    const post = await this.postsService.update(
      +id,
      updatePostDto,
    );

    if (!post) {
      this.throwNotFound(id);
    }

    return post;
  }

  @Delete(':id')
  async remove(
    @Param('id') id: string,
  ): Promise<{ message: string }> {
    const ok = await this.postsService.remove(+id);

    if (!ok) {
      this.throwNotFound(id);
    }

    return { message: 'Post deleted' };
  }

  private throwNotFound(id: string): never {
    throw new NotFoundException(
      `Post with ID ${id} not found`,
    );
  }
}

$ npm install nestjs-i18n

// src/locales/en/common.json

{
  "about": "yogger chicken: a headless blog about"
}

// src/locales/ar/common.json

{
  "about": "دجاج يوجر: مدونة جري بلا رأس"
}

// src/app.module.ts

  import { Module } from '@nestjs/common';
  import { TypeOrmModule } from '@nestjs/typeorm';
+ import { I18nModule, QueryResolver } from 'nestjs-i18n';
+ import * as path from 'path';
  import { AppController } from './app.controller';
  import { InfoModule } from './info/info.module';
  import { PostsModule } from './posts/posts.module';
  import { TodayModule } from './today/today.module';

  @Module({
    imports: [
      TypeOrmModule.forRoot({
        type: 'sqlite',
        database: 'db.sqlite',
        entities: [__dirname + '/**/*.entity.{ts,js}'],
        synchronize: true,
        logging: true,
      }),
+     I18nModule.forRoot({
+       fallbackLanguage: 'en',
+       loaderOptions: {
+         path: path.join(__dirname, '/locales/'),
+         watch: true,
+       },
+       resolvers: [new QueryResolver(['lang'])],
+     }),
      InfoModule,
      PostsModule,
      TodayModule,
    ],
    controllers: [AppController],
    providers: [],
  })
  export class AppModule {}

// nest-cli.json

{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "deleteOutDir": true,
+   "assets": [
+     { "include": "locales/**/*", "watchAssets": true }
+   ]
  }
}

// src/info/info.controller.ts

  import { Controller, Get } from '@nestjs/common';
+ import { I18n, I18nContext } from 'nestjs-i18n';
  import { InfoService } from './info.service';

  @Controller('info')
  export class InfoController {
    constructor(private readonly infoService: InfoService) {}

    @Get()
    getInfo() {
      return this.infoService.getInfo();
    }

+   @Get('about')
+   getAbout(@I18n() i18n: I18nContext) {
+     return i18n.t('common.about');
+   }
  }

.
└── src
    └── locales
        ├── en
        │   └── common<strong>.</strong>json
        │       └── "about": "yogger chicken: a headless running blog"
        └── ar
            └── common.json
                └── "about": "دجاج يوجر: مدونة جري بلا رأس"

// src/info/info.service.ts

  import { Injectable } from '@nestjs/common';
+ import { I18nContext, I18nService } from 'nestjs-i18n';

  @Injectable()
  export class InfoService {
+   constructor(private readonly i18n: I18nService) {}

    getInfo() {
      return {
-       about: 'yogger chicken: a headless running blog',
+       about: this.i18n.translate('common.about', {
+         lang: I18nContext.current().lang,
+       }),
        lastUpdated: new Date().toISOString(),
        routes: [
          // ...
        ],
      };
    }
  }

$ nest generate module yc-i18n
$ nest generate service yc-i18n

 // src/yc-i18n/yc-i18n.service.ts

import { Injectable } from '@nestjs/common';
import { I18nContext, I18nService } from 'nestjs-i18n';

@Injectable()
export class YcI18nService {
  constructor(private readonly i18n: I18nService) {}

  t(key: string, options?: Record<string, any>) {
    const lang = I18nContext.current().lang;
    return this.i18n.translate(key, { lang, ...options });
  }
}

// src/yc-i18n/yc-i18n.module.ts

import { Global, Module } from '@nestjs/common';
import { YcI18nService } from './yc-i18n.service';

// Make the module global so that we don't have
// to import it into every other module that needs it.
@Global()
@Module({
  providers: [YcI18nService],
  exports: [YcI18nService], // export the service
})
export class YcI18nModule {}

// src/info/info.service.ts

  import { Injectable } from '@nestjs/common';
- import { I18nContext, I18nService } from 'nestjs-i18n';
+ import { YcI18nService } from 'src/yc-i18n/yc-i18n.service';

  @Injectable()
  export class InfoService {
-   constructor(private readonly i18n: I18nService) {}
+   constructor(private readonly i18n: YcI18nService) {}

    getInfo() {
      return {
-       about: this.i18n.translate('common.about', {
-         lang: I18nContext.current().lang,
-       }),
+       about: this.i18n.t('common.about'),
        lastUpdated: new Date().toISOString(),
        routes: [
          // ...
        ],
      };
    }
  }

// src/info/info.controller.ts

  import { Controller, Get } from '@nestjs/common';
- import { I18n, I18nContext } from 'nestjs-i18n';
+ import { YcI18nService } from 'src/yc-i18n/yc-i18n.service';
  import { InfoService } from './info.service';

  @Controller('info')
  export class InfoController {
   constructor(
     private readonly infoService: InfoService,
+    private readonly i18n: YcI18nService,
   ) {}

    @Get()
    getInfo() {
      return this.infoService.getInfo();
    }

    @Get('about')
-   getAbout(@I18n() i18n: I18nContext) {
+   getAbout() {
-     return i18n.t('common.about');
+     return this.i18n.t('common.about');
    }
  }

// src/app.module.ts

// ...
import {
  AcceptLanguageResolver,
  HeaderResolver,
  I18nModule,
+ I18nYamlLoader,
  QueryResolver,
} from 'nestjs-i18n';
import * as path from 'path';
// ...

@Module({
  imports: [
    // ...
    I18nModule.forRoot({
      fallbackLanguage: 'en',
+     loader: I18nYamlLoader,
      loaderOptions: {
        path: path.join(__dirname, '/locales/'),
        watch: true,
      },
      resolvers: [new QueryResolver(['lang'])],
    }),
    // ...
  ],
  controllers: [AppController],
  providers: [],
})
export class AppModule {}

# src/locales/en/common.yml

about: 'yogger chicken: a headless running blog'

# src/locales/ar/common.yml

about: 'دجاج يوجر: مدونة جري بلا رأس'

// src/app.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import {
+ AcceptLanguageResolver,
+ HeaderResolver,
  I18nModule,
  QueryResolver,
} from 'nestjs-i18n';
import * as path from 'path';
// ...

@Module({
  imports: [
    // ...
    I18nModule.forRoot({
      fallbackLanguage: 'en',
      loaderOptions: {
        path: path.join(__dirname, '/locales/'),
        watch: true,
      },
      resolvers: [
        new QueryResolver(['lang']),
+       AcceptLanguageResolver,
+       new HeaderResolver(['x-lang']),
      ],
    }),
    // ...
  ],
  controllers: [AppController],
  providers: [],
})
export class AppModule {}

// src/app.controller.ts

import { Controller, Get, Redirect } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Redirect('/info', 301)
  getRoot() {}
}

// src/app.controller.ts

  import {
    Controller,
    Get,
+   Query,
+   Res,
  } from '@nestjs/common';
+ import { Response } from 'express';

  @Controller()
  export class AppController {
    @Get()
    getRoot(
+     @Query() query: Record<string, any>,
+     @Res() res: Response,
    ) {
+     // copy original query params
+     const queryParams = new URLSearchParams(
+       query,
+     ).toString();
+     return res.redirect(302, `/info?${queryParams}`);
    }
  }

// src/app.module.ts

// ...

@Module({
  imports: [
    // ...
    I18nModule.forRoot({
      //...
      resolvers: [
        new QueryResolver(['lang']),
        AcceptLanguageResolver,
        new HeaderResolver(['x-lang']),
      ],
+     typesOutputPath: path.join(
+       __dirname,
+       '../src/generated/i18n.generated.ts',
+     ),
    }),
    // ...
  ],
  controllers: [AppController],
  providers: [],
})
export class AppModule {}

// .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  //...
  env: {
    node: true,
    jest: true,
  },
+ ignores: ['src/generated/i18n.generated.ts'],
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    // ...
  },
};

// src/generated/i18n.generated.ts

/* DO NOT EDIT, file generated by nestjs-i18n */

/* eslint-disable */
/* prettier-ignore */
import { Path } from "nestjs-i18n";
/* prettier-ignore */
export type I18nTranslations = {
    "common": {
        "about": string;
    };
};
/* prettier-ignore */
export type I18nPath = Path<I18nTranslations>;

// src/yc-i18n/yc-i18n.service.ts

  import { Injectable } from '@nestjs/common';
  import { I18nContext, I18nService } from 'nestjs-i18n';
+ import {
+   I18nPath,
+   I18nTranslations,
+ } from 'src/generated/i18n.generated';

  @Injectable()
  export class YcI18nService {
    constructor(
-     private readonly i18n: I18nService,
+     private readonly i18n: I18nService<I18nTranslations>,
    ) {}

-   t(key: string, options?: Record<string, any>) {
+   t(key: I18nPath, options?: Record<string, any>) {
      const lang = I18nContext.current().lang;
      return this.i18n.translate(key, { lang, ...options });
    }
  }

// src/locales/en/routes.json

{
  "posts": {
    "index": "Index of all posts"
  }
}

// src/locales/ar/routes.json

{
  "posts": {
    "index": "فهرس جميع المشاركات"
  }
}

i18n.t('routes.posts.index');

// When active locale is `en`
// => 'Index of all posts'

// When active loclae is `ar`
// => 'فهرس جميع المشاركات'

// src/locales/en/common.json

{
  "greeting": "Hello, {username} 👋",
}

// src/locales/ar/common.json

{
  "greeting": "مرحبا {username} 👋",
}

i18n.t("common.greeting", { args: { username: "Noor" } });

// When active locale is `en`
// => "Hello, Noor 👋"
// When active locale is `ar`
// => "مرحبا Noor 👋"

// src/locales/en/today.json

{
  "plannedRun": {
    "one": "Running a kilometer today",
    "other": "Running {count} kilometers today",
    "zero": "Resting today"
  }
}

// src/locales/ar/today.json

{
  "plannedRun": {
    "zero": "مستريح اليوم",
    "one": "سأجري كيلومتر واحد اليوم",
    "two": "سأجري كيلومترين اليوم",
    "few": "سأجري {count} كيلومترات اليوم",
    "many": "سأجري {count} كيلومتراً اليوم",
    "other": "سأجري {count} كيلومتر اليوم"
  }
}

// src/today/today.controller.ts

  import { Controller, Get } from '@nestjs/common';
+ import { YcI18nService } from 'src/yc-i18n/yc-i18n.service';

  @Controller('today')
  export class TodayController {
+   constructor(private readonly i18n: YcI18nService) {}

    @Get()
    getTodayInfo() {
      return {
-       plannedRun: 'Running 4 kilometers today',
+       plannedRun: this.i18n.t('today.plannedRun', {
+         args: { count: 2 },
+       }),
      };
    }
  }

// src/posts/entities/post.entity.ts

import {
  Column,
  Entity,
  PrimaryGeneratedColumn,
} from 'typeorm';

@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
- title: string;
+ title_en: string;

+ @Column({ nullable: true })
+ title_ar: string;

  @Column()
- content: string;
+ content_en: string;

+ @Column({ nullable: true })
+ content_ar: string;
}

// src/posts/dto/create-post.dto.ts

  import {
    IsNotEmpty,
+   IsOptional,
    IsString,
    Length,
  } from 'class-validator';

  export class CreatePostDto {
    @IsString()
    @IsNotEmpty()
    @Length(1, 255)
-   title: string;
+   title_en: string;

+   @IsOptional()
+   @IsString()
+   @Length(1, 255)
+   title_ar: string;

    @IsString()
    @IsNotEmpty()
-   content: string;
+   content_en: string;

+   @IsOptional()
+   @IsString()
+   @Length(1, 255)
+   content_ar: string;
  }

// src/yc-i18n/yc-i18n.service.ts

  import { Injectable } from '@nestjs/common';
  import { I18nContext, I18nService } from 'nestjs-i18n';
  import {
    I18nPath,
    I18nTranslations,
  } from 'src/generated/i18n.generated';

+ export type SupportedLang = 'en' | 'ar';
+ export const defaultLang: SupportedLang = 'en';

  @Injectable()
  export class YcI18nService {
    constructor(
      private readonly i18n: I18nService<I18nTranslations>,
    ) {}

    t(key: I18nPath, options?: Record<string, any>) {
      return this.i18n.translate(key, {
        lang: this.lang(),
        ...options,
      });
    }

+   lang(): SupportedLang {
+     return (I18nContext.current()?.lang ||
+       defaultLang) as SupportedLang;
+   }
  }

// src/posts/posts.service.ts

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { YcI18nService } from 'src/yc-i18n/yc-i18n.service';
import { Repository } from 'typeorm';
import { CreatePostDto } from './dto/create-post.dto';
import { UpdatePostDto } from './dto/update-post.dto';
import { Post } from './entities/post.entity';

export type TranslatedPostSummary = {
  id: number;
  title: string;
};

export type TranslatedPost = {
  id: number;
  title: string;
  content: string;
};

@Injectable()
export class PostsService {
  constructor(
    @InjectRepository(Post)
    private postRepo: Repository<Post>,
    private readonly i18n: YcI18nService,
  ) {}

  async findAll(): Promise<TranslatedPostSummary[]> {
    const lang = this.i18n.lang();

    const post = await this.postRepo.find({
      select: ['id', `title_${lang}`],
    });

    return post.map((p) => ({
      id: p.id,
      title: p[`title_${lang}`],
    }));
  }

  async findOne(
    id: number,
  ): Promise<TranslatedPost | null> {
    const lang = this.i18n.lang();

    const post = await this.postRepo.findOne({
      select: ['id', `title_${lang}`, `content_${lang}`],
      where: { id },
    });

    if (!post) {
      return null;
    }

    return {
      id: post.id,
      title: post[`title_${lang}`],
      content: post[`content_${lang}`],
    };
  }

  // Our create/update/delete methods are
  // unchanged...

  create(createPostDto: CreatePostDto): Promise<Post> {
    return this.postRepo.save({ ...createPostDto });
  }

  async update(
    id: number,
    updatePostDto: UpdatePostDto,
  ): Promise<Post | null> {
    const post = await this.postRepo.findOneBy({ id });

    if (post) {
      return this.postRepo.save({
        ...post,
        ...updatePostDto,
      });
    }

    return null;
  }

  async remove(id: number): Promise<boolean> {
    const post = await this.postRepo.findOneBy({ id });

    if (!post) {
      return false;
    }

    await this.postRepo.remove(post);

    return true;
  }
}

// src/main.ts

  import { NestFactory } from '@nestjs/core';
+ import {
+   I18nValidationExceptionFilter,
+   I18nValidationPipe,
+ } from 'nestjs-i18n';
  import { AppModule } from './app.module';

  async function bootstrap() {
    const app = await NestFactory.create(AppModule);
+   app.useGlobalPipes(new I18nValidationPipe());
+   app.useGlobalFilters(
+     new I18nValidationExceptionFilter({
+       detailedErrors: true,
+     }),
+   );
    await app.listen(3000);
  }
  bootstrap();

// src/locales/en/validation.json

{
  "required": "Please provide a value for `{property}`",
  "length": "`{property}` must be between {constraints.0} and {constraints.1} characters",
  "string": "`{property}` must be a string; you provided {value}"
}

// src/locales/ar/validation.json

{
  "required": "يرجى تقديم قيمة لـ `{property}`",
  "length": "يجب أن يكون عدد أحرف `{property}` بين {constraints.0} و {constraints.1}.",
  "string": "`{property}` يجب أن تكون سلسلة (string) ؛ لقد قدمت {value}"
}

// src/posts/dto/create-post.dto.ts

  import {
    IsNotEmpty,
    IsOptional,
    IsString,
    Length,
  } from 'class-validator';
+ import { i18nValidationMessage } from 'nestjs-i18n';

  export class CreatePostDto {
-   @IsString()
+   @IsString({ message: 'validation.string' })
-   @Length(1, 255)
+   // 1 and 255 are constraints we want passed to
+   // the validation message, so we use
+   // `i18nValidationMessage` here.
+   @Length(1, 255, {
+     message: i18nValidationMessage('validation.length'),
+   })
    title_en: string;

    @IsOptional()
-   @IsString()
+   @IsString({ message: 'validation.string' })
-   @Length(1, 255)
+   @Length(1, 255, {
+     message: i18nValidationMessage('validation.length'),
+   })
    title_ar: string;

-   @IsString()
+   @IsString({ message: 'validation.string' })
-   @IsNotEmpty()
+   @IsNotEmpty({ message: 'validation.required' })
    content_en: string;

    @IsOptional()
-   @IsString()
+   @IsString({ message: 'validation.string' })
-   @Length(1, 255)
+   @Length(1, 255, {
+     message: i18nValidationMessage('validation.length'),
+   })
    content_ar: string;
  }

The post A Guide to NestJS Localization appeared first on Phrase.

ChatGPT famously reached 100 million monthly active users two months after its launch, shattering adoption records. The LLM (Large Language Model) has taken the world by storm and excels at generating certain kinds of content, code being chief among them. However, utilizing the chatbot to extract quality code takes time and effort. In this guide, we walk through localizing a React demo app with the popular i18next library, sitting side-by-side with ChatGPT as we prompt and iterate to get the best code possible.

Versions used

The demo app we’ll build in this guide uses the following NPM packages. We’ll install them as needed (some will be pre-installed in the starter project).

Package	Version	Notes
Vite	5.1	Build tool and bundler
React	18.2	UI library
React Router	6.22	Used for multi-page routing
Prop Types	15.8	React component props validation
Tailwind CSS	3.4.1	Styling framework
i18next	23.10	Popular i18n library
react-i18next	14.1	React extensions for i18next
i18next-http-backend	2.5	Loads translations from network
i18next-browser-languagedetector	7.2	Detects user’s preferred locales

A note on ChatGPT versions

To generate build plans, design, and code, we’ve used ChatGPT 4. ChatGPT 4 is a paid service at the time of writing, but you can work along with the free Chat GPT 3.5 if you like. However, there are significant differences between GPT 3.5 and 4, so your mileage may vary.

🗒️ Note » We used The Professional Code (Auto programming) custom GPT, which prompts ChatGPT to act like a professional software developer. The custom GPT was taken down as we published the article. You don’t have to use the custom GPT, however. Plain vanilla ChatGPT will work fine for our purposes.

Our demo

We have a little app to localize in this guide. The fictional Migrant Taco is a forum for fans of EDM (electronic dance music).

🗒️ Note » We don’t implement any CRUD functionality since we want to focus on the i18n here.

🗒️ Note » We scaffolded the project using the Vite React template, which installed Vite and React.

The starter app (before localization) has the following file structure.

.
├── public
│   └── assets
│       ├── hot-albums.json
│       └── trending-posts.json
└── src
    ├── components
    │   ├── AlbumCard.jsx
    │   ├── Navbar.jsx
    │   └── PostTeaser.jsx
    ├── hooks
    │   ├── use-fetch.js
    │   ├── use-hot-albums.js
    │   └── use-trending-posts.js
    ├── pages
    │   ├── HomePage.jsx
    │   ├── HotAlbums.jsx
    │   └── TrendingPosts.jsx
    ├── App.jsx
    └── main.jsx

// public/assets/hot-albums.json
[
  {
    "id": 1,
    "title": "Euphoric Nights",
    "artist": "DJ Pulse",
    "coverUrl": "https://picsum.photos/id/100/300/300",
    "releaseDate": "2024-02-15"
  },
  {
    "id": 2,
    "title": "Bass in the Shadows",
    "artist": "Bass Master",
    "coverUrl": "https://picsum.photos/id/101/300/300",
    "releaseDate": "2024-03-01"
  },
  // ...
]

// public/assets/trending-posts.json
[
  {
    "id": 1,
    "title": "Top 10 EDM Tracks of 2024",
    "excerpt": "Discover the tracks that are setting the stage on fire in 2024.",
    "author": "DJ Reviewer",
    "date": "2024-02-20"
  },
  {
    "id": 2,
    "title": "The Evolution of EDM Festivals",
    "excerpt": "A deep dive into how EDM festivals have transformed over the years.",
    "author": "Festival Historian",
    "date": "2024-03-05"
  },
  // ...
]

// src/hooks/use-hot-albums.js

// Handles JSON file fetching and error handling
import useFetch from "./use-fetch";

const useHotAlbums = (limit = null) => {
  const { data, loading, error } = useFetch(
    "/assets/hot-albums.json"
  );
  
  const albums =
    data && limit ? data.slice(0, limit) : data;
    
  return { albums, loading, error };
};

export default useHotAlbums;

// src/pages/HomePage.jsx

import { Link } from "react-router-dom";
import AlbumCard from "../components/AlbumCard";
import PostTeaser from "../components/PostTeaser";
import useHotAlbums from "../hooks/use-hot-albums";
import useTrendingPosts from "../hooks/use-trending-posts";

const HomePage = () => {
  const {
    albums,
    loading: loadingAlbums,
    error: errorAlbums,
  } = useHotAlbums(3);

  const {
    posts,
    loading: loadingPosts,
    error: errorPosts,
  } = useTrendingPosts(4);

  if (loadingAlbums || loadingPosts)
    return <div>Loading...</div>;
    
  if (errorAlbums || errorPosts)
    return <div>Error loading data</div>;

  return (
    <div className="...">
      <section>
        <h2 className="...">
          Hot Albums
        </h2>
        <div className="...">
          {albums.map((album) => (
            <AlbumCard key={album.id} album={album} />
          ))}
        </div>
        <div className="...">
          <Link to="/hot-albums" className="...">
            View all 9 albums
          </Link>
        </div>
      </section>
      <section>
        <h2 className="...">
          Trending Posts
        </h2>
        <div className="...">
          {posts.map((post) => (
            <PostTeaser key={post.id} post={post} />
          ))}
        </div>
        <div className="...">
          <Link to="/trending-posts" className="...">
            View all 9 posts
          </Link>
        </div>
      </section>
    </div>
  );
};

export default HomePage;

// src/App.jsx

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import HomePage from "./pages/HomePage";
import HotAlbums from "./pages/HotAlbums";
import TrendingPosts from "./pages/TrendingPosts";
import Navbar from "./components/Navbar";

const App = () => {
  return (
    <Router>
      <div className="...">
        <Navbar />
        <main className="...">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route
              path="/hot-albums"
              element={<HotAlbums />}
            />
            <Route
              path="/trending-posts"
              element={<TrendingPosts />}
            />
          </Routes>
        </main>
      </div>
    </Router>
  );
};

export default App;

Hello, I have a small website made with React, Vite,
react-router, and Tailwind CSS. I would like to
internationalize this site and localize it to English
(en) and Arabic (ar), with the option to add more
locales in the future. I want to use the react-i18next
library to do this. What are the steps I should take?
Please outline a general plan. Don't generate any code.
Output the plan in a way that I can easily copy and paste,
please.

To internationalize and localize a React website with
react-i18next for English and Arabic, ensuring future
scalability:

1. Install Dependencies: Include react-i18next,
i18next, and possibly i18next-browser-languagedetector for
automatic language detection.

2. Configuration: Set up a `locales` directory in `src`,
with subfolders for each language (e.g., en, ar),
containing `translation.json` files for key-value pairs.

3. Initialize react-i18next: In `src`, create `i18n.js`
to configure i18next with locale details, a fallback
language, and plugins like the language detector.

4. Integration with React: Use I18nextProvider or
useTranslation hook for translation function access.
Replace strings with translation keys using `t` function,
and change languages with `i18next.changeLanguage`.

5. RTL Layout for Arabic: Utilize Tailwind CSS's RTL
support by adding `dir="rtl"` to the root element for
Arabic.

[//]: # (omitting rest of response for brevity...)

Let's add the following to the plan:
- Loading translation files asynchronously from
  the network using the official i18next plugin
  to do so
- Localizing routes so that /en/foo loads the
  foo English page and /ar/foo load the same
  page in Arabic (foo is an example route here,
  of course)

Please output the updated plan.

6. Localizing Routes: Configure react-router for routes
with language codes (e.g., /en/foo), dynamically update
i18next's language on navigation, and adjust UI and
language files accordingly.

OK, let's move on to Step 1. Please walk me through
this step and show me the code.

npm install react-i18next i18next i18next-http-backend i18next-browser-languagedetector

Wonderful :) Let's go through step 2, please. Show me the code.

2. Setting Up Translation Resources:

- Create a `locales` directory in your project's `src`
folder, and inside it, make subdirectories for each
language (e.g., `en`, `ar`).

- In each language subdirectory, add a `translation.json`
file containing translation key-value pairs.

- Use your IDE or file explorer to create and edit these
directories and files, ensuring key consistency across
languages for seamless translation.

ChatGPT gave us a helpful file hierarchy and example translation JSON. However, the AI made a mistake we didn’t immediately catch: It told us to create our locales directory under src. We wanted to load our translations from the network using i18next’s HTTP loader, so locales needed to go under the public directory. We asked ChatGPT to correct this and it generated an updated hierarchy:

🗒️ Note » We started prompting ChatGPT assuming we would use en-US and ar-EG for supported locales. We later changed this to en and ar, so if you see any disparity know that we landed on the latter set.

Generated code: setting up i18next

A quick prompt to move to step 3 of the build plan, setting up i18next, got ChatGPT generating its first block of production code.

// src/i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpBackend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  // Load translation using http -> see /public/locales.
  // We will serve our locales directory as a static asset
  .use(HttpBackend)
  // Detect user language
  .use(LanguageDetector)
  // Pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // Initialize i18next
  .init({
    // The lng and fallbackLng options define your
    // application's default language and fallback language
    // in case the user's language can't be detected or
    // isn't supported.
    fallbackLng: "en",
    // if you're using a language detector, you can remove
    // this line
    lng: "en",
    detection: {
      // Order and from where user language should be
      // detected. Here we list possible options for
      // detection.
      order: [
        "querystring",
        "cookie",
        "localStorage",
        "sessionStorage",
        "navigator",
        "htmlTag",
        "path",
        "subdomain",
      ],
      // Keys or params to lookup language from
      lookupQuerystring: "lng",
      lookupCookie: "i18next",
      lookupLocalStorage: "i18nextLng",
      // Cache user language on
      caches: ["localStorage", "cookie"],
      // Exclude cache for specific languages
      // languages to not persist (cookie, localStorage)
      excludeCacheFor: ["cimode"],
    },
    // Path where resources get loaded from, or a function
    // returning a path:
    // function(lngs, namespaces) { return customPath; }
    // The function receives the lngs and namespaces as
    // the arguments (in case you need to load languages
    // and namespaces dynamically).The returned path will
    // interpolate lng, ns if provided like giving a static
    // path.
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json",
    },
    // Have a common namespace used around the full app
    ns: ["translation"],
    defaultNS: "translation",

    // Boolean or function to enable/disable adding keys
    // not found in translation to backend
    saveMissing: true,

    // Set to true if you're using a language detector
    debug: true,

    interpolation: {
      // Not needed for React as it escapes by default
      escapeValue: false,
    },
  });

export default i18n;

// src/i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpBackend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

// src/main.jsx

  import React from "react";
  import ReactDOM from "react-dom/client";
  import App from "./App.jsx";
  import "./index.css";
+ import "./i18n.js";

  ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );

// Example from ChatGPT

import React from 'react';
import './App.css';
import './i18n'; // Import i18n configuration
import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div className="App">
      <header className="App-header">
        {t('welcomeMessage')}
      </header>
    </div>
  );
}

export default App;

// public/locales/en/translation.json
{
  "appName": "Migrant Taco",
  "nav": {
    "home": "Home",
    "hotAlbums": "Hot Albums",
    "trendingPosts": "Trending Posts"
  }
}

// public/locales/ar/translation.json
{
  "appName": "ميجرانت تاكو",
  "nav": {
    "home": "الرئيسية",
    "hotAlbums": "الألبومات الساخنة",
    "trendingPosts": "المنشورات الرائجة"
  }
}

// src/components/Navbar.jsx
+ import { useTranslation } from "react-i18next";
  import { Link } from "react-router-dom";

  const Navbar = () => {
+   const { t } = useTranslation();

    return (
      <nav className="...">
        <div className="...">
          <h1 className="...">
-           Migrant Taco
+           {t("appName")}
          </h1>
          <ul className="...">
            <li>
              <Link to="/" className="...">
-               Home
+               {t("nav.home")}
              </Link>
            </li>
+          <!-- Localize other link text... -->
          </ul>
        </div>
      </nav>
    );
  };

  export default Navbar;

After the update, switching our locale to ar revealed our Navbar in Arabic.

🗒️ Note » To quickly test a locale when developing, set lng: "ar" in the i18n.init() options (found in the src/i18n.js file). Note that when using the language detector plugin, this will cause the set language to be stored in your local storage to be used in future visits. Deleting the local storage entry should start you fresh when testing.

🔗 Resource »  Get the full code for the Navbar component from GitHub.

The language switcher

Although not part of the build plan, we wanted to add a language switcher UI to our app. Even though the language detector plugin will try to match the user’s preferred locales (set in her browser) to our app’s locales, we often want to provide a manual override for the user.

The prompt

We prompted ChatGPT to generate the code for the switcher:

Please generate the locale switcher. Use a
`<select>` dropdown instead of buttons. Use
Tailwind CSS styles to style the `<select>`. 
Give the component a background of bg-gray-200
and text-slate-900. Keep in mind that I want to
place the localeswitcher into this navbar:

[//]: # (pasted code for Navbar component)

// LocaleSwitcher.js
import React from 'react';
import { useTranslation } from 'react-i18next';

const LocaleSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (event) => {
    i18n.changeLanguage(event.target.value);
  };

  return (
    <select
      onChange={changeLanguage}
      value={i18n.language}
      className="bg-gray-200 text-slate-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
    >
      <option value="en">English</option>
      <option value="ar">العربية</option>
    </select>
  );
};

export default LocaleSwitcher;

// src/components/LocaleSwitcher.jsx

  import { useTranslation } from "react-i18next";

  const LocaleSwitcher = () => {
    const { i18n } = useTranslation();

    const changeLanguage = (event) => {
      i18n.changeLanguage(event.target.value);
    };

    return (
      <select
        onChange={changeLanguage}
-       value={i18n.language}
+       value={i18n.resolvedLanguage}
        className="..."
      >
        <option value="en">English</option>
        <option value="ar">العربية</option>
      </select>
    );
  };

  export default LocaleSwitcher;

I have text in my app that reads "View all
9 albums". The 9 here is a dynamic value
known at runtime. How do I localize this
text?

- Add translation keys with placeholders for dynamic values
in your JSON files (e.g., `"viewAllAlbums": "View all
{{count}} albums"`).

- Use the `t` function with interpolation to insert dynamic
values (e.g., `{t('viewAllAlbums', { count: albumCount })}`).

- For pluralization, define singular and plural keys in your
translation files. `react-i18next` automatically selects the
appropriate form based on the count.

{
  "viewAllAlbums": "View all {{count}} album",
  "viewAllAlbums_plural": "View all {{count}} albums"
}

How do I handle Arabic pluralization in
my translations?

{
  "viewAllAlbums_zero": "لم يتم عرض الألبومات",
  "viewAllAlbums_one": "عرض البوم واحد",
  "viewAllAlbums_two": "عرض البومان",
  "viewAllAlbums_few": "عرض {{count}} ألبومات",
  "viewAllAlbums_many": "عرض {{count}} ألبوم",
  "viewAllAlbums_other": "عرض كل {{count}} ألبوم"
}

// public/locales/en/translation.json
{
  "appName": "Migrant Taco",
  //...
  "home": {
    "viewAllAlbums_one": "View {{count}} album",
    "viewAllAlbums_other": "View {{count}} albums",
  },
  // ...
}

// src/pages/HomePage.jsx

  import { Link } from "react-router-dom";
  // ...
+ import { useTranslation } from "react-i18next";

  const HomePage = () => {
+   const { t } = useTranslation();

    // ...

    return (
      <div className="...">
        <section>
          {/* ... */}
          <div className="...">
            <Link to="/hot-albums" className="...">
-             View all 9 albums
+             {t("home.viewAllAlbums", { count: 9 })}
            </Link>
          </div>
        </section>
        {/* ... */}
      </div>
    );
  };

  export default HomePage;

// public/locales/ar/translation.json
{
  "appName": "ميجرانت تاكو",
  // ...
  "home": {
    // ...
    "viewAllAlbums_zero": "لا توجد ألبومات",
    "viewAllAlbums_one": "عرض البوم واحد",
    "viewAllAlbums_two": "عرض البومان",
-   "viewAllAlbums_few": "عرض {{count}} ألبومات",
+   "viewAllAlbums_few": "عرض {{count, number}} ألبومات",
-   "viewAllAlbums_many": "عرض {{count}} ألبوم",
+   "viewAllAlbums_many": "عرض {{count, number}} ألبوم",
-   "viewAllAlbums_other": "عرض {{count}} ألبوم",
+   "viewAllAlbums_other": "عرض {{count, number}} ألبوم",
    // ...
  },
  // ...
}

- Prefix routes with language codes (e.g., `/en/about`).

- Update react-router to capture language codes from URLs and
set the active language in i18next.

- Use a wrapper component or hook to set i18next's language
based on the route's lang parameter.

- Ensure links include the current language code in the URL,
possibly using a helper function or custom link component.

- Provide a method for users to switch languages, updating
the URL and content to the selected language.

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
// Import other components and pages as needed

const App = () => {
  const { i18n } = useTranslation();

  return (
    <Router>
      <Routes>
        <Route path="/:lang" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="about" element={<AboutPage />} />
          // Define other nested routes
        </Route>
      </Routes>
    </Router>
  );
};

export default App;

// src/components/LocalizedLink.jsx

import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

const LocalizedLink = ({ to, ...props }) => {
  const { i18n } = useTranslation();
  const lang = i18n.language;

  return <Link to={`/${lang}${to}`} {...props} />;
};

// src/components/LocaleWrapper.jsx

import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

const LocaleWrapper = ({ children }) => {
  const { lang } = useParams();
  const { i18n } = useTranslation();

  useEffect(() => {
    if (lang) {
      i18n.changeLanguage(lang);
    }
  }, [lang, i18n]);

  return children;
};

export default LocaleWrapper;

- I don't have a `<Layout>` element in my app; I'd like to use
something "blank" here instead
- How does the `:lang` param get initialized on first load?
- How do I use the [LocaleWrapper] component in my app?

Please provide detailed code for the localized routes
solution with accommodation for the above.

// src/components/LocaleWrapper.jsx

import React, { useEffect } from "react";
import { useParams, Navigate } from "react-router-dom";
import { useTranslation } from "react-i18next";

const LocaleWrapper = ({ children }) => {
  const { lang } = useParams();
  const { i18n } = useTranslation();

  useEffect(() => {
    // If there's a lang param and it's different
    // from the current language, update it
    if (lang && i18n.language !== lang) {
      // Extend this list as needed
      const supportedLanguages = ["en", "ar"];
      const fallbackLanguage = "en";
      const newLang = supportedLanguages.includes(lang)
        ? lang
        : fallbackLanguage;
      i18n.changeLanguage(newLang);
    }
  }, [lang, i18n]);

  // Redirect to a default language route if no
  // lang param is present
  if (!lang) {
    const detectedLang = i18n.language || "en";
    return <Navigate to={`/${detectedLang}`} replace />;
  }

  return <>{children}</>;
};

export default LocaleWrapper;

// src/components/RootRedirect.jsx

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";

const RootRedirect = () => {
  const navigate = useNavigate();
  const { i18n } = useTranslation();

  useEffect(() => {
    // Determine the default or detected language
    const defaultOrDetectedLang = i18n.language || "en";
    // Redirect to the route with the default or detected language
    navigate(`/${defaultOrDetectedLang}`, {
      replace: true,
    });
  }, [navigate, i18n.language]);

  return null;
};

export default RootRedirect;

// src/App.jsx

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
import HomePage from "./pages/HomePage";
import HotAlbums from "./pages/HotAlbums";
import TrendingPosts from "./pages/TrendingPosts";
import Navbar from "./components/Navbar";
import LocaleWrapper from "./components/LocaleWrapper";
import RootRedirect from "./components/RootRedirect";

const App = () => {
  return (
    <Router>
      <div className="...">
        <Navbar />
        <main className="...">
          <Routes>
           <Route path="/" element={<RootRedirect />} />

           <Route
             path="/:lang"
             element={<LocaleWrapper />}
            >
              <Route index element={<HomePage />} />
              <Route
                path="hot-albums"
                element={<HotAlbums />}
              />
              <Route
                path="trending-posts"
                element={<TrendingPosts />}
              />
            </Route>
          </Routes>
        </main>
      </div>
    </Router>
  );
};

export default App;

// src/components/LocaleWrapper.jsx

  import { useEffect } from "react";
  import {
    useParams,
    Navigate,
+   Outlet,
  } from "react-router-dom";
  import { useTranslation } from "react-i18next";
  import { supportedLngs, fallbackLng } from "../i18n";

- const LocaleWrapper = ({ children} ) => {
+ const LocaleWrapper = () => {
    const { lang } = useParams();
    const { i18n } = useTranslation();

    useEffect(() => {
      // ...
    }, [lang, i18n]);

-   // While we're at it, let's remove this redirection
-   // logic that ChatGPT generated. Our `<RootRedirect>`
-   // component is already taking care of this. 
-   if (!lang) {
-     const detectedLang = i18n.language || fallbackLng;
-     return <Navigate to={`/${detectedLang}`} replace />;
-   }

-   return <>{children}</>;
+   return <Outlet />;
  };

  export default LocaleWrapper;

This fixed the rendering error.

🗒️ Note » We had to iterate further with ChatGPT to ensure that routes without locales redirect to localized routes e.g. /trending-posts → /en/trending-posts. We also wanted to address the 404 Not Found case. ChatGPT was able to help us solve these problems, and you can see the final code in our GitHub repo.

🔗 Resource » We continued with ChatGPT, localizing dates, numbers, and more. See the complete project on GitHub.

🔗 Resource » You can view the entire conversation with ChatGPT on GitHub. Go to the conversation directory and run npx serve .

🔗 Resource » We wanted to focus on working with ChatGPT in this tutorial. We have a complete tutorial for React and i18next if you want to dive deeper.

Key takeaways

Working with ChatGPT to generate code can be both frustrating and rewarding. A few important practices can increase our chances of success:

• Know your stuff! — Think of ChatGPT as a junior friend with incredibly wide-reaching knowledge. You must know your tech well to guide it to an appropriate solution. Otherwise, you’re at the mercy of whatever it generates, for better or worse.
• Create a plan (without code) — Before solving a complex problem, prompt ChatGPT to give you a step-by-step plan without any code. This chain of thought prompt will reveal the AI’s approach to your problem early and highlight any misunderstandings that could create problems.
• Give appropriate context — ChatGPT knows all about React, i18next, and many other popular technologies. However, it doesn’t know your app and how you want it to work. Give the AI enough details to guide it.
• Verify! — ChatGPT will hallucinate and make mistakes; it doesn’t always know the latest versions of libraries you’re using. Make sure to review and test the code it gives you thoroughly.
• Iterate — When you don’t get exactly what you want, tell ChatGPT and ask it to help with your specific issues.

Wrapping up

We hope you enjoyed this adventure in coding with an LLM. And we hope you learned a thing or two. Stay tuned for more software localization tutorials. Happy coding.

The post Software Localization with ChatGPT appeared first on Phrase.

const date = new Date("2024-01-27T14:00:00Z");
const formatter = new Intl.DateTimeFormat();

formatter.format(date);
// => 1/27/2024

const date = new Date("2024-01-27T14:00:00Z");

// We use `date.toLocaleDateString("en-US")` for
// the examples below. This is a shortcut for
// `new Intl.DateTimeFormat("en-US").format(date)`
// See 🗒️ below for more info.

// English-America
date.toLocaleDateString("en-US");
// => "1/27/2024"

// Arabic-Egypt
date.toLocaleDateString("ar-EG");
// => "٢٧‏/١‏/٢٠٢٤"

// Hindi-India
date.toLocaleDateString("hi-IN");
// => "27/1/2024"

// Russian-Russia
date.toLocaleDateString("ru-RU");
// => "27.01.2024"

// Chinese-China
date.toLocaleDateString("zh-CN");
// => "2024/1/27"

// Japanese-Japan
date.toLocaleDateString("jp-JP");
// => "2024-01-27"

// Date object with time of 2 PM UTC
const date = new Date("2024-01-27T14:00:00Z");

// The below calls to
// `date.ToLocaleTimeString(...)` are equivalent to
// `new Intl.DateTimeFormat("en-US", {
//    timeZone: "UTC",
//    timeStyle: "medium",
//  }).format(date)`
// See 🗒️ below for more info.

// English-America
date.toLocaleTimeString("en-US", { timeZone: "UTC" });
// => "2:00:00 PM"

// Arabic-Egypt
date.toLocaleTimeString("ar-EG", { timeZone: "UTC" });
// => "٢:٠٠:٠٠ م"

// Hindi-India
date.toLocaleTimeString("hi-IN", { timeZone: "UTC" });
// => "2:00:00 pm"

// Russian-Russia
date.toLocaleTimeString("ru-RU", { timeZone: "UTC" });
// => "14:00:00"

// Chinese-China
date.toLocaleTimeString("zh-CN", { timeZone: "UTC" });
// => "14:00:00"

// Japanese-Japan
date.toLocaleTimeString("jp-JP", { timeZone: "UTC" });
// => "2:00:00 p.m."

const date = new Date("2024-01-27T14:00:00Z");

const shortOptions = {
  timeZone: "UTC",
  dateStyle: "short",
  timeStyle: "short",
};

// English-America
new Intl.DateTimeFormat("en-US", shortOptions)
  .format(date);
// => "1/27/24, 2:00 PM"

// Arabic-Egypt
new Intl.DateTimeFormat("ar-EG", shortOptions)
  .format(date);
// => "٢٧‏/١‏/٢٠٢٤، ٢:٠٠ م"

// Chinese-China
new Intl.DateTimeFormat("zh-CN", shortOptions)
  .format(date);
// => "2024/1/27 14:00"

const fullOptions = {
  timeZone: "UTC",
  dateStyle: "full",
  timeStyle: "full",
};

// English-America
new Intl.DateTimeFormat("en-US", fullOptions)
  .format(date);
// => "Saturday, January 27, 2024 at 2:00:00 PM Coordinated Universal Time"

// Arabic-Egypt
new Intl.DateTimeFormat("ar-EG", fullOptions)
  .format(date);
// => "السبت، ٢٧ يناير ٢٠٢٤ في ٢:٠٠:٠٠ م التوقيت العالمي المنسق"

// Chinese-China
new Intl.DateTimeFormat("zh-CN", fullOptions).format(date);
// => "2024年1月27日星期六 协调世界时 14:00:00"

const date = new Date("2024-01-27T14:00:00Z");

const options = {
  timeZone: "UTC",
  timeZoneName: "short",
  year: "2-digit",
  month: "narrow",
  weekday: "short",
  day: "numeric",
  hourCycle: "h24",
  hour: "numeric",
  minute: "numeric",
};

// English-America
date.toLocaleDateString("en-US", options);
// => "Sat, J 27, 24, 14:00 UTC"

// Arabic-Egypt
date.toLocaleDateString("ar-EG", options);
// => "السبت، ٢٧ ي ٢٤، ١٤:٠٠ UTC"

// Hindi-India
date.toLocaleDateString("hi-IN", options);
// => "शनि, 27 ज 24, 14:00 UTC"

// Russian-Russia
date.toLocaleDateString("ru-RU", options);
// => "сб, 27 Я 24 г., 14:00 UTC"

// Chinese-China
date.toLocaleDateString("zh-CN", options);
// => "24年1月27日周六 UTC 14:00"

// Japanese-Japan
date.toLocaleDateString("jp-JP", options);
// => "Sat, J 27, 24, 14:00 UTC"

// Note how the `Date` object knows how to parse
// the ISO 8601 format. The following datetime
// includes 3:45 PM in the UTC +01:00 time
// zone.
const date = new Date("2024-02-27T15:45:00+01:00");

date.toLocaleString("en-US", {
  // Convert to target IANA `timeZone` when
  // formatting.
  timeZone: "America/New_York",
  dateStyle: "medium",
  timeStyle: "full",
});
// => "Feb 27, 2024, 9:45:00 AM Eastern Standard Time"

date.toLocaleString("en-US", {
  // Use the abbreviated time zone; this 
  // affects conversion as well as formatting. 
  timeZone: "EST",
  dateStyle: "medium",
  timeStyle: "full",
});
// => "Feb 27, 2024, 9:45:00 AM GMT-05:00"

// Format in Hindi-India and convert to 
// the Indian time zone.
date.toLocaleString("hi-IN", {
  timeZone: "Asia/Kolkata",
  dateStyle: "medium",
  timeStyle: "full",
});
// => "27 फ़र॰ 2024, 8:15:00 pm भारतीय मानक समय"

// Chinese-China in the Shanghai time zone.
date.toLocaleString("zh-CH", {
  timeZone: "Asia/Shanghai",
  dateStyle: "medium",
  timeStyle: "full",
})
// => "2024年2月27日 中国标准时间 22:45:00"

Calendars

While the Gregorian calendar — Jan, Feb, etc. —  is ubiquitous, there are many regional and cultural calendars used all over the world. This is important when localizing, since some calendars, like the Islamic, Persian, and Buddhist calendars are used on a day-to-day basis. Indeed, certain regions use a non-Gregorian calendar as the default.

Some of these calendars serve cultural purposes. Some are solar, others are lunar, and each has its starting year.

Here are some examples of regions that use non-Gregorian calendars as their default:

const date = new Date("2024-01-27T14:00:00Z");

// Arabic Saudi-Arabia;
// converts to the Islamic Hijri calendar.
date.toLocaleDateString("ar-SA");
// => "١٥‏/٧‏/١٤٤٥ هـ"

// We can provide the calendar as a
// manual override formatting option.
date.toLocaleDateString("en-US", { calendar: "islamic" })
// => "7/16/1445 AH"

// Persian-Iran;
// converts to the Persian calendar.
date.toLocaleDateString("fa-IR");
// => "۱۴۰۲/۱۱/۷"

date.toLocaleDateString("en-US", { calendar: "persian" });
// => "11/7/1402 AP"

// Thai-Thailand;
// converts to the Buddhist calendar.
date.toLocaleDateString("th-TH");
// => "27/1/2567"

<input type="date">

 

🔗 Learn more from the MDN date input entry.

<input type="time">

🔗 Learn more from the MDN time input entry.

To combine both date and time, can use the the datetime-local input.

<input type="datetime-local">

 

🔗 Learn more from the MDN datetime-local input entry.

Unfortunately, the native browser pickers seem stuck on Gregorian calendars, with no manual or automatic localization switching to other calendars. To get truly localizable date pickers in our web apps, we have to roll our own or use a library like react-dates (for React).

 

If you’re working on an operating system platform, like Android or iOS, you’ll find their native date pickers automatically localize their numeral systems, text labels, and layout direction per the user’s language. They might still largely stick to the Gregorian calendar, however.

🔗 How to Localize Date and Time Formats in Android is a deep dive into the subject.

Wrapping up: Key takeaways in date and time localization

As we conclude our exploration of localizing dates and times, we hope that you can see that this aspect of localization is more than a mere afterthought — it’s a cornerstone of creating truly global and inclusive applications.

Here are the key takeaways from this guide:

• Determine the user’s locale: Identifying the user’s locale is the first step in presenting dates and times that reflect their cultural and regional standards.
• Understand locale definitions: Recognize that a locale encompasses language, region, and sometimes additional nuances, influencing how dates and times should be formatted.
• Use native formatting libraries: Leverage native date formatting libraries, which automatically adjust to the user’s locale.
• Utilize default and custom formats: Whether adopting default formats or customizing them for complete control, be mindful of the locale’s conventions for representing dates and times (again libraries help a lot here).
• Account for time zones: Ensure that dates and times are correctly adjusted for the user’s location.
• Explore calendar diversity: Study the regions where you’re serving your app and see if they use local non-Gregorian calendars.
• Prefer accessible date and time pickers: Choose date and time pickers that support localization, at least showing numeral systems and writing in your user’s language and region. Ideally, show them their local default calendar.

Alright, we hope you’ve enjoyed this guide to date and time localization and learned a thing or two. Happy coding.

The post A Guide to Date and Time Localization appeared first on Phrase.

Phrase Strings

Take your web or mobile app global without any hassle

Adapt your software, website, or video game for global audiences with the leanest and most realiable software localization platform.

Explore Phrase Strings

.
└── pages
    ├── components
    │   └── Layout.tsx  # Wraps our pages
    ├── data
    │   └── posts.ts    # Mock blog post data
    ├── posts
    │   ├── [slug].tsx  # Single blog post
    │   └── index.tsx   # Blog post listing
    └── index.tsx       # Home page

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
+ i18n: {
+   locales: ["en-US", "ar-EG"], // required
+   defaultLocale: "en-US",      // required
+ },
};

module.exports = nextConfig;

// data/posts.ts

import type { Post } from "@/types";

export const posts: Post[] = [
  {
    slug: "marching-into-detention-area",
    date: "2023-11-10",
    translations: {
      "en-US": {
         title: "Marching into the...",
         content: "What an incredible...",
      },
      "ar-EG": {
         title: "إن الزحف إلى منطقة الاحتجاز لم...",
         content: "يا لها من رائحة مذهلة اكتشفتها...",
      },
    },
  },
  // ...
]

// pages/posts/[slug].tsx

import Layout from "@/components/Layout";
import { posts } from "@/data/posts";
import type { Post } from "@/types";
import type {
  GetStaticPaths,
  GetStaticProps,
  GetStaticPropsContext,
} from "next";
import Link from "next/link";
import { useRouter } from "next/router";

type SinglePostProps = {
  post: Post;
};

export const getStaticPaths: GetStaticPaths<{
  slug: string;
}> = () => {
  return {
    paths: posts.map((post) => ({
      params: { slug: post.slug },
    })),
    fallback: true,
  };
};

export const getStaticProps = (async ({
  params,
}: GetStaticPropsContext) => {
  const post = posts.find(
    (post) => post.slug === params?.slug,
  );

  if (!post) return { notFound: true };

  return { props: { post } };
}) satisfies GetStaticProps<SinglePostProps>;

export default function SinglePost({
  post,
}: SinglePostProps) {
  const router = useRouter();

+ const locale = router.locale!;
+ // => "en-US" when route is /posts/foo
+ // => "ar-EG" when route is /ar-EG/posts/foo

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <Layout>
      <!-- ... -->

      <!-- We previously hard-coded the locale -->
-     <h1 className="...">{post.translations["en-US"].title}</h1>
+     <h1 className="...">{post.translations[locale].title}</h1>
      <p className="...">{post.date}</p>
      <div className="...">
-        <p>{post.translations["en-US"].content}</p>
+        <p>{post.translations[locale].content}</p>
      </div>
    </Layout>
  );
}

// pages/_app.tsx

- import arMessages from "@/lang/compiled/ar-EG.json";
- import enMessages from "@/lang/compiled/en-US.json";
  import "@/styles/globals.css";
  import type { AppProps } from "next/app";
  import { useRouter } from "next/router";
  import { useEffect } from "react";
  import { IntlProvider } from "react-intl";

- const messages = {
-   "en-US": { ...enMessages },
-   "ar-EG": { ...arMessages },
- };

  export default function App({ Component, pageProps }: AppProps) {
    const { locale, defaultLocale } = useRouter();

    return (
      <IntlProvider
        locale={locale!}
        defaultLocale={defaultLocale!}
-       messages={messages[locale as keyof typeof messages]}
+       messages={pageProps.localeMessages}
      >
        <Component {...pageProps} />
      </IntlProvider>
    );
  }

export const getStaticPaths: GetStaticPaths = ({
  locales,
}: GetStaticPathsContext) => {
  return {
    paths: locales!.flatMap((locale) =>
      posts.map((post) => ({
        params: { slug: post.slug },
        locale,
      })),
    ),
    fallback: false,
  };
};

npm install react-intl

// pages/_app.tsx

import "@/styles/globals.css";
import type { AppProps } from "next/app";

// Import IntlProvider
import { IntlProvider } from "react-intl";

// Add translations
const messages = {
  "en-US": {
    hello: "Hello, World!",
  },
  "ar-EG": {
    hello: "مرحباً بالعالم!",
  },
};

export default function App({ Component, pageProps }: AppProps) {
  const { locale, defaultLocale } = useRouter();

  return (
    // Wrap page component with IntlProvider
    <IntlProvider
      locale={locale!}
      defaultLocale={defaultLocale!}
      messages={messages[locale as keyof typeof messages]}
    >
      <Component {...pageProps} />
    </IntlProvider>
  );
}

// pages/index.tsx

  import Layout from "@/components/Layout";
  import type { GetStaticProps } from "next/types";
+ import { FormattedMessage } from "react-intl";

// ...

  export default function Home(...) {
    return (
      <Layout>
        <h1 className="...">
-         Hello i18n!
+         <FormattedMessage id="hello" />
        </h1>
        <p className="...">
          This is a Next.js demo of i18n with react-intl.
        </p>

        {/* ... */}

      </Layout>
    );
  }

npm install --save-dev @formatjs/cli babel-plugin-formatjs

// .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "formatjs",
      {
        "ast": true
      }
    ]
  ]
}

// package.json

{
  // ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
+   "intl:extract": "formatjs extract '{pages,components,sections}/**/*.{js,jsx,ts,tsx}' --out-file lang/src/en-US.json --format simple",
  },
  // ...
}

import Layout from "@/components/Layout";
import { FormattedMessage } from "react-intl";

// ...

export default function Home(...) {
  return (
    <>
      <Layout>
        <h1 className="...">
-         <FormattedMessage id="hello" />
+         <FormattedMessage defaultMessage="Hello i18n!" />
        </h1>
      </Layout>
    </>
  );
}

npm run intl:extract

// lang/src/en-US.json

{
  "RohNOo": "Hello i18n!"
}

// lang/src/ar-EG.json 

{
  "RohNOo": "أهلاً بالتدويل!"
}

// pages/_app.tsx

+ import arMessages from "@/lang/src/ar-EG.json";
+ import enMessages from "@/lang/src/en-US.json";
  import "@/styles/globals.css";
  import type { AppProps } from "next/app";
  import { useRouter } from "next/router";
  import { IntlProvider } from "react-intl";

  const messages = {
-   "en-US": { ... }, // inlined messages
+   "en-US": { ...enMessages },
-   "ar-EG: { ... },  // inlined messages
+   "ar-EG": { ...arMessages },
  };

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const { locale, defaultLocale } = useRouter();

  return (
    <IntlProvider
      locale={locale!}
      defaultLocale={router.defaultLocale}
      messages={messages[locale as keyof typeof messages]}
    >
      <Component {...pageProps} />
    </IntlProvider>
  );
}

// ⛔️👇 Will not work out-of-the-box. (See below).

import { FormattedMessage } from "react-intl";

export default function Aliased({ defaultMessage }) {
  return <FormattedMessage defaultMessage={defaultMessage} />;
}

// In some other component
<Aliased defaultMessage="I am a translation message" />

// ⛔️👆 Will not work! (See below).

// package.json

{
  // ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "intl:extract": "formatjs extract '{pages,components,sections}/**/*.{js,jsx,ts,tsx}' --out-file lang/src/en-US.json --format simple",
+   "intl:compile": "formatjs compile-folder lang/src lang/compiled --format simple --ast"
  },
  // ...
}

npm run intl:compile

// lang/compiled/en-US.json

{
  "RohNOo": [
    {
      "type": 0,
      "value": "Hello i18n!"
    }
  ]
}

// lang/compiled/ar-EG.json

{
  "RohNOo": [
    {
      "type": 0,
      "value": "أهلاً بالتدويل!"
    }
  ]
}

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ["en-US", "ar-EG"],
    defaultLocale: "en-US",
  },
+ webpack: (config, { dev, ...other }) => {
+   if (!dev) {
+      config.resolve.alias["@formatjs/icu-messageformat-parser"] =
+       "@formatjs/icu-messageformat-parser/no-parser";
+   }
+   return config;
+ },
};

module.exports = nextConfig;

// pages/_app.tsx

- import arMessages from "@/lang/src/ar-EG.json";
+ import arMessages from "@/lang/compiled/ar-EG.json";
- import enMessages from "@/lang/src/en-US.json";
+ import enMessages from "@/lang/compiled/en-US.json";

// ...

export default function App({ Component, pageProps }: AppProps) {
// ...

Running npm run build && npm start from the command line allows us to test our production environment. Looking at our browser network tab, we can see the difference in app bundle size:

🔗 Read more about pre-compiling and performance in the Format.JS Advanced Usage docs.

We’ve made our workflow and our production app leaner by using the wonderful Format.JS CLI and the Format.JS Babel plugin. We can do even better by only loading the translation file we need (instead of all of them) and doing so only on the server (instead of potentially reloading on the client). We will look at that next.

How do I load a translation file on the server?

We’re currently loading the translation message files for all our supported locales while only using the file for our active locale, which doesn’t scale well. We can solve this problem by using our pages’ getStaticProps() to load only the active locale’s translation file on the server.

We have to do this in each of our pages, so let’s write a helper function that we can reuse.

// i18n/get-locale-messages.ts

import fs from "fs/promises";
import path from "path";

export default async function getLocaleMessages(
  locale: string | undefined,
): Promise<Record<string, string>> {
  if (!locale) {
    throw new Error("Locale is missing.");
  }

  const messageFilePath = path.join(
    process.cwd(),
    "lang",
    process.env.NODE_ENV === "development"
      ? "src"
      : "compiled",
    `${locale}.json`,
  );

  const messages = await fs.readFile(
    messageFilePath,
    "utf8",
  );

  return JSON.parse(messages);
}

// pages/index.tsx

+ import getLocaleMessages from "@/i18n/get-locale-messages";
  import type { 
    GetStaticProps,
    GetStaticPropsContext,
  } from "next/types";
  import { FormattedMessage } from "react-intl";

  type HomeProps = {
+   localeMessages: Record<string, string>;
    date: string;
  };

  export const getStaticProps: GetStaticProps<
    HomeProps
  > = async ({ 
+   locale
  }: GetStaticPropsContext) => {
    return {
      props: {
+       localeMessages: await getLocaleMessages(locale),
        date: new Date().toString(),
      },
    };
  };

export default function Home({ date }: HomeProps) {
  return (
    <Layout>
      <h1 className="...">
        <FormattedMessage defaultMessage="Hello i18n!" />
      </h1>

      {/* ... */}

    </Layout>
  );
}

// pages/_app.tsx

- import arMessages from "@/lang/compiled/ar-EG.json";
- import enMessages from "@/lang/compiled/en-US.json";
  import "@/styles/globals.css";
  import type { AppProps } from "next/app";
  import { useRouter } from "next/router";
  import { useEffect } from "react";
  import { IntlProvider } from "react-intl";

- const messages = {
-   "en-US": { ...enMessages },
-   "ar-EG": { ...arMessages },
- };

  export default function App({ Component, pageProps }: AppProps) {
    const { locale, defaultLocale } = useRouter();

    return (
      <IntlProvider
        locale={locale!}
        defaultLocale={defaultLocale!}
-       messages={messages[locale as keyof typeof messages]}
+       messages={pageProps.localeMessages}
      >
        <Component {...pageProps} />
      </IntlProvider>
    );
  }

// pages/posts/index.tsx

  import Layout from "@/components/Layout";
  import { posts } from "@/data/posts";
+ import getLocaleMessages from "@/i18n/get-locale-messages";
  import type { Post } from "@/types";
  import type { 
    GetStaticProps,
    GetStaticPropsContext
  } from "next";
  import Link from "next/link";

  type PostIndexProps = {
+   localeMessages: Record<string, string>;
    posts: Post[];
  };

  export const getStaticProps: GetStaticProps<
    PostIndexProps
  > = async ({ 
+   locale
  }: GetStaticPropsContext) => {
    return {
      props: {
+       localeMessages: await getLocaleMessages(locale),
        posts,
      },
    };
  };

  export default function PostIndex({
    posts,
  }: PostIndexProps) {
    // Render the posts...
  }

// pages/_app.tsx

  import "@/styles/globals.css";
- import type { AppProps } from "next/app";
+ import type { AppContext, AppProps } from "next/app";
  import App from "next/app";
  import { useRouter } from "next/router";
  import { IntlProvider } from "react-intl";

- export default function App({
+ export default function MyApp({
    Component,
    pageProps,
+   messages,
- }: AppProps) {
+ }: AppProps & { messages: Record<string, string> }) {
    const { locale, defaultLocale } = useRouter();

    return (
      <IntlProvider
        locale={locale!}
        defaultLocale={defaultLocale!}
-       messages={pageProps.localeMessages}
+       messages={messages}
      >
        <Component {...pageProps} />
      </IntlProvider>
    );
  }

+ // 👇 Load the messages for the active locale
+ MyApp.getInitialProps = async (ctx: AppContext) => {
+   const { locale } = ctx.router;
+
+   const subdirectory =
+     process.env.NODE_ENV === "development"
+       ? "src"
+       : "compiled";
+
+   const messages: Record<string, string> = await import(
+     `@/lang/${subdirectory}/${locale}`
+   );
+
+   const appProps = await App.getInitialProps(ctx);
+
+   return { ...appProps, messages };
+ };

With that, we can remove all the getLocaleMessage() calls in our pages, encapsulating locale loading in the App component.

This DRYing up comes at a cost, however: using getInitialProps() on the App component causes Next.js to opt out of Automatic Static Optimization. This means that simple pages that have no getServerSideProps() or getInitialProps() will not be pre-rendered (and cached in a CDN) as usual. We can see this when we build our app.

🗒️ I added a simple About page to test here

 

So it’s a tradeoff either way. In this tutorial, we will stick to per-page getStaticProps translation loading, since it’s only a few lines per page for an overall performance gain. The choice is yours, of course.

🔗 If you want a closer look at the getInitialProps() solution, we have a dedicated branch in our GitHub repo that covers it. You can also see a handy diff that focuses on loading code.

🗒️ Server Components, introduced in Next.js with the App Router, can be really helpful here. We cover this in A Deep Dive into Next.js App Router Localization with next-intl. (Do note that at the time of writing, unlike react-intl, next-intl doesn’t cover message extraction/compilation).

How do I build a language switcher?

We’ve laid the plumbing of react-intl + Next.js, making sure we’re loading translations as efficiently as possible. Let’s switch gears a bit and make a locale switcher for our site visitors since we often need a way for our users to manually select their own language.

We will add a LocaleSwitcher component that takes care of this.

// components/LocaleSwitcher.tsx

import { useRouter } from "next/router";

const localeNames: Record<string, string> = {
  "en-US": "English",
  "ar-EG": "(Arabic) العربية",
};

export default function LocaleSwitcher() {
  const router = useRouter();

  // `locales` list is configured in next.config.js
  const { locale, locales } = router;

  const handleLocaleChange = (
    e: React.ChangeEvent<HTMLSelectElement>,
  ) => {
    const locale = e.target.value;
    router.push(router.pathname, router.asPath, { locale });
  };

  return (
    <div>
      <select
        value={locale}
        onChange={handleLocaleChange}
        className="..."
      >
        {locales!.map((locale) => (
          <option key={locale} value={locale}>
            {localeNames[locale]}
          </option>
        ))}
      </select>
    </div>
  );
}

Like the <Link> component, the Next.js router takes a locale option that makes the router change the locale route prefix for a given route path. For example, if we call router.push("/posts", "/posts", { locale: "ar-EG" }), we will be navigated to /ar-EG/posts.

🔗 See the router.push() docs for more info.

If we place our new <LocaleSwitcher> in the header section of our <Layout>, we can see this in action.

Setting the NEXT_LOCALE cookie

Right now, our user’s selected locale won’t be remembered the next time they visit our site. Recall that Next.js i18n has built-in locale detection. We can override this detection by setting a NEXT_LOCALE cookie.

Let’s add that logic to our LocaleSwitcher. We will use the popular nookies package, which allows to set cookies easily from the browser.

Let’s install it.

npm install nookies

// components/LocaleSwitcher.tsx

  import { useRouter } from "next/router";
+ import { setCookie } from "nookies";

  // ...

  export default function LocaleSwitcher() {
    const router = useRouter();
    const { locale, locales } = router;

    const handleLocaleChange = (
      e: React.ChangeEvent<HTMLSelectElement>,
    ) => {
      const locale = e.target.value;
    
+     setCookie(null, "NEXT_LOCALE", locale, {
+       sameSite: "Strict",
+       path: "/",
+       // Set the lifetime of the cookie to one year
+       maxAge: 365 * 24 * 60 * 60,
+     });

      router.push(router.pathname, router.asPath, { locale });
    };

    return (
      // ...
    );
  }

Now, whenever we change the locale manually with the switcher, we can see a cookie being set in our browser dev tools.

With this setup, when a visitor manually selects a locale, the NEXT_LOCALE cookie stores their choice. Next.js’ locale auto-detection then prioritizes the cookie’s value over its own detected locale. This ensures that the visitor sees the site in their previously selected language during subsequent visits.

How do I automatically detect the user’s locale?

Next.js i18n has automatic locale detection built in. In fact, it’s on by default. However, as we’ve mentioned before, this detection can be a bit too precise.

For example, if a visitor sets ar-SY (Arabic as it is used in Syria) in their browser language preferences, Next.js won’t serve them the ar-EG version of our website. This is a missed opportunity because Egypt and Syria share the same written Arabic.

To achieve loose locale matching, where only the language is matched, we can roll our own locale auto-detection via custom Next.js middleware.

First, let’s disable Next’s built-in locale auto-detection.

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ["en-US", "ar-EG"],
    defaultLocale: "en-US",
+   localeDetection: false,
  },
  webpack: (config, { dev, ...other }) => {
    // ...
};

module.exports = nextConfig;

npm install accept-language-parser

// i18n/best-match.ts

import nextConfig from "@/next.config";
import acceptLanguageParser from "accept-language-parser";

export function bestMatch(
  acceptLanguageHeader: string | null,
): string | null {
  if (!nextConfig.i18n) {
    throw new Error(
      "Please add i18n config to next.config.js",
    );
  }

  if (!acceptLanguageHeader) {
    return nextConfig.i18n.defaultLocale;
  }

  const supportedLocales = nextConfig.i18n.locales;

  const bestMatch = acceptLanguageParser.pick(
    supportedLocales,
    acceptLanguageHeader,
    { loose: true },
  );
  return bestMatch;
}

// middleware.ts

import { bestMatch } from "@/i18n/best-match";
import {
  NextResponse,
  type NextRequest,
} from "next/server";

export function middleware(req: NextRequest) {
  const matchedLocale = bestMatch(
    req.headers.get("Accept-Language"),
  );

  const { locale } = req.nextUrl;

  if (locale !== matchedLocale) {
    return NextResponse.redirect(
      new URL(
        `/${matchedLocale}${req.nextUrl.pathname}`,
        req.nextUrl,
      ),
    );
  }
}

export const config = {
  // Match the root route and any other route except
  // internal Next.js routes and public files.
  matcher: [
    "/",
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
  ],
};

// middleware.ts

import {
  NextResponse,
  type NextRequest,
} from "next/server";
import { bestMatch } from "./i18n/best-match";

export function middleware(req: NextRequest) {
  const { locale } = req.nextUrl;

+ // If a locale was manually selected by the visitor
+ // during a previous visit, use *that* locale and
+ // don't attempt to auto-detect a best match.
+ const storedLocale = req.cookies.get("NEXT_LOCALE");
+
+ if (storedLocale) {
+   if (storedLocale.value !== locale) {
+     return NextResponse.redirect(
+       new URL(
+         `/${storedLocale.value}${req.nextUrl.pathname}`,
+         req.nextUrl,
+       ),
+     );
+   } else {
+     return;
+   }
+ }

  const matchedLocale = bestMatch(
    req.headers.get("Accept-Language"),
  );

  if (locale !== matchedLocale) {
    return NextResponse.redirect(
      new URL(
        `/${matchedLocale}${req.nextUrl.pathname}`,
        req.nextUrl,
      ),
    );
  }
}

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

// pages/posts/[slug].tsx

import Layout from "@/components/Layout";

// Our mock data
import { posts } from "@/data/posts";

// For loading our UI translation messages
import getLocaleMessages from "@/i18n/get-locale-messages";

// TypeScript types
import type { TranslatedPost } from "@/types";
import type {
  GetStaticPaths,
  GetStaticProps,
  GetStaticPropsContext,
} from "next";

import Link from "next/link";
import { useRouter } from "next/router";

// react-intl
import { FormattedMessage } from "react-intl";

type SinglePostProps = {
  localeMessages: Record<string, string>;
  post: TranslatedPost;
};

// Since we're not providing locales in our
// returned `paths`, Next.js will only 
// pre-build a version of this page translated
// to our default locale (en-US) during 
// production builds.
export const getStaticPaths: GetStaticPaths<{
  slug: string;
}> = () => {
  return {
    paths: posts.map((post) => ({
      params: { slug: post.slug },
    })),

    // Ensure that all locale translations
    // are served when requested.
    fallback: true,
  };
};

export const getStaticProps = (async ({
  params,
  locale,
}: GetStaticPropsContext) => {
  if (typeof params?.slug !== "string" || !locale) {
    return { notFound: true };
  }

  const foundPost = posts.find(
    (p) => p.slug === params.slug,
  );
  if (!foundPost) {
    return { notFound: true };
  }

	// Only get the translations for the
  // active `locale`.
  const post = {
    date: foundPost.date,
    slug: foundPost.slug,
    ...foundPost.translations[locale],
  };

  return {
    props: {
      // Load the active locale's translation
      // messages for the UI view (react-intl).
      localeMessages: await getLocaleMessages(locale),
      post,
    },
  };
}) satisfies GetStaticProps<SinglePostProps>;

export default function SinglePost({
  post,
}: SinglePostProps) {
  const router = useRouter();

  // Just a reminder that we can access
  // i18n config values here as well.
  const { locale, defaultLocale, locales } = router;

  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <Layout>
      <div className="...">
        <Link href="/posts" className="...">
          <FormattedMessage defaultMessage="Back to post index" />
        </Link>
      </div>

      <h1 className="...">{post.title}</h1>

      <p className="...">{post.date}</p>

      <div className="...">
        <p>{post.content}</p>
      </div>
    </Layout>
  );
}