---
title: "Environment variables in Next.js and Netlify"
description: "Both Next.js and Netlify come with built-in support for environment variables. Learn how to use them!"
source: "https://www.netlify.com/blog/2020/12/10/environment-variables-in-next.js-and-netlify/"
last_updated: "2026-07-11T00:57:06.000Z"
---
Welcome to Blogvent, day 10!

If you’d like to use environment variables in Next.js, make a `.env.local` file at the root and you can use them all there! It might look something like this:

```
// .env.localSITE_URL=localhostSITE_KEY=hahabusiness
```

That being said, these variables are only exposed to the Node.js environment like this, not the browser. If you want to use them, you’ll have to use them only in your API routes, or in the data fetching methods like `getStaticProps` in your page components. For example, it might look like this:

pages/index.js

```
export default function Home(props) {  return (    // ...  )}
// ...
export async function getStaticProps() {  const siteData = await someService({    url: process.env.SITE_URL,    key: process.env.SITE_KEY  })  // ...}
```

If you want your environment variables to be exposed to the browser and be usable in your client-facing components, in your `.env.local` you have to prefix the variable with `NEXT_PUBLIC_`.

```
// .env.localSITE_URL=localhostSITE_KEY=hahabusinessNEXT_PUBLIC_PAYMENT_TOKEN=thisispublic // this one is exposed to the browser
```

## Setting environment variables in the Netlify UI

When you’ve deployed your site, you can set your environment variables in the Netlify UI. Head over to the Build & Deploy settings in your Site Settings, and then plug your values in under “Environment variables”:

![Environment Variables in the UI](/v3/img/blog/envnext.png "Environment Variables in the UI")

You can also [use the Netlify CLI](https://docs.netlify.com/cli/get-started/#link-with-an-environment-variable) to use environment variables set in the UI (or even set them from the CLI, too)!

## Is there more?

There’s always more! There’s _so many_ things that you can do with environment variables on Netlify. Here’s some useful docs and guides for how to take full advantage of them:

-   [Build environment variables](https://docs.netlify.com/configure-builds/environment-variables/?utm_source=blog&utm_medium=envvars-cs&utm_campaign=devex)
-   [Build settings in netlify.toml](https://docs.netlify.com/configure-builds/file-based-configuration/?utm_source=blog&utm_medium=envvartoml-cs&utm_campaign=devex#build-settings)
-   [Example of environment variables in use in Next.js](https://github.com/cassidoo/next-adventure/blob/master/functions/get-character.js#L21-L24)

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=Environment variables in Next.js and Netlify&url=https://www.netlify.com/blog/2020/12/10/environment-variables-in-next.js-and-netlify//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F10%2Fenvironment-variables-in-next.js-and-netlify%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/10/environment-variables-in-next.js-and-netlify//)
-   [Bluesky](https://bsky.app/intent/compose?text=Environment variables in Next.js and Netlify+https://www.netlify.com/blog/2020/12/10/environment-variables-in-next.js-and-netlify//)

* * *

### Tags

-   [Next.js](/blog/tags/next.js/)
-   [blogvent](/blog/tags/blogvent/)

## Keep reading

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 4, 2020

[

### “Escaping” Next.js to access the browser

](/blog/2020/12/04/escaping-next.js-to-access-the-browser/)

-   ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp)
    
    Cassidy Williams
    

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 9, 2020

[

### Global Styles in Next.js

](/blog/2020/12/09/global-styles-in-next.js/)

-   ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp)
    
    Cassidy Williams
    

## Recent posts

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

News & Announcements June 24, 2026

[

### How we measure Netlify’s Agent Experience

](/blog/how-we-measure-netlify-agent-experience)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

Guides & Tutorials May 15, 2026

[

### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)

](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)