乐闻世界logo
搜索文章和话题

How to access current language in getStaticProps Next. Js ?

2 个月前提问
21 天前修改
浏览次数14

1个答案

1

在 Next.js 中,getStaticProps 是一个用于服务器端渲染的函数,它允许你为页面提供必要的数据作为 props。当涉及到多语言网站时,获取当前的语言设置是一个常见需求。然而,getStaticProps 默认并不包含有关当前语言环境的信息,因此需要通过一些设置来实现。

方法1:使用 URL 路径

通常的做法是在 URL 中包含语言标识符,例如 /en/posts/fr/posts。这可以通过修改 next.config.js 文件来设置动态路由。

  1. 配置 i18n 在 next.config.js:

    javascript
    module.exports = { i18n: { locales: ['en', 'fr'], defaultLocale: 'en', // 设置路径包含语言信息 localeDetection: false }, };
  2. 在页面组件中使用动态路由: 你可以创建动态路由比如 pages/[lang]/posts.js,然后在 getStaticProps 中使用这个 lang 参数来决定内容的语言。

    javascript
    export async function getStaticProps({ params }) { const { lang } = params; // 根据 lang 获取数据 const data = await fetchDataBasedOnLocale(lang); return { props: { data, }, }; }

如果你不希望在 URL 中显示语言设置,另一个选项是使用 Cookies 或 HTTP Header 来传递语言设置。

  1. 客户端设置 Cookie: 当用户选择语言时,设置一个 cookie 来保存这个选择。

    javascript
    document.cookie = "NEXT_LOCALE=fr; path=/; max-age=31536000"; // 设置为法语,并持续一年
  2. getStaticProps 中读取 Cookie: 由于 getStaticProps 运行在服务器端,你需要使用第三方库(如 cookie)来解析 Cookie。你可以从 context 参数中的 req 对象获取这些 cookies。

    javascript
    import cookie from 'cookie'; export async function getStaticProps(context) { const { req } = context; const cookies = cookie.parse(req ? req.headers.cookie || "" : document.cookie); const currentLocale = cookies.NEXT_LOCALE || 'en'; // 默认为英语 const data = await fetchDataBasedOnLocale(currentLocale); return { props: { data, }, }; }

方法3:通过 Next.js 的 Internationalized Routing

如果你正在使用 Next.js 10 或更高版本,并已经在 next.config.js 中启用了 Internationalized Routing,Next.js 会自动处理语言检测和路由。在这种情况下,你可以直接从 locale 字段获取当前语言。

javascript
export async function getStaticProps({ locale }) { const data = await fetchDataBasedOnLocale(locale); return { props: { data, }, }; }

以上就是在 Next.js 中在 getStaticProps 中获取当前语言的几种方法。每种方法有其适用场景,你可以根据具体的项目需求选择最适合的方式。

2024年6月29日 12:07 回复

你的答案