咨询getServerSideProps的context参数来源及locale设置逻辑

在Next.js的服务器端渲染流程里，getServerSideProps会在每次用户请求页面时触发。此时Next.js服务器会自动生成并传入context对象——它是Next.js封装的请求上下文集合，包含当前请求的所有核心信息：请求对象req、响应对象res、路由参数、默认locale、查询参数等，目的是让开发者在服务器端直接获取请求相关的所有必要数据。

你可以根据业务需求，通过不同逻辑直接修改context.locale的值，常见场景如下：

1. 从请求头获取用户语言偏好并修改 #

export const getServerSideProps: GetServerSideProps = async context => {
  const { req } = context;
  // 解析请求头中的Accept-Language，取第一个语言标识作为默认值
  const preferredLang = req.headers['accept-language']?.split(',')[0] || 'en';
  // 直接覆盖context的locale
  context.locale = preferredLang;

  return { props: { locale: context.locale } };
};

2. 基于路由参数修改locale #

如果页面路由包含语言参数（比如/[lang]/products），可以从context.params中提取语言标识：

export const getServerSideProps: GetServerSideProps = async context => {
  const { params } = context;
  // 从路由参数中获取lang值，默认设为'en'
  const routeLocale = params?.lang || 'en';
  context.locale = routeLocale;

  return { props: { locale: context.locale } };
};

3. 自定义逻辑修改（如数据库/IP地区判断） #

根据用户的自定义数据（比如数据库存储的语言设置、IP对应地区）来设置locale：

export const getServerSideProps: GetServerSideProps = async context => {
  // 示例：从Cookie获取用户ID，再从数据库查询其语言偏好
  const userId = context.req.cookies.userId;
  const userLocale = userId ? await fetchUserLangFromDB(userId) : 'en';
  context.locale = userLocale;

  return { props: { locale: context.locale } };
};

注意事项 #

• 修改后的context.locale会直接影响后续服务器端逻辑中使用的语言标识，比如获取对应语言的内容、调用国际化接口等。
• 如果你的项目配置了Next.js内置的i18n国际化方案，修改context.locale会同步影响Next.js的国际化路由和内置组件的语言切换行为。

内容的提问来源于stack exchange，提问作者Константин Гаврыш