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:
- Sign up to Vercel (no credit card is required).
- 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).
- 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!
- 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.