Deploy Next.js to Netlify: SSR, ISR, and App Router Support

I've deployed quite a few Next.js apps to Netlify at this point, including a couple with the App Router, ISR, and API routes. The short version: it works really well, and Netlify auto-detects most of the configuration. Here's the full walkthrough.

What you'll need

• A Next.js project (13+ with either Pages or App Router)
• A Netlify account
• Your code pushed to GitHub, GitLab, or Bitbucket
• Node.js installed locally

If you don't have a Next.js app yet:

npx create-next-app@latest my-nextjs-site
cd my-nextjs-site
npm run dev

Make sure it runs locally before deploying. Sounds obvious, but I've skipped this step and then spent 15 minutes debugging a Netlify build error that was actually a local code problem.

Push to Git

Netlify deploys from your Git repo, so make sure your code is pushed:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/my-nextjs-site.git
git push -u origin main

Connect to Netlify

1. Go to the Netlify dashboard
2. Click Add new site > Import an existing project
3. Pick your Git provider
4. Select your repo

Netlify detects it's a Next.js project and fills in the build settings automatically.

Build settings

In most cases, the defaults work out of the box:

• Build command: npm run build
• Publish directory: .next

Netlify uses the official Next.js Runtime under the hood, which handles:

• Static Site Generation (SSG)
• Server-Side Rendering (SSR)
• Incremental Static Regeneration (ISR)
• API routes
• Image optimization
• Middleware

You don't need to next export or disable SSR. Netlify runs your SSR pages and API routes as serverless functions automatically.

Deploy

Click Deploy site. Netlify installs dependencies, builds your Next.js app, converts SSR pages and API routes into serverless functions, and deploys static assets to the CDN.

You'll get a live URL like https://your-site-name.netlify.app in a couple of minutes.

Environment variables

Most Next.js apps need env vars for API keys, database URLs, etc.

Add them in Site settings > Environment variables. Remember:

• NEXT_PUBLIC_ prefixed variables are bundled into client-side JavaScript — only use this for values safe to expose publicly
• Everything else stays server-side (available in API routes, getServerSideProps, Server Components)

After adding variables, trigger a new deploy. They don't take effect until the next build.

API routes and server components

Netlify automatically turns your API routes (pages/api/*.ts or app/api/*/route.ts) and server-rendered pages into serverless functions. You don't need to configure anything.

Just make sure:

• Your Node version is compatible (set it in netlify.toml if needed)
• You're not using native binaries that don't run on Linux (Netlify builds on Linux, not macOS)

Image optimization

next/image works on Netlify using on-demand image optimization. Use it normally:

import Image from "next/image";

export default function Page() {
  return (
    <Image
      src="/hero.png"
      alt="Hero"
      width={800}
      height={400}
    />
  );
}

No extra config needed.

Common gotchas

Node version errors

If your build fails with syntax errors or unsupported feature warnings, pin the Node version:

[build]
  environment = { NODE_VERSION = "18" }

App Router + experimental features

If you're using bleeding-edge App Router features, make sure they're supported by Netlify's runtime. Stable features work fine; experimental flags sometimes need a runtime update. Check Netlify's Next.js docs for the current compatibility matrix.

Large builds timing out

Next.js builds can be slow, especially with lots of pages or heavy image processing. Enable build caching in Netlify (it's on by default) and make sure you're not regenerating every page on every build — use ISR for pages that can be built on-demand.

Why Netlify works well for Next.js

Honestly, the main reason I use Netlify for Next.js is deploy previews. Every PR gets its own live URL, which makes reviewing SSR apps way easier than trying to run someone's branch locally with all the right env vars.

The rest — Git-based deploys, per-context env vars, CDN performance — is nice too, but deploy previews are the killer feature for team workflows.