Deployment

    If you haven’t already done so, push your Next.js app to a Git provider of your choice: , GitLab, or . Your repository can be private or public.

    Then, follow these steps:

    1. Sign up to Vercel (no credit card is required).
    2. After signing up, you’ll arrive on the page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / / BitBucket).
    3. Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
    4. After importing, it’ll deploy your Next.js app and provide you with a deployment URL. Click “Visit” to see your app in production.

    Congratulations! You’ve just deployed your Next.js app! If you have questions, take a look at the .

    DPS: Develop, Preview, Ship

    Let’s talk about the workflow we recommend using. supports what we call the DPS workflow: Develop, Preview, and Ship:

    • Develop: Write code in Next.js. Keep the development server running and take advantage of React Fast Refresh.
    • Ship: When you’re ready to ship, merge the pull request to your default branch (e.g. ). Vercel will automatically create a production deployment.

    By using the DPS workflow, in addition to doing code reviews, you can do deployment previews. Each deployment creates a unique URL that can be shared or used for integration tests.

    is made by the creators of Next.js and has first-class support for Next.js.

    • Every page can either use Static Generation or .
    • Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from the , which is blazingly fast.
    • Pages that use Server-Side Rendering and will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.

    Custom Domains, Environment Variables, Automatic HTTPS, and more

    • Custom Domains: Once deployed on , you can assign a custom domain to your Next.js app. Take a look at our documentation here.
    • Environment Variables: You can also set environment variables on Vercel. Take a look at . You can then use those environment variables in your Next.js app.
    • More: to learn more about the Vercel platform.

    Other hosting options

    Next.js can be deployed to any hosting provider that supports Node.js. This is the approach you should take if you’re using a .

    Make sure your package.json has the and "start" scripts:

    builds the production application in the .next folder. After building, starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.