Introduction to Environment Variables in Next.js
Environment variables are a crucial part of any web application, allowing you to configure your app without modifying the codebase. In Next.js, environment variables can be used to store sensitive information, configure third-party services, and optimize performance.
Setting Environment Variables
To set environment variables in Next.js, you can use a .env file or define them in your next.config.js file. The .env file is recommended for sensitive information, while next.config.js is better suited for non-sensitive variables.
// .env
MY_VARIABLE=hello
ANOTHER_VARIABLE=world
// next.config.js
module.exports = {
env: {
MY_VARIABLE: 'hello',
ANOTHER_VARIABLE: 'world',
},
}
Using Environment Variables in Next.js Pages
To access environment variables in your Next.js pages, you can use the process.env object.
// pages/index.js
import Head from 'next/head'
function HomePage() {
return (
<div>
<Head>
<title>Home Page</title>
</Head>
<h1>{process.env.MY_VARIABLE}</h1>
<h2>{process.env.ANOTHER_VARIABLE}</h2>
</div>
)
}
export default HomePage
Comparison of Environment Variable Storage
The following table compares the different methods of storing environment variables in Next.js:
| Method | Description | Recommended For | | --- | --- | --- | | .env file | Stores sensitive information in a file that is not committed to the codebase | Sensitive information, such as API keys | | next.config.js | Defines non-sensitive environment variables in the Next.js configuration file | Non-sensitive information, such as third-party service configurations | | Environment variables in the terminal | Sets environment variables in the terminal before running the Next.js development server | Development and testing environments |
Best Practices for Using Environment Variables
When using environment variables in Next.js, it's essential to follow best practices to ensure security and flexibility.
- Use a .env file for sensitive information and next.config.js for non-sensitive variables.
- Avoid committing sensitive information to your codebase.
- Use environment variables to configure third-party services and optimize performance.
- Use a tool like json-formatter to format and validate your JSON configuration files.
Real-World Example: Using Environment Variables to Configure a Third-Party Service
In this example, we'll use environment variables to configure a third-party service, such as a payment gateway.
// .env
PAYMENT_GATEWAY_API_KEY=YOUR_API_KEY
PAYMENT_GATEWAY_API_SECRET=YOUR_API_SECRET
// pages/payment.js
import axios from 'axios'
function PaymentPage() {
const paymentGatewayApiKey = process.env.PAYMENT_GATEWAY_API_KEY
const paymentGatewayApiSecret = process.env.PAYMENT_GATEWAY_API_SECRET
const handlePayment = async () => {
try {
const response = await axios.post('https://payment-gateway.com/api/charge', {
apiKey: paymentGatewayApiKey,
apiSecret: paymentGatewayApiSecret,
amount: 10.99,
})
console.log(response.data)
} catch (error) {
console.error(error)
}
}
return (
<div>
<button onClick={handlePayment}>Make Payment</button>
</div>
)
}
export default PaymentPage
To take your Next.js development to the next level, try using base64-encoder to encode and decode sensitive information, such as API keys and secrets. Additionally, use json-validator to validate and format your JSON configuration files.