为什么在添加 slug 时 toUpperCase 在 nextjs 中不起作用

Question

我正在关注此链接 https://nextjs.org/docs/api-reference/next.config.js/headers

添加x-slug键。我是这样添加的

module.exports = {
  async headers() {
    return [
      {
        source: '/:slug',
        headers: [
          {
            key: 'x-slug',
            value: `${abc(':slug')}` // Matched parameters can be used in the value
          }
        ]
      }
    ];
  }
};

当我使用这个网址时 https://nextjs-vetexh--3000.local.webcontainer.io/dsd “蛞蝓”---> dsd

但是当我使用toUppercase() 函数时它不起作用，为什么

function abc(a) {
  // working
 // return a;
 // not working
  return a.toUpperCase();
}

SLUG 大写。

预期输出为“DSD”

这是我的代码 https://stackblitz.com/edit/nextjs-vetexh?file=next.config.js

function abc(a) {
  // working
  // return a;
  // not working
  return a.toUpperCase();
}
module.exports = {
  async headers() {
    return [
      {
        source: '/:slug',
        headers: [
          {
            key: 'x-slug',
            value: `${abc(':slug')}` // Matched parameters can be used in the value
          }
        ]
      }
    ];
  }
};

Answer 1

这在next.config.js 中可能是不可能的，但还有其他选项需要一些权衡。

与getServerSideProps

您可以通过在_app.js 中使用getServerSideProps 匹配请求的路径来添加自定义HTTP 标头：

export async function getServerSideProps(context) {

  // set HTTP header
  context.res.setHeader('x-slug', upperCase(context.params.slug))

  return {
    props: {}, // will be passed to the page component as props
  }
}

context 参数是一个包含以下键的对象：

• params：如果此页面使用动态路由，params 包含路由参数。如果页面名称是 [id].js ，则参数看起来像 { id: ... }。
• req：HTTP IncomingMessage 对象。
• res：HTTP 响应对象。
• query：表示查询字符串的对象。

但是使用getServerSideProps 会禁用静态优化，因为所有页面都只会在服务器端呈现。

More on Server-side Rendering

使用自定义服务器

另一种方法是使用Custom Server 并覆盖响应标头。

server.get('/:slug*', (req, res) => {
    res.set('x-slug', upperCase(req.params['slug']));
    handle(req, res, parsedUrl);
  });

自定义服务器将移除重要的性能优化，例如无服务器功能和自动静态优化。