在 Next.js 中实现国际化(i18n)时,可以通过配置 next.config.js  文件来传递 locales 给 getStaticPaths 函数。下面是一个示例代码,演示如何在 next.config.js 中配置 locales,并在 getStaticPaths 中获取并使用这些 locales:
1、配置 next.config.js 文件:
// next.config.jsmodule.exports = {i18n: {locales: ['en', 'fr', 'es'], // 可用的语言版本defaultLocale: 'en', // 默认语言版本},
};
2、在页面组件中使用 getStaticPaths:
// pages/[slug].jsexport 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 } };
}
在上述示例中,通过配置 next.config.js 文件定义可用的语言版本,并将这些 locales 传递给 getStaticPaths 函数。在 getStaticPaths 中,可以通过参数 { locales } 获取到传递的语言版本信息,然后根据这些语言版本生成对应的动态路由路径。
通过这种方式,可以在 Next.js 中实现国际化,并在 getStaticPaths 函数中使用传递的 locales 来生成多语言版本的动态路由路径。