Deploy Next.js 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 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:

  1. Sign up at Vercel.
  2. Connect your GitHub repository.
  3. Click "Import Project" and select your Next.js repo.
  4. Configure build settings (if needed).
  5. Click "Deploy".

First deploy

  1. Be sure, you have output: 'standalone' set at next.config.ts file located in root directory
  2. Generate Standalone version of the app 
    npx next build
  3. Set proper start command at package.json file located in root directory
    • Change "start": "next start" to "start": "node .next/standalone/server.js"
  4. Make static files accessible
    • Copy .next/static to .next/standalone/.next/static (→ .next/standalone/.next/static)
    • Copy public to .next/standalone/public (→ .next/standalone/public )
  5. Optional: In .deployment (in root directory), if exists, set SCM_DO_BUILD_DURING_DEPLOYMENT=false
  6. Deploy to WebApp

Re-deploy

  1. npx next build
  2. Make static files accessible
    • Copy .next/static to .next/standalone/.next/static (→ .next/standalone/.next/static)
    • Copy public to .next/standalone/public (→ .next/standalone/public )
  3. Deploy