Next.js on Vercel

Next.js, the React Framework, is the perfect solution for hybrid applications built with static assets and serverless functions.

Next.js was created by Vercel, and since its creation it has been actively maintained and supported by Vercel and its growing community of developers. You can expect first class support of all Next.js features out the box with no configuration required.

Once you have signed up to Vercel, you can use our Git Integrations with GitHub, GitLab, or Bitbucket to deploy an existing Next.js project by selecting a repository from your Git account:

If you don't have an app yet, use the quickstart below, based on our Next.js Example, to get started with Next.js and Vercel as fast as possible:

Next.js

Read the guide

Deploy

Live Example

Furthermore, in the "Import Git Repository" section of the "New Project" page you can create a project using one of the examples in the Next.js repo.

To learn more about Next.js, check out the official learning course, created by the Next.js team. It's an interactive course to get you started with Next.js while building your own blog.

Any Next.js app is compatible with Vercel from the start. Vercel configuration (vercel.json) is not required to get your app up and running. Furthermore, most of the features handled by vercel.json are already covered by Next.js itself.

With the exclusion of custom servers, which can't be deployed on Vercel, every Next.js feature should work out of the box, including (but not limited to):

• An intuitive page-based routing system, with support for dynamic routes and catch all routes.
• Hybrid pages that are pre-rerendered by default. You can choose between Static Generation and Server-side Rendering on a per-page basis, with included support for Incremental Static Regeneration of static pages.
• Environment Variables support for Secrets and default configurations.
• Client-side routing with optimized prefetching.
• API routes to build API endpoints with Serverless Functions.
• Custom routes for rewrites, redirects, and headers.
• Trailing Slash support.
• Static File Serving.
• Preview Mode.
• Image Optimization.
• Analytics.
• Internationalization.

Next.js will give you the best developer experience, and Vercel will optimize and scale your application.

Static assets (JS, CSS, images, etc) will be served from our global edge network. API routes, and pages that use Server-side Rendering, will automatically become isolated Serverless Functions.

While working with Next.js, your focus should be on the Next.js documentation. Vercel won't change or dictate how your Next.js application should be built. This section will focus on how some of Vercel features relate to Next.js.

In a Next.js application, you can use Environment Variables to add secrets in a .env.local file. For example:

# .env.local
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

This loads process.env.DB_HOST, process.env.DB_USER, and process.env.DB_PASS into the Node.js environment, allowing you to use them in Next.js data fetching methods and API routes. For example, using getStaticProps:

// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  });
  // ...
}

Because secrets are private, .env.local is ignored by git and it won't be available for deployments, this is expected as it's only intended to be used in development.

To make secrets work in a Vercel project, you can add Environment Variables in your Project Settings that match the variables inside .env.local. For example, you would add the variables from the example above like so:

Adding Environment Variables to Vercel projects.

Production deployments will now have access to the required environment variables, without having to expose them in your repo.

We can go one step further and add development secrets in the "Development" tab, which can then be downloaded to .env.local in your local project:

vercel env pull .env.local

next export allows your app to be statically exported, however, it's not required for Vercel deployments as Next.js pages will be automatically exported to HTML whenever possible thanks to the hybrid nature of pages. Vercel will automatically serve static assets from the global edge network.

With Next.js you don't have to lock into static only or serverless only, instead you are free to decide on the go, in a per-page basis.