Next.js环境变量

在本文中，我们将学习如何在Next.js中使用环境变量。Next.js内置了对环境变量的支持，您可以在项目的任何地方声明和使用。

按照以下步骤设置Next.js应用程序中的环境变量。

步骤1： 在终端中运行以下命令创建一个新的Next.js应用程序：

npx create-next-app GFG

步骤2： 在创建项目文件夹之后（例如 GFG），通过使用以下命令进入该文件夹：

cd GFG

项目结构： 就会像这样。

Next.js环境变量

步骤3： 创建 .env.local 文件 – 我们将创建一个 .env.local 文件，用于创建特定于我们本地机器的环境变量。您还可以使用其他类型的环境变量文件，例如：

.env
.env.[environment]
.env.[environment].local
.env.development
.env.development.local

创建文件后，我们可以将环境变量存储在其中。

示例： 我们可以有以下数据的 .env.local 文件。

KEY="GEEKSFORGEEKS"
ID=85674

步骤4：访问环境变量 – 现在您可以使用’process.env.VARIABLE_NAME’访问您的环境变量。为了尝试这个功能，让我们从NextJs应用程序的主页访问我们的环境变量。

文件名： pages/index.js

JavaScript

export const getServerSideProps = async () => { 
  return { 
    props: { 
  
      // Returning value of Environment 
      // variable as prop 
      value: process.env.KEY, 
      id: process.env.ID, 
    }, 
  }; 
}; 
  
export default function Home({ value, id }) { 
  return ( 
    <div> 
      {/* Adding Heading */} 
      <h1>This is Homepage</h1> 
  
      {/* Adding the value of Environment variable */} 
      <h2>Value of KEY variable:- {value}</h2> 
      <h2>Value of ID variable:- {id}</h2> 
    </div> 
  ); 
}

步骤5：运行应用程序 – 运行以下命令启动服务器。