引言

在全球化的浪潮中，多语言支持已成为网站不可或缺的一部分。Nextjs，作为新一代的静态网站生成器，以其简洁高效和强大的扩展性，成为了开发者的新宠。今天，我们就来揭秘如何让Nextjs项目轻松接入多语言配置，实现真正的全球通吃。

一、项目结构概览

首先，让我们一睹Nextjs多语言项目的目录结构：

├── README.md
├── messages
│   ├── ar.json
│   ├── en.json
│   ├── ru.json
│   └── zh.json
├── next.config.js
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── src
│   ├── app
│   │   ├── [locale]
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx
│   │   │   ├── about
│   │   │   │   └── page.tsx
│   │   │   ├── price
│   │   │   │   └── page.tsx
│   ├── components
│   │   └── LanguageSwitcher.tsx //语言切换组件
│   ├── globals.css
│   ├── i18n.ts
│   ├── middleware.ts
│   └── navigation.ts
├── tailwind.config.ts
└── tsconfig.json

二、语言文件与配置

接下来，我们重点关注src目录下的文件。

2.1 语言文件

在messages文件夹中，我们放置了各种语言的JSON文件，如ar.json、en.json、ru.json和zh.json。这些文件包含了每种语言的翻译内容。

2.2 i18n配置

在src/i18n.ts文件中，我们配置了国际化逻辑。这里使用了next-intl库，它是Nextjs官方提供的国际化解决方案。

import { headers } from 'next/headers';
import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';
import { locales } from './navigation';

export default getRequestConfig(async ({ locale }) => {
  // 验证传入的locale参数是否有效
  if (!locales.includes(locale as any)) {
    notFound();
  }

  const now = headers().get('x-now');
  const timeZone = headers().get('x-time-zone') ?? 'Europe/Vienna';
  const messages = (await import(`../messages/${locale}.json`)).default;

  return {
    now: now ? new Date(now) : undefined,
    timeZone,
    messages,
    defaultTranslationValues: {
      globalString: 'Global string',
      highlight: (chunks) => <strong>{chunks}</strong>,
    },
    formats: {
      dateTime: {
        medium: {
          dateStyle: 'medium',
          timeStyle: 'short',
          hour12: false,
        },
      },
    },
    onError(error) {
      if (
        error.message ===
        (process.env.NODE_ENV === 'production'
          ? 'MISSING_MESSAGE'
          : 'MISSING_MESSAGE: Could not resolve `missing` in `Index`.')
      ) {
        // Do nothing, this error is triggered on purpose
      } else {
        console.error(JSON.stringify(error.message));
      }
    },
    getMessageFallback({ key, namespace }) {
      return (
        '`getMessageFallback` called for ' +
        [namespace, key].filter((part) => part != null).join('.')
      );
    },
  };
});

2.3 国际化中间件

在src/middleware.ts文件中，我们配置了国际化中间件，用于处理语言切换和路由映射。

import createMiddleware from 'next-intl/middleware';
import { locales, pathnames, localePrefix, defaultLocale } from './navigation';

export default createMiddleware({
  defaultLocale,
  localePrefix,
  pathnames,
  locales,
});

export const config = {
  matcher: ['/((?!_next|.*\\..*).*)'],
};

三、组件与使用

3.1 语言切换组件

在src/components/LanguageSwitcher.tsx文件中，我们创建了一个简单的语言切换组件。

import { useTranslations } from 'next-intl';

type Props = { children: React.ReactNode; params: { locale: string } };

export default function LocaleLayout({ children, params: { locale }}: Props) {
  const messages = useMessages();
  return (
   <NextIntlClientProvider locale={locale} messages={messages}>
      {children}
    </NextIntlClientProvider>
  );
}

3.2 在页面中使用i18n

在页面组件中，我们可以使用useTranslations钩子来获取翻译后的文本。

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('global');
  return <div>{t('technological exchanges')}</div>;
}

四、服务端渲染注意事项

由于Nextjs支持客户端渲染和服务端渲染，因此在实现多语言时需要注意一些细节。如果遇到服务端渲染报错，可以在页面同级添加layout.tsx文件，并进行相应的封装。

import { NextIntlClientProvider, useMessages } from 'next-intl';
type Props = { children: React.ReactNode; params: { locale: string } };

export default function LocaleLayout({ children, params: { locale }}: Props) {
  const messages = useMessages();
  return (
   <NextIntlClientProvider locale={locale} messages={messages}>
      {children}
    </NextIntlClientProvider>
  );
}

结语

通过以上步骤，我们成功地将Nextjs项目接入了多语言配置，实现了全球通吃。无论用户访问哪个国家或地区的网站，都能享受到流畅且准确的多语言体验。希望这篇文章能为你带来启发和帮助，让你在Nextjs的世界里畅游无阻！