Next.js 环境变量

在 Next.js 中，我们可以使用环境变量来存储和管理我们的应用程序的配置。环境变量是应用程序用来引用特定于环境的配置信息的最佳方式。通常情况下，环境变量是在不同的环境（如开发、测试和生产环境）中使用的，因为在不同的环境中可能需要不同的配置信息。

配置环境变量

在 Next.js 中，我们可以通过在 .env 文件中定义环境变量来管理我们的配置。例如，我们可以在 .env 文件中定义一个名为 API_URL 的环境变量。

API_URL=http://localhost:3000/api

首先，我们需要在 next.config.js 中使用 dotenv 模块将 .env 文件加载到我们的环境变量中。

// next.config.js

const { parsed: localEnv } = require('dotenv').config()

module.exports = {
  env: {
    API_URL: localEnv.API_URL
  }
}

接着，我们就可以在应用程序中使用 process.env 来访问我们的环境变量。例如，我们可以这样来引用环境变量 API_URL。

// pages/index.js

export default function IndexPage() {
  return (
    <div>
      <h1>Index Page</h1>
      <p>API URL: {process.env.API_URL}</p>
    </div>
  )
}

预定义环境变量

Next.js 提供了一些默认的环境变量，可以在应用程序中使用。下面是一些常见的预定义环境变量：

• NODE_ENV: Node.js 环境变量 ('development'、'production'、'test')
• NEXT_PUBLIC_ENV_VAR: 公共环境变量，可以在客户端和服务器端使用
• NEXT_PRIVATE_ENV_VAR: 私有环境变量，只能在服务器端使用

我们可以通过 process.env 来访问这些预定义环境变量。例如，我们可以这样来引用环境变量 NODE_ENV。

// pages/index.js

export default function IndexPage() {
  console.log(process.env.NODE_ENV) // 'development'

  return (
    <div>
      <h1>Index Page</h1>
      <p>Node.js environment: {process.env.NODE_ENV}</p>
    </div>
  )
}

使用环境变量的注意事项

• 在客户端代码中使用环境变量时，务必使用 NEXT_PUBLIC_ 前缀。
• NEXT_PUBLIC_ 前缀将确保变量被构建到客户端代码中，并且不能用于在服务器端和构建过程中使用。
• 在服务器端代码中使用环境变量时，我们可以直接使用 process.env。
• 如果需要在构建过程中使用环境变量，则需要在命令行中设置环境变量，例如使用 export 命令（Unix 系统）或 set 命令（Windows 系统）。
• 需要注意的是，环境变量的值应该加以保护，以避免将不良的值导入应用程序。同时，应将环境变量放在不同的环境中，以便我们可以覆盖它们并保持应用程序的灵活性。

以上就是 Next.js 中使用环境变量的相关内容。通过了解这些，我们可以更好地管理我们的应用程序配置，从而使我们的开发过程更加高效。