Sebastian Gomez

Apr 11, 2023

Updated: Jun 25, 2026

Deploying Next.js apps with Vercel

Depending on how you built your application, you can deploy it in different places. For example, if your app is fully generated as static (SSG), you can use a basic server that only serves static files, like Firebase Hosting or GitHub Pages. To dig deeper into SSG and the rendering modes in Next.js, check out this post: Rendering modes in Next.js.

Valid as of Next.js 16: The concept is intact. Vercel is the company that created Next.js, still maintains a very generous free tier (Hobby), and Git integrated auto deploy works exactly as we describe here. The only thing that changed since 2022 is the static export tooling: the old next export command was deprecated in Next.js 13.3 and removed in Next.js 14, so below you'll see the current workflow.

Deploying with static servers

To generate a fully static version of your app, you no longer use the old next export command. Today static export is enabled from the config. Add output: 'export' to your next.config.js:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    // The image optimizer needs a server, so for static export you have to
    // disable it to keep using next/image.
    unoptimized: true,
  },
};

module.exports = nextConfig;

Then run the normal build:

next build

Next.js will emit the static site into the out/ directory. Upload that folder to the corresponding server or wire it into your own continuous integration and deployment pipeline.

Tip: Static export has limits. Since there's no server, you can't use dynamic server features. That means no export const dynamic = 'force-dynamic', no Route Handlers with runtime server logic, and next/image requires images.unoptimized: true (as shown above). If your app relies on dynamic rendering, deploy it on a server backed platform like Vercel instead.

The simplest option: Vercel

The simplest way to deploy your Next.js application is with Vercel, the company that literally created Next.js. On top of that, they offer a very comfortable free tier for apps built with Next.js. You only need to run one command to deploy your app.

Get familiar with the Vercel website

Visit the Vercel website to discover interesting features and learn how its free offering works, which, for being free, is pretty generous.

Installing Vercel

First, install Vercel as a global Node package:

npm i -g vercel

Tip: If you'd rather not install anything globally, you can use npx vercel and get exactly the same result.

Deploying with Vercel

To deploy your application with Vercel, just run the following command in your console:

vercel

Then follow the on screen instructions.

You can also set up deployment from your GitHub repository and link both services. From the Vercel dashboard, choose Add New, Project, import your GitHub repository, and authorize access. From that point on, every push to your main branch triggers an automatic production deployment, and every Pull Request gets its own Preview Deployment with a unique URL to review the changes before merging.

Conclusions

• There are different options for deploying Next.js apps, but Vercel is the simplest and most recommended.
• Vercel, the company behind Next.js, offers a free tier for deploying apps built with Next.js.
• Deploying a Next.js app on Vercel is as simple as running one command and following the instructions.

Suggested exercises

1. Deploy a simple Next.js app as a static site (output: 'export' plus next build) on Firebase Hosting or GitHub Pages.
2. Deploy the same app using Vercel and compare the deployment experience between the two options.
3. Research and experiment with the Vercel and GitHub integration to automate deploying your Next.js app every time you make a change in your repository.

3-point summary

1. There are different options for deploying Next.js apps, such as static servers (Firebase Hosting, GitHub Pages, with output: 'export') and Vercel.
2. Vercel is the company that created Next.js and offers a free, easy to use service for deploying Next.js apps.
3. You can deploy your Next.js app on Vercel by running a single command, and you can also automate the process by linking your GitHub repository with Vercel.

That's all, I hope this post was useful and that you can apply it to a project you have in mind. If it helped you understand how to deploy Next.js apps on Vercel, leave me a comment below. Also, if you have any opinion or question, don't hesitate to comment. Remember that if you liked the article, you can share it on social media using the links at the end of the post. Good luck with your deployments.