面试题：Next.js多语言网站中动态路由的基础配置

页面文件结构

创建一个名为 pages 的目录，这是 Next.js 存放页面的默认目录。
在 pages 目录下创建 [lang] 文件夹，其中 [lang] 是动态路由参数，表示语言代码。例如 en 代表英语，zh 代表中文。
在 [lang] 文件夹内创建各个页面文件，如 index.js 作为首页，about.js 作为关于页面等。例如，pages/[lang]/index.js 就是不同语言版本的首页文件。

路由配置

动态路由匹配：Next.js 会自动识别 pages/[lang] 这种带有方括号的文件夹结构为动态路由。在页面组件中，可以通过 getStaticProps 或 getServerSideProps 的 context 参数获取 lang 参数值。例如在 pages/[lang]/index.js 中：

export async function getStaticProps(context) {
  const { lang } = context.params;
  // 根据 lang 值获取对应语言的数据
  return {
    props: {
      language: lang
    },
    revalidate: 60 // 可选，用于增量静态再生
  };
}

const IndexPage = ({ language }) => {
  return (
    <div>
      <p>当前语言: {language}</p>
      {/* 页面内容 */}
    </div>
  );
};

export default IndexPage;

导航链接：在页面中创建指向不同语言版本页面的链接。可以使用 next/link 组件。例如，在 pages/[lang]/index.js 中添加切换到中文和英文版本首页的链接：

import Link from 'next/link';

const IndexPage = ({ language }) => {
  return (
    <div>
      <p>当前语言: {language}</p>
      <Link href="/en">
        <a>切换到英文</a>
      </Link>
      <Link href="/zh">
        <a>切换到中文</a>
      </Link>
      {/* 页面内容 */}
    </div>
  );
};

export default IndexPage;

国际化配置：为了更好地管理多语言内容，可以结合 i18n 库，如 next-i18next。安装 next-i18next 后，配置 next.config.js 文件：

const nextI18next = require('next-i18next');

const { i18n } = nextI18next({
  defaultLanguage: 'en',
  languages: ['en', 'zh'],
  localePath: path.resolve('./public/locales'),
});

module.exports = {
  i18n,
  // 其他 Next.js 配置
};

然后在页面组件中使用 next-i18next 提供的 useTranslation 钩子来加载和显示对应语言的文本。例如：

import { useTranslation } from 'next-i18next';

const IndexPage = () => {
  const { t } = useTranslation();
  return (
    <div>
      <p>{t('welcome')}</p>
      {/* 页面内容 */}
    </div>
  );
};

export default IndexPage;

在 public/locales 目录下，按照语言代码创建文件夹，如 en 和 zh，并在其中创建 common.json 等文件来存放翻译文本。例如 public/locales/en/common.json 中：

{
  "welcome": "Welcome"
}

public/locales/zh/common.json 中：

{
  "welcome": "欢迎"
}

面试题：Next.js多语言网站中动态路由的基础配置

知识考点

面试题答案

页面文件结构

路由配置