在 Next.js 中为 DEV 环境设置代理

介绍

通常，我们希望 Next.js 中有一个默认的代理设置，就像 React 一样。但不幸的是，package.json 中没有这个功能，我们需要添加自定义代理服务器和一些 hack 才能在开发环境中使用外部 API。幸运的是，在 9.5 版本中，Next.js 发布了一种新的、更简单的方法，可以与应用程序外部托管的 API 进行交互。

让我们从修改 next.config.js 文件开始。

步骤 1

我们可以使用新的规则“rewrites”。请参阅相关文档。为了代理我们的 API 请求，我们需要添加这条包含源和目标的重写规则。请参考以下代码。

 async rewrites() {
      [
          {
            source: '/api/:slug*',
            destination: `http://localhost:3333/api/:slug*`,
          },
        ]
 }

在这里，源将过滤所有以开头的调用'/api'，而目标将用于以重写请求'http://localhost:3333/api'。:slug*将获取剩余部分并将其附加到目标 URL。

第 2 步

如果我们需要添加另一个单独托管的位置，例如以开头的每个调用'/images'，我们只需将以下代码添加到我们现有的重写规则中。

async rewrites() {
      [
          {
            source: '/api/:slug*',
            destination: `http://localhost:3333/api/:slug*`,
          },
          {
            source: '/images/:slug*',
            destination: `http://localhost:3334/images/:slug*`,
          }
      ]
 }

在这里，新的规则源将过滤所有以开头的调用，'/images'而目标将用于以重写请求'http://localhost:3334/images'。正如我之前提到的，:slug*将获取剩余部分并将其附加到目标网址。

步骤3

此外，我们添加的规则在生产环境中也同样有效。如果我们在生产环境中有专用的反向代理，则不需要此规则。然而，我们可以通过添加 NODE_ENV 检查来在生产环境中禁用它。

async rewrites() {
      return !process.env.NODE_ENV === 'production'
      ? [
          {
            source: '/api/:slug*',
            destination: `http://localhost:3333/api/:slug*`,
          },
          {
            source: '/images/:slug*',
            destination: `http://localhost:3333/images/:slug*`,
          },
        ]
      : [];
 }

请不要忘记在运行`npm run build`命令之前运行 set NODE_ENV。

步骤4

最后一步是确保客户端所有现有的 API 都已更改为相对 URL。如果我们有需要在服务器中运行的 API 调用，则需要将外部 URL 更改为 Next.js 本地开发 URL，就像下面的代码一样。


export const getStaticProps/getServerSideProps = async () => {

  // Before Setting Proxy
  // const data = await getData('http://localhost:3333/api/data');

  // After Setting Proxy
  const data = await getData('http://localhost:3000/api/data');

  return {
    props: {
      data
    },
  };
};

在这里，Next.js 将使用我们之前在中指定的规则http://localhost:3000/api重写。http://localhost:3333/apirewritesnext.config.js

结论

在本文中，我们了解了如何在不安装任何第三方包或使用自定义 server.js 的情况下设置外部 API 代理。我建议您查看 Next.js文档！

文章来源：https://dev.to/george3447/setting-up-proxy-in-nextjs-for-dev-enviornment-1nh3

在 Next.js 中为 DEV 环境设置代理

在 Next.js 中为 DEV 环境设置代理

介绍

步骤 1

第 2 步

步骤3

请不要忘记在运行npm run build命令之前运行 set NODE_ENV。

步骤4

结论

请不要忘记在运行`npm run build`命令之前运行 set NODE_ENV。