Build and Deploy

🚀 Next.js Build and Deploy: From Code to the World!

Imagine you’ve built an amazing LEGO castle. Now you want to show it to everyone! But first, you need to pack it carefully, decide how to display it, and choose the best place to put it. That’s exactly what building and deploying your Next.js app is all about!

🏗️ The Big Picture: Your App’s Journey

graph TD
    A["Your Code"] --> B["Production Build"]
    B --> C["Build Output"]
    C --> D{How to Deploy?}
    D --> E["Vercel"]
    D --> F["Self-Host"]
    D --> G["Static Export"]

Think of it like baking cookies:

1. Your code = the recipe and ingredients
2. Build = baking in the oven
3. Deploy = putting cookies on a plate for everyone to enjoy!

1️⃣ Production Build

What Is It?

A production build is like packing your toys super neatly before a long trip. Everything gets organized, compressed, and made as small as possible!

The Magic Command

npm run build

That’s it! One command, and Next.js does all the hard work.

What Happens Inside?

When you run this command, Next.js:

• Squishes your code to make it tiny (minification)
• Removes things you don’t need (dead code)
• Optimizes images and fonts
• Creates special files for super-fast loading

Real Example

# In your terminal
cd my-awesome-app
npm run build

# You'll see something like:
# ✓ Compiled successfully
# ✓ Collecting page data
# ✓ Generating static pages

Why Does This Matter?

2️⃣ Build Output Analysis

What Is It?

After baking cookies, you want to know: How many did I make? Are any too big?

Build output analysis tells you exactly what’s in your final app!

Reading the Build Report

After running npm run build, you see a table like this:

Route               Size    First Load JS
────────────────────────────────────────
○ /                 5.2 kB  87 kB
○ /about            2.1 kB  84 kB
● /blog/[slug]      3.8 kB  86 kB

Understanding the Symbols

Using Bundle Analyzer

Want to see what’s making your app big? Add this tool:

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer =
  require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true'
  });

module.exports = withBundleAnalyzer({});

# Run it!
ANALYZE=true npm run build

This opens a colorful map showing what’s taking up space!

3️⃣ Static Exports

What Is It?

Imagine turning your interactive LEGO set into a photograph. It can’t move anymore, but it loads INSTANTLY and works EVERYWHERE!

A static export creates plain HTML files that any web server can host.

How to Enable It

// next.config.js
const nextConfig = {
  output: 'export'
};

module.exports = nextConfig;

What You Get

out/
├── index.html
├── about.html
├── blog/
│   ├── post-1.html
│   └── post-2.html
└── _next/
    └── static/

Just upload this folder anywhere!

When to Use Static Export?

Perfect for:

• Blogs and portfolios
• Documentation sites
• Landing pages
• Any site that doesn’t change based on who’s looking

Not great for:

• User login systems
• Shopping carts
• Real-time data

Example: Deploy to GitHub Pages

# Build static files
npm run build

# Your files are in the 'out' folder
# Upload to GitHub Pages, Netlify, etc!

4️⃣ Standalone Output

What Is It?

A standalone build is like a backpack with EVERYTHING you need for a camping trip. Nothing else required!

It creates a self-contained version of your app that includes only what it needs to run.

Why Is This Amazing?

• Smaller Docker images (up to 10x smaller!)
• Faster deployments
• No node_modules needed

How to Enable It

// next.config.js
const nextConfig = {
  output: 'standalone'
};

module.exports = nextConfig;

What You Get

.next/standalone/
├── server.js        ← Run this!
├── package.json
├── .next/
│   └── ...
└── node_modules/    ← Only what's needed

Running It

# After building
node .next/standalone/server.js

# Your app runs on port 3000!

Perfect Dockerfile

FROM node:18-alpine

WORKDIR /app

COPY .next/standalone ./
COPY .next/static ./.next/static
COPY public ./public

CMD ["node", "server.js"]

This Docker image is tiny and fast!

5️⃣ Vercel Deployment

What Is It?

Vercel is like a magical display case for your LEGO creation. Made by the same people who created Next.js!

It’s the easiest way to deploy - literally click a button!

The Super Easy Way

graph LR
    A["Push to GitHub"] --> B["Vercel Detects"]
    B --> C["Auto Build"]
    C --> D["Live Website!"]

Step by Step

1. Connect your GitHub repo to Vercel
2. Push your code
3. Done! Your site is live!

What Vercel Does Automatically

• Runs npm run build
• Sets up HTTPS (secure connection)
• Creates preview URLs for every branch
• Handles traffic spikes
• Edge caching worldwide

Using Vercel CLI

# Install Vercel CLI
npm i -g vercel

# Deploy in one command!
vercel

# For production
vercel --prod

Environment Variables

Set them in the Vercel dashboard, or:

vercel env add MY_SECRET

6️⃣ Self-Hosting Options

What Is It?

Sometimes you want YOUR OWN display case at YOUR place. Self-hosting means running your app on your own servers!

Option A: Node.js Server

The classic way - just run it!

# Build first
npm run build

# Start the server
npm run start

Your app runs on http://localhost:3000

Option B: Docker Container

Pack everything in a container:

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./

CMD ["npm", "start"]

docker build -t my-nextjs-app .
docker run -p 3000:3000 my-nextjs-app

Option C: Popular Platforms

What You Need for Self-Hosting

✓ Node.js 18+ installed
✓ Memory: At least 512MB
✓ Process manager (PM2)
✓ Reverse proxy (nginx)

Using PM2 (Keeps App Running)

npm install -g pm2

pm2 start npm --name "my-app" -- start
pm2 save
pm2 startup

Now your app restarts automatically!

7️⃣ Build Adapters API

What Is It?

Build adapters are like translators. They help Next.js speak the language of different hosting platforms!

This is an advanced feature for platform creators.

How It Works

graph TD
    A["Next.js Build"] --> B["Adapter"]
    B --> C["Platform-Specific Files"]
    C --> D["Deploy!"]

Example: Creating an Adapter

// my-adapter.js
export default function myAdapter() {
  return {
    name: 'my-platform-adapter',

    async buildStart() {
      console.log('Starting build...');
    },

    async buildEnd({ dir, config }) {
      // Transform output for your platform
      console.log('Build finished!');
    }
  };
}

Using an Adapter

// next.config.js
const myAdapter = require('./my-adapter');

module.exports = {
  // Adapter configuration
  experimental: {
    outputFileTracingRoot: process.cwd()
  }
};

Who Uses Adapters?

• Cloudflare Pages - Edge-first hosting
• Netlify - Serverless functions
• AWS Lambda - Custom serverless setup

Example: Cloudflare Adapter

npm install @cloudflare/next-on-pages

// next.config.js
module.exports = {
  experimental: {
    runtime: 'edge'
  }
};

🎯 Quick Decision Guide

graph TD
    A["Deploy My App"] --> B{Need server features?}
    B -->|No| C["Static Export"]
    B -->|Yes| D{Want easy life?}
    D -->|Yes| E["Use Vercel"]
    D -->|No| F{Need Docker?}
    F -->|Yes| G["Standalone Build"]
    F -->|No| H["Node.js + PM2"]

📝 Summary: Your Deployment Cheat Sheet

🚀 You Did It!

You now understand how to take your Next.js app from your computer to the ENTIRE WORLD!

Remember:

• Build = Pack your app nicely
• Analyze = Check what’s inside
• Choose = Pick the right deployment method
• Deploy = Share with everyone!

Your app is ready for its grand adventure! 🎉