Next实现 i18n 传递 locales 给 getStaticPaths

在 Next.js 中实现国际化（i18n）时，可以通过配置 next.config.js 文件来传递 locales 给 getStaticPaths 函数。下面是一个示例代码，演示如何在 next.config.js 中配置 locales，并在 getStaticPaths 中获取并使用这些 locales：

1、配置 next.config.js 文件：

// next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'fr', 'es'], // 可用的语言版本
    defaultLocale: 'en', // 默认语言版本
  },
};
1
2
3
4
5
6
7
8

2、在页面组件中使用 getStaticPaths：

// pages/[slug].js

export async function getStaticPaths({ locales }) {
  // 获取配置文件中定义的可用语言版本
  const availableLocales = locales;

  // 生成动态路由路径
  const paths = [];
  availableLocales.forEach((locale) => {
    paths.push({ params: { slug: 'example-slug' }, locale });
    // 可以根据实际情况生成不同的动态路由路径
  });

  return { paths, fallback: false };
}

export default function Post({ data }) {
  // 页面内容
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export async function getStaticProps({ params }) {
  // 根据 params.slug 获取对应的数据
  const data = { title: 'Example Title', content: 'Example Content' };

  return { props: { data } };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在上述示例中，通过配置 next.config.js 文件定义可用的语言版本，并将这些 locales 传递给 getStaticPaths 函数。在 getStaticPaths 中，可以通过参数 { locales } 获取到传递的语言版本信息，然后根据这些语言版本生成对应的动态路由路径。

通过这种方式，可以在 Next.js 中实现国际化，并在 getStaticPaths 函数中使用传递的 locales 来生成多语言版本的动态路由路径。