Configuring Your Project

Whenever you create a new Project on Vercel, the platform will try to preselect the right default configuration for you.

For example, this happens through detecting which frontend framework you're using, and then selecting the right Build & Development Settings for your Project automatically, or applying default routing rules based on the framework that was detected.

These defaults will let you deploy your Project to Vercel with zero configuration. Note that you can customize the defaults as needed during the process of creating your Project.

Routing Rules

If you'd like to forward a URL path to a different one, apply headers to it, rewrite it, or change its visual appearance, you can do so by configuring custom routing rules.

Frameworks typically provide their own configuration file for this purpose. If they don't, you can still configure routing rules on Vercel through your vercel.json file:

With Next.js, you can configure rewrites, redirects, and headers by placing them inside a file named next.config.js:

next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: false,
      },
    ];
  },
};

Configuring a redirect that forwards visitors from the /about URL path to /.

Take a look at your framework's documentation to learn more about which routing rules it supports. Vercel will automatically accept those out of the box.

In the case that your framework doesn't provide the kind of routing rule you need, you can configure rewrites, redirects, headers, trailing slashes, and HTML extension stripping by placing them inside a file named vercel.json instead.

If you're unsure about whether your Project would benefit from one of the routing rules mentioned above, check out the respective documentation sections to learn about their individual purposes before using them.

API Routes

To allow for serving data from the server-side to browsers or other types of clients, and consuming it, you can configure API Routes.

Instead of placing your entire API in a single server, Vercel will automatically deploy and scale each of your API Routes as an independent service, which is enabled through defining them as Serverless Functions.

To deploy a Next.js API Route as a Serverless Function, you can create a new file inside the /pages/api folder.

pages/api/hello.ts

import { NextApiRequest, NextApiResponse } from 'next';
 
export default function handler(
  request: NextApiRequest,
  response: NextApiResponse,
) {
  response.status(200).json({
    body: request.body,
    query: request.query,
    cookies: request.cookies,
  });
}

An example Next.js API Route deployed as a Serverless Function.

Learn more about Serverless Functions.

Environment Variables

After creating your Project, you can configure custom Environment Variables. These are key-value pairs configured outside your source code so that each value can change depending on the Environment:

Production (used for your main traffic)
Preview (used for reviewing changes)
Development (used for local development)

If you'd like to configure different variables for each Environment, you can do so on the Environment Variables page in the Project Settings:

The Add New section of the Environment Variables page in the Project Settings.

For example, Production could be used to connect to a database containing real user data, while Preview and Development should only connect to a separate database containing testing data.

Learn more about Environment Variables.

Up Next

Continue getting started with Vercel:

Assigning a Custom Domain

Learn how to assign a custom Domain to your Project, which people can then use to access your Production Deployment.