Customize Locale

ShipAny implements a multilingual system based on next-intl.

You can refer to the following content to customize multilingual display for your project.

Configure Locale Switching

In the src/config/locale/index.ts configuration file, set the languages that your project supports for display.

You can add or remove supported languages according to your needs.

export const localeNames: any = {
  en: 'English',
  zh: '中文',
  ja: '日本語',
};

export const locales = ['en', 'zh', 'ja'];

In the src/config/locale/messages/{locale}/landing.json file, control whether to display the locale switcher button through the show_locale field in the header and footer blocks.

Note: Please modify the configuration content in the src/config/locale/messages/{locale}/ folder for each language according to the enabled language list to ensure that the page content for each language can be displayed correctly.

If your project's first version goes live and doesn't need to support multiple languages, you can set:

export const localeNames: any = {
  en: 'English',
};

export const locales = ['en'];

And set the show_locale field to false in the src/config/locale/messages/en/landing.json file.

Set Default Display Language

The default display language of the project is English. If you want to display another language by default, such as Chinese, you can configure the default language through environment variables.

NEXT_PUBLIC_DEFAULT_LOCALE = "zh"

When accessing the default language, the corresponding language code will not be displayed in the URL. When accessing non-default languages, the corresponding language code will be displayed in the URL.

For example, according to the above configuration, accessing the Chinese pricing page uses the route: /pricing, and accessing the English pricing page uses the route: /en/pricing.

Customize Multilingual Pages

For example, if you want to add a new /about page to your project and support multilingual display.

You can follow these steps to configure multilingual pages:

{
  "metadata": {
    "title": "About",
    "description": "Nano Banana Pro is an AI image generator based on the Nano Banana Pro model, powered by Gemini 3 Pro image generation technology. Create stunning images with advanced AI capabilities."
  }
}

export const localeMessagesPaths = [
  // ... other locale file list
  'pages/about',
];

import { getTranslations } from 'next-intl/server';

import { Hero } from '@/themes/default/blocks';

export default async function AboutPage() {
  const t = await getTranslations('pages.about');

  return (
    <Hero
      hero={{
        title: t('metadata.title'),
        description: t('metadata.description'),
      }}
    />
  );
}