How to deploy Next.js to Netlify

Introduction

Next.js is one of the most popular React frameworks, combining static generation, server-side rendering, and API routes. Netlify provides first-class support for Next.js, making it a solid choice for hosting production Next.js apps.

In this guide, you’ll learn how to deploy a Next.js project to Netlify step by step, including how Netlify handles builds, server-side rendering, and environment variables.

Prerequisites

Before you start, make sure you have:

• A Next.js project (13+ works, including the App Router)
• A Netlify account
• Your project pushed to GitHub, GitLab, or Bitbucket
• Node.js installed locally

Step 1: Create or prepare a Next.js app

If you already have a Next.js app, you can skip this step. Otherwise, create one:

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

Make sure the app runs locally before deploying.

Step 2: Push your project to GitHub

Netlify deploys directly from your Git repository.

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

Step 3: Connect the repository to Netlify

1. Go to the Netlify dashboard
2. Click Add new site → Import an existing project
3. Choose your Git provider
4. Select your Next.js repository

Netlify will automatically detect that this is a Next.js project.

Step 4: Configure build settings

In most cases, Netlify’s defaults work out of the box.

Typical settings:

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

Netlify uses the official Next.js Runtime to support:

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

You do not need to export your site or disable SSR.

Step 5: Deploy the site

Click Deploy site.

Netlify will:

• Install dependencies
• Build your Next.js app
• Convert SSR pages and API routes into serverless functions
• Deploy static assets to the CDN

Once the build finishes, you’ll get a live URL like:

https://your-site-name.netlify.app

Step 6: Environment variables

Next.js apps often rely on environment variables for API keys and secrets.

To add them:

1. Go to Site settings → Environment variables
2. Add your variables

For example:

• NEXT_PUBLIC_API_URL
• DATABASE_URL

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Others are only available on the server.

After adding variables, trigger a new deploy.

Step 7: Using API routes and SSR

Netlify automatically turns:

• pages/api/*.ts
• Server components with data fetching

into serverless functions.

You don’t need to configure anything special. Just make sure:

• Your Node version is supported
• You’re not using unsupported native binaries

Step 8: Image optimization

Next.js image optimization works on Netlify using on-demand builders.

Use the built-in next/image component as usual:

import Image from "next/image";

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

No extra configuration is required.

Common issues and fixes

Build fails with Node version errors

Set the Node version in Netlify:

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

App Router edge cases

If you use the App Router with experimental features, make sure:

• You’re on a stable Next.js version
• Experimental flags are supported by Netlify’s runtime

Large builds timing out

Enable build caching and avoid unnecessary work during next build.

When to choose Netlify for Next.js

Netlify is a great fit if you want:

• Git-based deployments
• Built-in deploy previews
• Easy environment variable management
• CDN-backed performance without manual setup

For apps heavily reliant on edge middleware, you may want to compare Netlify with alternatives, but for most Next.js sites, Netlify works extremely well.

Final thoughts

Deploying Next.js to Netlify is straightforward and production-ready. With automatic detection, SSR support, and a global CDN, you can focus on building features instead of infrastructure.

Once deployed, explore deploy previews, environment variable contexts, and build plugins to level up your workflow.