Upgrade

File Structure Comparison

Old File Structure

i18n/
├── messages/                # Translation files directory
│   ├── en.json              # English translations
│   ├── zh.json              # Chinese translations
│   └── ja.json              # Japanese translations
├── request.ts               # next-intl request configuration
└── routing.ts               # Route and language configuration

New File Structure

i18n/
├── messages/                # Translation files directory
│   ├── en/                  # English translations
│   │   └── common.json
│   ├── zh/                  # Chinese translations
│   │   └── common.json
│   └── ja/                  # Japanese translations
│       └── common.json
├── request.ts               # next-intl request configuration
└── routing.ts               # Route and language configuration

Upgrade Steps

Step 1. Update Translation File Structure

Based on the file structure comparison above, update the translation file structure to the new format.

Then split according to your needs, for example, separate Dashboard and Landing independently by creating Dashboard.json and Landing.json files respectively.

Step 2. Update Request Configuration

Replace the request.ts file with the following code:

import { getRequestConfig } from 'next-intl/server';
import { routing } from './routing';
 
export default getRequestConfig(async ({ requestLocale }) => {
  let locale = await requestLocale;
 
  if (!locale || !routing.locales.includes(locale as any)) {
    locale = routing.defaultLocale;
  }
 
  const common = (await import(`./messages/${locale}/common.json`)).default;
  const Landing = (await import(`./messages/${locale}/Landing.json`)).default;
  const Dashboard = (await import(`./messages/${locale}/Dashboard.json`)).default;
 
  return {
    locale,
    messages: {
      Landing,
      Dashboard,
      ...common
    }
  };
});

This completes the upgrade. In the future, whenever you add new translation files, you only need to add them in request.ts.