Next.js deploy

July 12, 2022 . 2 MIN READ

Deploy a Next.js App to App Platform

Next.js is a powerful framework built on top of React that helps you build applications quickly. It includes features like image optimization, file-based routing, code splitting, and incremental static generation.

When deploying a Next.js app, you have two main options:

1. Static Export

This approach generates all your pages as static HTML files. It provides fast performance since everything is pre-built.

Best for:

  • Small to medium sites

  • Projects with fewer pages

  • Simple blogs or landing pages

2. Custom Server (Dynamic)

This method uses a Node.js server to generate pages dynamically or serve them statically when needed.

Best for:

  • Large websites (e.g., eCommerce, big blogs)

  • Thousands of pages

  • Projects requiring incremental static regeneration

Prerequisites

Before you begin, make sure you have:

  • A GitHub account

  • Node.js installed locally

  • A code editor (e.g., Visual Studio Code)

  • Basic knowledge of JavaScript

Step 1: Create a Next.js App

Use the following command to create a new app:

npx create-next-app my-next-app

Navigate into the project:

cd my-next-app
npm run dev

Step 2: Push Code to GitHub

Create a new repository on GitHub, then run:

git remote add origin https://github.com/your_username/my-next-app
git branch -M main
git push -u origin main

Deploy as a Static Site

Step 3: Configure Static Export

Update your package.json:

“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“export”: “npm run build && next export -o _static”
}

Run:

npm run export

This generates a _static folder with all HTML files.

Step 4: Prepare for Deployment

Add _static to .gitignore:

_static

Then push changes:

git add -A
git commit -m “Add export command”
git push

Step 5: Deploy on App Platform

  1. Go to your App Platform dashboard

  2. Create a new app from your GitHub repo

  3. Select:

    • Type: Static Site

    • Build Command: npm run export

  4. Choose region and enable auto-deploy

  5. Launch the app

Your site will be live with a public URL.

Deploy as a Custom Server

For dynamic rendering and incremental static regeneration:

Step 6: Update Start Script

Modify package.json:

“start”: “next start -H 0.0.0.0 -p ${PORT:-8080}”

Step 7: Push Changes

git add -A
git commit -m “Update start command”
git push origin main

Step 8: Deploy as Web Service

  1. Create a new app in App Platform

  2. Select your GitHub repo

  3. Configure:

    • Type: Web Service

    • Build Command: npm run build

    • Start Command: npm start

  4. Choose a paid plan (e.g., Basic)

  5. Launch the app

Final Notes

  • Static export is faster but less flexible

  • Custom server supports dynamic content and scaling

  • App Platform auto-deploys when you push updates to GitHub

Reference:

https://docs.digitalocean.com/tutorials/app-nextjs-deploy/

Leave a Reply

Your email address will not be published. Required fields are marked *

Anwar

Anwar

RECENT POSTS

TAGS

You Might Be Interested In

Tags

Navigation

Newsletter