[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Discussions](/c/community/4) # Create a WEBSITE_URL env variable for all environments 1128 views · 4 likes · 1 post Vincent Voyer (@vvoyer) · 2024-08-29 · ♥ 4 ## Overview --- When deploying a Next.js application on Vercel, you may need to access your website url in code to craft URLs and links to your apps for various needs. Use cases: - Create a magic login link and send it via email - Crafting a webhook URL to be called by an external API - Configuring OAuth in all environments - Testing Open Graph in all environments - Create absolute URLs for various application needs - Add canonical URLs The URL requirements are usually: - It must be available in server (Route Handler, Server Actions, …) and client code. - It must be valid and relevant for development, preview, and production environments - in development: `https://localhost:3000` or similar - in [Preview Deployments](https://vercel.com/docs/deployments/preview-deployments): the [GIT branch url](https://vercel.com/docs/deployments/generated-urls#url-with-git-branch), so you can easily share a static URL of your upcoming feature. Example: `https://some-project-git-new-feature-project.vercel.app` . This URL will not change between commits/deployments to your branch. - in production: `https://vercel.com` If you want to do so when using Next.js and Vercel, here's how: ## Solution --- We’ll create a `NEXT_PUBLIC_WEBSITE_URL` environment variable that is usable in all environments and situations. We’re prefixing it with `NEXT_PUBLIC` so it’s available in the context of the server and client. **For development:** 1. Create a `.env.development.local` file 2. Add `NEXT_PUBLIC_WEBSITE_URL=http://localhost:3000` in it. 1. `localhost:3000` could be a domain pointing to your local Next.js instance. In my setup, I love using [ngrok](https://ngrok.com/) with a custom domain, so I can test everything locally as if it was deployed on the internet. **For Preview Deployments:** 1. Create a `.env.production` file (yes, Preview Deployments use `NODE_ENV=production`, so they use this file). 2. Add `NEXT_PUBLIC_WEBSITE_URL=https://$NEXT_PUBLIC_VERCEL_BRANCH_URL` 1. In most cases, this is what you want: a static branch url that won't change between commits to your branch. Alternatively, you can use `NEXT_PUBLIC_WEBSITE_URL=https://$VERCEL_URL`, which points to the [Generated Deployment URL](https://vercel.com/docs/deployments/generated-urls). **For production:** We’ll add a dedicated environment variable for production only: 1. Go to your project in the Vercel Dashboard 2. Click on the Settings tab (top right) 3. Click on Environment Variables 4. Create a new environment variable named (you guessed it) `NEXT_PUBLIC_WEBSITE_URL` 5. The value should be your production domain, like `https://vercel.com`  Ensure to check `Automatically expose System Environment Variables` in this UI too, which should be the default of any new Vercel project. *Alternatively, you can define a value of `https://$VERCEL_PROJECT_PRODUCTION_URL` in the UI, which will then expand to the shortest production domain for your project or a [vercel.app](http://vercel.app) domain if no production domain is configured.* **Use the new environment variable:** Now, whenever you need to craft an absolute URL pointing to: - Your local server - The preview branch url - The production domain You can do this in code: ```bash const url = `{$process.env.NEXT_PUBLIC_WEBSITE_URL}/never-gonna-give-you-up.mp4`; ``` That's it! ## Resources --- https://vercel.com/docs/projects/environment-variables/system-environment-variables https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables https://vercel.com/docs/deployments/generated-urls
