NextJS 静态导出指定.env

Question

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

导出时，NextJS 默认使用

.env.production

，但是在本地开发时，我更喜欢它使用

.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

环境变量设置为

development

（对于其他任何内容，例如

production

），并将加载以下内容文件按从上到下的顺序：

export
.env.development.local
.env.local
.env.development
因此无需指定应使用

.env

— 它只需要存在于项目的根目录中即可。

.env.development

会在

.env.local

和

development

环境中加载，但不会在

production

中加载。

test

在所有三种环境中均已加载。

.env

中的变量将覆盖

.env*.local

、

.env

和

.env.development

中的相同变量。

Answer 3

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

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

创建一个包含以下内容的

.env.production
1. 脚本：
replace-env.sh

更新您的 Dockerfile 以合并此脚本：

#!/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 "$@"

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

# 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;"]

它有效！