DEV Community

Cover image for How to Create Multiple Environments with Vercel (Zeit Now) and Next.js?
Andrew
Andrew

Posted on

How to Create Multiple Environments with Vercel (Zeit Now) and Next.js?

#nextjs #vercel #environment
Vercel (formerly Zeit Now) does not just help us host our application, but also provides multiple environments for us to preview every change we made. So we can make sure all the new features are working perfectly before we launch a new version to our users. And we can also separate the database between development, preview (stage), and production environment. In this article, I will display how to create multiple environments by using Vercel and Next.js. And how to apply different environment variables for each environment.

Agenda

Start a Next.js project and Deploy Through Vercel

  1. Init a Next.js project 
npx create-next-app [ProjectName]
Enter fullscreen mode Exit fullscreen mode
  1. Create repository at GitHub, GitLab, or Bitbucket. And link to our project. 
git remote add origin git@github.com:[GitHubAccount]/[ProjectName].git
git push -u origin master
Enter fullscreen mode Exit fullscreen mode
  1. Import Git Repository to Vercel
  • select the git provider: GitHub, GitLab, Bitbucket deploy to vercel
  • connect to your git provider
  • import our repository into Vercel to create the project import project if we can't find the repo we want, adjust repository access setting in the git provider. repository access
  • leave all the settings as default settings
  • click the link to check our application after the status change from Building to Ready deploy status

Now, we have deployed our application online. Let's check how to create multiple environments for our application.

Apply Environment Variables for Multiple Environments

The environments provide by Vercel: Production, Preview, and Development

We will see that Vercel provides multiple links for the deployment.

link environments

And there are three different environments in Vercel.

vercel environment

So, what's the relationship between those links and the environments (production, preview, development)?

  1. Vercel default provide two URLs for each project:
    • [ProjectName].now.sh
    • [ProjectName].[VercelAccount].now.sh
  2. Vercel will create an URL with a random hash for each deployment:
    • [ProjectName]-[hash].now.sh
  3. If we deploy to the production environment, then both URLs will be linked to this deployment.
  4. If we deploy to the preview environment, then only [ProjectName].[VercelAccount].now.sh will be linked to this deployment.
  5. Development is for our local environment.
Production Preview Development
[ProjectName].now.sh v x x
[ProjectName].[VercelAccount].now.sh v v x
[ProjectName]-[hash].now.sh v v x
localhost:xxxx x x v

And of course we can customize the URL, just click View Domains and add the domain we want.

control

Furthermore, we can bind the domain with a specific git branch.

domain with branch

Set environment variables at Vercel

We can set different environment variables for all three environments.

Dashboard > Project > Settings > General
environment variables setting

And Vercel provides a few system environment variables for us.

system environment variables

Set environment variables at Next.js

After finishing the setting of the environment variables at Vercel, now let's check how to apply those variables in the Next.js project.

(In this article, we use .env for environment variables. It is for Next.js versions 9.4 and up. If you’re using an older version of Next.js, check Environment Variables in next.config.js.)

To apply environment variables in the Next.js project, we need to create a .env.local file at the root folder.

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
Enter fullscreen mode Exit fullscreen mode

Or we can download the variables from the Vercel.

  1. Install Vercel cli 
npm i -g vercel
or
yarn global add vercel
Enter fullscreen mode Exit fullscreen mode
  1. Download development environment variables 
vercel env pull .env.local
Enter fullscreen mode Exit fullscreen mode

And we can bind the download command with the dev script. This will make sure we always apply the latest variables.

{
  "scripts": {
    "predev": "vercel env pull .env.local",
    "dev": "next",
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

Because Next.js is a server-side render framework, the environment variables have a little difference between the client (browser) and server-side.

  1. server (node.js) It loads process.env.xxx into the Node.js environment automatically allowing us to use them in Next.js data fetching methods (getStaticProps, getServerSideProps) and API routes. 
   export async function getStaticProps() {
     const db = await myDB.connect({
       host: process.env.DB_HOST,
       username: process.env.DB_USER,
       password: process.env.DB_PASS,
     });
     // ...
   }
Enter fullscreen mode Exit fullscreen mode
  1. client (browser) If we want to use those variables at the client-side, then we need to prefix the variable with NEXT_PUBLIC_. This will allow us to use those variables anywhere in our code. 
   import setupAnalyticsService from "../lib/my-analytics-service";

   setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID);

   export default function HomePage() {
     return <h1>Hello World</h1>;
   }
Enter fullscreen mode Exit fullscreen mode

⚠ We need to be careful when prefixing the variable with NEXT_PUBLIC_. Never public important information like the token or password.

Deploy the Application to Different Environments

The last part of this article is about how to deploy our application to the preview and production environment. This is quite straightforward by using Vercel Cli.

  1. Deploy to preview environment 
vercel
Enter fullscreen mode Exit fullscreen mode
  1. Deploy to production environment 
vercel --prod
Enter fullscreen mode Exit fullscreen mode

Except manually deploy through Vercel Cli, if we create the project by git provider, then Vercel will handle the deploy automatically.

  • Pushing or merging to the default branch (commonly "master") will trigger the production deployment.
  • Pushing or pull requests made to branches will trigger preview deployment. branch-preview

Conclusion

Here is the source code for reference. Thanks for reading. Feel free to leave the comments if you have any questions or suggestions.

GitHub logo oahehc / vercel-nextjs-now-example

an example to display how to use Next.js and Vercel now to create a multiple environments for our application

--

Reference

Top comments (0)

Read next

ethernmyth profile image

Playing with Python in node

Ethern Myth -

timreach profile image

Using fonts in Storybook for Next.JS and Tailwind Projects

timreach -

thatanjan profile image

2 ways to 🔧 set up Nextjs with MongoDB 🛢️ and Mongoose

Anjan Shomodder -

c0xxxtv profile image

【React.js】Making a Simple Toast Message Component with useContext and React Portal　-part1-

Kota Ito -