如何通过getServerSideProps将locale传递至Next.js后端？

如何将context.locale传递给Next.js后端API #

你可以通过以下几种方式把getServerSideProps里拿到的locale传递给后端API：

1. 自定义请求头传递 #

在调用后端API时，添加自定义请求头携带locale信息：

export async function getServerSideProps(context) {
  const locale = context.locale;
  let response;
  try {
    // 调用后端API时通过请求头传递locale
    const { data } = await getAllServices({
      headers: {
        'X-Locale': locale, // 自定义请求头
        'Accept-Language': locale // 也可以用标准的Accept-Language头
      }
    });
    response = { data: data };
  } catch (err) {
    response = { err: err.message };
  }
  return {
    props: { response },
  };
}

然后在后端API的handler里，从req.headers中读取：

const handler = async (req, res) => {
  const locale = req.headers['x-locale'] || req.headers['accept-language'];
  console.log('Locale:', locale);
}

2. URL查询参数传递 #

把locale作为查询参数拼接到API请求URL中：

export async function getServerSideProps(context) {
  const locale = context.locale;
  let response;
  try {
    // 拼接查询参数
    const { data } = await getAllServices(`?locale=${locale}`);
    response = { data: data };
  } catch (err) {
    response = { err: err.message };
  }
  return {
    props: { response },
  };
}

后端handler里从req.query读取：

const handler = async (req, res) => {
  const locale = req.query.locale;
  console.log('Locale:', locale);
}

3. POST请求体传递（适用于POST请求） #

如果是POST请求，把locale放进请求体：

export async function getServerSideProps(context) {
  const locale = context.locale;
  let response;
  try {
    const { data } = await axios.post('/api/your-endpoint', {
      locale,
      // 其他请求数据
    });
    response = { data: data };
  } catch (err) {
    response = { err: err.message };
  }
  return {
    props: { response },
  };
}

后端handler里从req.body读取：

const handler = async (req, res) => {
  const locale = req.body.locale;
  console.log('Locale:', locale);
}

为什么后端handler打印req看不到locale信息 #

Next.js的API路由默认独立于页面国际化配置，不会自动将页面的locale附加到req对象中。页面的context.locale是Next.js页面路由处理国际化时生成的，API路由不会自动继承这个信息，必须由你在调用API时手动传递，才能在handler中获取到。

内容的提问来源于stack exchange，提问作者next951595