Building and Deploying Your App

Preparing for Production

Before deploying, run a production build locally to catch any issues:

npm run build

This command does several things:

• Compiles your TypeScript and JSX
• Optimizes your JavaScript bundles with tree shaking and minification
• Pre-renders static pages at build time
• Reports page sizes and rendering strategies

You'll see output like this:

Route (app)                    Size     First Load JS
┌ ○ /                          5.2 kB   89 kB
├ ○ /about                     1.8 kB   85 kB
├ ● /blog/[slug]               3.1 kB   87 kB
└ λ /api/contact               0 B      83 kB

○  Static   — pre-rendered at build time
●  SSG      — pre-rendered with dynamic params
λ  Dynamic  — rendered on each request

Review these symbols to understand which pages are static and which are dynamic.

Testing the Production Build

After building, start the production server locally:

npm run start

Visit http://localhost:3000 and test your app. Production mode behaves differently from dev:

• No hot reload
• Optimized bundles (smaller, faster)
• Cached data responses
• Real error pages instead of dev overlays

Always test the production build before deploying.

Environment Variables

Next.js supports .env files for environment variables:

# .env.local (never committed to git)
DATABASE_URL=postgresql://localhost:5432/mydb
API_SECRET=my-secret-key

# Public variables (available in the browser)
NEXT_PUBLIC_API_URL=https://api.example.com

Key rules:

• NEXT_PUBLIC_ prefix makes a variable available in Client Components
• Variables without the prefix are server-only — never exposed to the browser
• .env.local is for local development and should be in .gitignore
• Set production variables in your hosting platform's dashboard

Metadata and SEO

Before deploying, add metadata to help search engines index your pages:

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'My App',
    template: '%s | My App'
  },
  description: 'A Next.js application',
  openGraph: {
    title: 'My App',
    description: 'A Next.js application',
    url: 'https://myapp.com',
    siteName: 'My App',
    type: 'website'
  }
}

Each page can export its own metadata to override the defaults:

// app/about/page.tsx
export const metadata = {
  title: 'About',
  description: 'Learn more about us'
}

With the template '%s | My App', the about page title becomes "About | My App".

Deploying to Vercel

Vercel is the company behind Next.js and offers the smoothest deployment experience.

Step 1: Push to GitHub

Make sure your code is in a GitHub repository:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/you/my-app.git
git push -u origin main

Step 2: Connect to Vercel

1. Go to vercel.com and sign in with GitHub
2. Click "New Project"
3. Select your repository
4. Vercel auto-detects Next.js and configures the build settings
5. Add your environment variables in the project settings
6. Click "Deploy"

That's it. Vercel will:

• Install dependencies
• Run npm run build
• Deploy to a global CDN
• Give you a URL like my-app.vercel.app

Step 3: Custom Domain

In your Vercel project settings, go to Domains and add your custom domain. Vercel handles SSL certificates automatically.

Other Hosting Options

While Vercel is the easiest option for Next.js, you can deploy anywhere:

Self-hosted (Node.js)

Run npm run build then npm run start on any server with Node.js — a VPS, Docker container, or cloud VM.

Static Export

If your app is fully static (no server-side features), you can export it as plain HTML:

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

module.exports = nextConfig

Then npm run build generates a static out/ folder you can deploy to any static host.

Production Checklist

Before going live, make sure you've covered these essentials:

• Production build runs without errors (npm run build)
• Environment variables are set in your hosting platform
• Metadata and Open Graph tags are configured
• Images use next/image for automatic optimization
• Error pages exist (not-found.tsx, error.tsx)
• Performance is acceptable (check with Lighthouse)

What's Next

Congratulations — you've completed Next.js Fundamentals! You now know how to:

1. Set up a Next.js project
2. Create routes with the App Router
3. Fetch data with Server Components
4. Build and deploy to production

From here, explore the Fullstack Next.js course to learn about API routes, database integration, authentication, and more advanced patterns.