nextjs - 使用 NODE_ENV=development 进行下一个构建

Question

我想将我的nextjs项目构建为开发模式。

我试过喜欢它

包.json

{
  ...
  "scripts": {
    "dev": "next",
    "build:dev": "set NODE_ENV=development & next build",
    "build:prod": "set NODE_ENV=production & next build",
    "start:dev": "set NODE_ENV=development & next start",
    "start:prod": "set NODE_ENV=production & next start"
  }
  ...
}

下一个.config.js

module.exports = withSass({
  env: {
    baseUrl: process.env.NODE_ENV === "development" ? "devServerURL": "prodServerURL"
  }
});

但我无法实现我想要的。

所以，我尝试了一些改变。

包.json

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start:dev": "set NODE_ENV=development & next start",
    "start:prod": "set NODE_ENV=production & next start"
  }

但它也不起作用。

如何构建nextwith 开发模式？

提前致谢。

编辑

我的操作系统是 Windows 10。

Answer 1

2022 年 11 月 23 日更新：

请参阅如何从package-json 中设置环境变量。

简而言之：
"start:dev": "NODE_ENV=development next start"

你可能需要（在 Windows 上？我不知道）：cross-env
"start:dev": "cross-env NODE_ENV=development next start"

现在提供了更具体的文档（也许要求也发生了变化，也可能没有）：

环境变量加载顺序：

...注意：NODE_ENV 允许的值为生产、开发和测试。

非标准节点环境：

...仅允许三 (3) 个值：

• 生产：当您的应用程序在下一个版本中构建时
• 开发：当您的应用程序与下一个开发人员一起运行时
• 测试：当您的应用程序正在测试时（例如笑话）

原答案：

请参阅问题 #9123（2019 年 10 月 18 日） ：

NODE_ENV 是一个保留的环境变量，无法更改。唯一有效的值是生产、开发和测试。

如果您需要在不同的生产环境中更改应用程序行为，请使用不同的变量，例如 APP_ENV。

以及问题 #17032（2020 年 9 月 12 日）：

process.env.NODE_ENV只有 2 个可能的值development和 production。如果未将其设置为该值，您将遇到各种库边缘情况（尤其是在 node_modules 中），从而获得严重去优化的结果。例如，如果您运行性能测试，如果process.env.NODE_ENV未设置为生产，您会得到明显更差的结果

Answer 2

简答

1. 将您的 dev-env 机密放入.env.dev
2. 将您的 prod-env 秘密放入.env.prod
3. 不要将秘密保存在.env.local. 接下来他们将被带到那里。
4. 将以下内容添加到您的package.json脚本中。

"build-dev": "cp .env.dev .env.local && yarn build",
"build-prod": "cp .env.prod .env.local && yarn build"

6. 如果有效，请点赞并享受。

此外，

1. 您可能想要添加一个变量APP_ENV。
2. 将其设置为development并production基于文件。
3. process.env.APP_ENV根据您的脚本调用进行访问。

请记住，process.env.NODE_ENV将始终出现production在上述所有 3 个脚本中。并且不要以 nextjs 的构建命令可以检测到的标准格式存储 env 文件。也许使用.env.dev, .env.stg,.env.prod

长答案

现在是 2023 年中期，我希望有一个简单的解决方案。以下是我从 React/vite 到 Nextjs 的工作原理，有 2 个不同的环境文件。

使用罗德里戈的答案我首先重命名

• .env.development到.env.dev
• .env.production到.env.prod

这样 next.js 不会在构建过程中自动选择它们，但它们保留在本地系统上。

如果我不这样做，那么.env.production在部署到dev我不想要的环境期间，优先级就会启动并选择。

接下来我将 package.json 中的脚本修改为

"build":"yarn build"

"predeploy": "cp .env.dev .env.local",
"deploy": "firebase use development && firebase hosting:channel:deploy dev",

"predeployprod": "cp .env.prod .env.local",
"deployprod": "firebase use production && firebase deploy -P production"

简要了解Next JS 优先顺序。

它的作用是基于我的“调用”，无论我是否想要部署到 dev/prod env，它都会为文件提供正确的秘密.env.local。

例如，假设我想部署到开发人员。我运行yarn deploy->yarn predeploy首先自动运行，将我的 dev-secrets 设置为.env.local. 其次，它运行构建。

你可能想知道 nextjs 的构建命令在哪里？ firebase deploy负责并在幕后运行它。

如果您不使用 firebase 以下内容就足够了。

"build-dev": "cp .env.dev .env.local && yarn build",
"build-prod": "cp .env.prod .env.local && yarn build"