NextJS 静态导出指定 .env

Question

我有一个带有 Django 后端的 NextJS 应用程序。 NextJS 应用程序是静态导出的，Django 应用程序也会重定向。

导出时，NextJS 默认使用 .env.development，但是在本地开发时，我更喜欢它使用 .env.development 但我不知道如何指定这一点。

当通过 npm run dev 运行时，它使用正确的 .env 但是，关于是否可以选择静态导出的信息有限 - 我刚刚切换根据需要显示文件的内容。

先感谢您！

Answer 1

当您运行 next dev 脚本时，next.js 将从 .env.development 加载环境变量

如果您运行 next start 脚本 next.js将从 .env.Production 加载环境变量

Next.js 默认情况下不使用 .env.Production 它使用 .env.local默认。 .env.local 将覆盖 .development 或 .Production 文件上的任何内容。

Answer 2

运行命令 next dev (npm run dev) 时，Next.js 将 NODE_ENV 环境变量设置为开发（生产用于其他任何内容，例如导出）并将按从上到下的顺序加载以下文件：

1. 。 env.development.local
2. .env.local
3. .env.development
4. .env

所以不需要指定 应该使用 .env.development - 它只需要存在于您的项目中根目录。

.env.local 在开发和生产环境中加载，但在测试中不加载。

.env 在所有三个环境中加载。

.env*.local 中的变量将覆盖 .env、.env.development 和 .env.Production 中的相同变量。

Answer 3

我发现了一种在 Next.js 应用程序中完成静态导出后动态更改环境变量的解决方案。通常，静态导出后无法更改环境变量，因为它在浏览器中运行。如果浏览器有权访问 process.env，它可能会暴露数据库凭证或 AWS 密钥等敏感信息，从而造成重大安全风险。但是，有一个解决方法涉及使用 process.NEXT_PUBLIC_* 变量。

要实现此解决方案，您需要在提供静态 HTML 文件之前替换 JavaScript 文件中的所有 NEXT_PUBLIC_* 变量。这可以使用 shell 脚本来完成。操作方法如下：

创建包含以下内容的 Replace-env.sh 脚本：

1. 创建包含以下内容的 replace-env.sh 脚本：

#!/bin/sh
# Function to replace environment variables in files using regex
replace_env_vars() {
  find /usr/share/nginx/html -type f -exec sed -i -E "s|NEXT_PUBLIC_GRAPHQL_ENDPOINT|\"$NEXT_PUBLIC_GRAPHQL_ENDPOINT\"|g" {} \;
}

# Call the function
replace_env_vars

# Execute any additional entrypoint commands, if needed
exec "$@"

2. 更新 Dockerfile 以合并此脚本：

# Use an appropriate base image
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json
COPY package.json package-lock.json ./

# Install dependencies
RUN npm install --force

# Copy the rest of the application code
COPY . .

# Build and export the Next.js application
RUN npm run build && npm run export

# Use a second stage to create a smaller final image
FROM nginx:alpine

# Copy the exported static files to the Nginx web root
COPY --from=builder /app/out /usr/share/nginx/html

# Add a script to replace environment variables in static files
COPY replace-env.sh /docker-entrypoint.d/

# Ensure the script is executable
RUN chmod +x /docker-entrypoint.d/replace-env.sh

# Expose the default Nginx port
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

3. 使用适当的容器运行容器环境变量：

docker run -e NEXT_PUBLIC_GRAPHQL_ENDPOINT=http://app-api.example.com -p 80:80 image-name

并且它有效！

Answer 4

当我做事情时，我注意到 NextJS 使用静态导出对 process.env 做了一些奇怪的事情。 PUBLIC 前缀变量似乎有效，但所有其他变量都被删除。由于 next-auth 似乎与导入 NEXTAUTH_URL 紧密结合，我必须找到一种不同的方法。

/** @type {import('next').NextConfig} */
export default {
  webpack(config) {
    config.plugins.push(new webpack.DefinePlugin({
      'process.env': { NEXTAUTH_URL: '"http://localhost:4040"' },
    }))
    return config
  },
  output: 'export',
}

这有效，注意双引号。 JSON.stringify 无法解析。

但无论如何，它确实没有改变任何东西，因为 next-auth 不支持外部身份验证端点。那好吧...