Deploy Next.js on Netlify with GitHub Actions

▲ Next.js 🌐 Netlify Platform ⚙️ GitHub Actions

Configuration Files

Production-ready configuration files with detailed comments and best practices. Each file works together as a complete deployment solution.
name: Deploy to Netlify

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build
        env:
          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: './out'
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: true
          enable-commit-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

# next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
}

module.exports = nextConfig

# netlify.toml
[build]
  command = "npm run build"
  publish = "out"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Prerequisites

  • Netlify account
  • GitHub repository
  • Node.js 18+
  • Next.js 14+

Deployment Steps

  • Create Next.js app: npx create-next-app@latest
  • Update next.config.js for static export
  • Create Netlify site
  • Get Site ID and Auth Token
  • Add GitHub Secrets
  • Create netlify.toml
  • Create .github/workflows/deploy.yml
  • Push to deploy

Additional Notes

  • ⚡ Static export only (no SSR)
  • 🌍 Global CDN
  • 🔄 Deploy previews
  • 💰 Free tier: 100GB bandwidth
  • 📦 Automatic optimization
  • 🔒 HTTPS included
  • ⚠️ No API routes (use Netlify Functions)
  • ⚠️ No Image Optimization (set unoptimized: true)