javascript 是否可以在next.js重写中使用环境变量？

92dk7w1h 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(136)

我用next.js前端和express.js后端开发我的应用程序，只需在终端中运行相关的dev服务器。但是，我想使用Docker运行生产环境，其中我的API的ip将是容器的名称，而不是localhost。我还想使用不同的端口进行开发和生产。
在开发过程中，我只是进行了硬编码重写，就像这样：

const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: `http://localhost:5000/api/:path*`,
      },
      {
        source: "/auth/:path*",
        destination: `http://localhost:5000/auth/:path*`,
      },
    ];
  },
};

module.exports = nextConfig;

而且效果很好然而，当我开始转向生产时，我希望基于环境变量来确定目标URL，因此在开发环境中，/API的目标将是http：//localhost：5000/api，而在生产环境中，它将是http：//api：5100/api（引用api Docker容器）。
经过一段时间的努力，我试图找出为什么这不起作用，我遇到了这个GitHub问题：https://github.com/vercel/next.js/issues/21888它基本上说你不能在next.config.js中使用环境变量。
那么，有没有一种不同的方式来进行环境相关的重写，因为这似乎不是一个选项？

JavaScript

来源：https://stackoverflow.com/questions/76568066/is-it-possible-to-use-environment-variables-in-next-js-rewrites

1条答案

按热度按时间

iqih9akk1#

请看你是否可以用middleware解决这个问题。与next.config.js不同，中间件会获取运行时环境变量。

// middleware.ts

import { NextRequest, NextResponse } from "next/server";

export const config = {
  matcher: ["/api/:path*", "/auth/:path*"],
};

export function middleware(request: NextRequest) {
  return NextResponse.rewrite(
    new URL(
      `${process.env.API_HOST}${request.nextUrl.pathname}${request.nextUrl.search}`
    ),
    { request }
  );
}

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 是否可以在next.js重写中使用环境变量？

1条答案

相关问题

热门标签

最新问答