Deploy NextJS to cloud infrastructure
How to deploy NextJS app to a cloud?
Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static rendering.
See more at NextJS introduction.
Deploy
Vercel
Vercel is the easiest way to deploy Next.js applications. It provides automatic scaling, serverless functions, and a global CDN. In a Hobby version, running a nextjs appliaction if for free on vercel, including a custom domain integration.
To deploy your Next.js app on Vercel:
- Sign up at Vercel.
- Connect your GitHub repository.
- Click "Import Project" and select your Next.js repo.
- Configure build settings (if needed).
- Click "Deploy".
Azure Web App
First deploy
- Be sure, you have
output: 'standalone'set atnext.config.tsfile located in root directory - Generate
Standaloneversion of the appnpx next build - Set proper
startcommand atpackage.jsonfile located in root directory- Change
"start": "next start"to"start": "node .next/standalone/server.js"
- Change
- Make static files accessible
- Copy
.next/staticto.next/standalone/.next/static(→.next/standalone/.next/static) - Copy
publicto.next/standalone/public(→.next/standalone/public)
- Copy
- Optional: In
.deployment(in root directory), if exists, setSCM_DO_BUILD_DURING_DEPLOYMENT=false - Deploy directory
.next/standaloneto WebApp
Re-deploy
npx next build- Make static files accessible
- Copy
.next/staticto.next/standalone/.next/static(→.next/standalone/.next/static) - Copy
publicto.next/standalone/public(→.next/standalone/public)
- Copy
- Deploy directory
.next/standaloneto WebApp
NOTE: copying files after a build may be automated, see the guide below:
- Update
buildoption atpackage.json- For Windows, use this option:
next build && xcopy /E /I /Y .next\\static .next\\standalone\\.next\\static && xcopy /E /I /Y public .next\\standalone\\public
- For Windows, use this option:
- Build using command below:
npm run build
