nextjs配置端口以及不同的环境变量

一、安装cross-env1、解决方案一直接设置公开变量{ dev: cross-env NEXT_PUBLIC_APP_ENVdevelopment next dev -p 4400, dev:test: cross-env NEXT_PUBLIC_APP_ENVtest next dev -p 4400, build:prod: cross-env NEXT_PUBLIC_APP_ENVproduction next build }然后process.env.NEXT_PUBLIC_APP_ENV就会得到development test production2、解决方案二推荐脚本{ dev: cross-env APP_ENVdevelopment next dev, dev:test: cross-env APP_ENVtest next dev, build:prod: cross-env APP_ENVproduction next build }然后在next.config.tsimport type { NextConfig } from next; const APP_ENV process.env.APP_ENV ?? development; console.log(APP_ENV, APP_ENV); const nextConfig: NextConfig { env: { NEXT_PUBLIC_APP_ENV: APP_ENV, }, }; export default nextConfig;重启开发服务器。此时pnpm dev:test控制台APP_ENVtest浏览器process.env.NEXT_PUBLIC_APP_ENV↓test3、如果仍然显示 development检查.env.development是否有NEXT_PUBLIC_APP_ENVdevelopment因为next.config.ts的env配置和.env文件可能会同时存在。最简单的做法是删除所有.env*文件里的NEXT_PUBLIC_APP_ENV只保留NEXT_PUBLIC_API_URL...然后统一由// next.config.ts env: { NEXT_PUBLIC_APP_ENV: APP_ENV, }生成。这样不会出现.env.development development cross-env test两个来源打架的问题。二、根据APP_ENV注入对应的 API 地址const config { development: { apiUrl: https://dev-api.example.com, }, test: { apiUrl: https://test-api.example.com, }, production: { apiUrl: https://api.example.com, }, }; const APP_ENV process.env.APP_ENV ?? development; export default { env: { NEXT_PUBLIC_APP_ENV: APP_ENV, NEXT_PUBLIC_API_URL: config[APP_ENV].apiUrl, }, };这样process.env.NEXT_PUBLIC_API_URL才会随着pnpm dev pnpm dev:test pnpm build:prod自动切换。对于 Next.js 项目我通常会把所有环境配置集中到src/config/env.ts并通过APP_ENV → next.config.ts → NEXT_PUBLIC_*这一层映射来管理而不是在多个.env文件里维护同一套前端配置。这样类型更安全也更容易排查问题。三、配置端口以及开发启动打开默认浏览器先安装pnpm add -D concurrently wait-on open-cli然后修改package.json{ scripts: { dev: concurrently \next dev -p 4400\ \wait-on http://localhost:4400 open-cli http://localhost:4400\, dev:test: concurrently \cross-env APP_ENVtest next dev -p 4400\ \wait-on http://localhost:4400 open-cli http://localhost:4400\ } }启动pnpm dev或者pnpm dev:test服务启动完成后会自动打开默认浏览器访问http://localhost:4400为了避免端口写两遍推荐抽成变量{ scripts: { dev: cross-env PORT4400 concurrently \next dev -p %PORT%\ \wait-on http://localhost:%PORT% open-cli http://localhost:%PORT%\ } }但这在 Windows 和 macOS/Linux 上变量写法不同所以实际项目里很多人直接写死{ scripts: { dev: concurrently \next dev -p 4400\ \wait-on http://localhost:4400 open-cli http://localhost:4400\ } }最简单也最稳定。如果你已经有开发、测试、生产环境脚本我推荐这样整理{ scripts: { dev: concurrently \next dev -p 4400\ \wait-on tcp:127.0.0.1:4400 open-cli http://localhost:4400\, dev:test: concurrently \cross-env APP_ENVtest next dev -p 4400\ \wait-on tcp:127.0.0.1:4400 open-cli http://localhost:4400\, build:test: cross-env APP_ENVtest next build, build:prod: cross-env APP_ENVproduction next build, start:test: cross-env APP_ENVtest next start -p 4400, start:prod: cross-env APP_ENVproduction next start -p 4400 } }这样执行pnpm dev或pnpm dev:test时都会自动打开浏览器。