Nextjs 如何在 getStaticProps 中访问当前语言？

在 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,
       },
     };
   }

方法2：使用自定义 Cookie 或 Header

如果你不希望在 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 中获取当前语言的几种方法。每种方法有其适用场景，你可以根据具体的项目需求选择最适合的方式。