在 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
来生成多语言版本的动态路由路径。