Deploying on Netlify

🌐 What is Netlify?

Netlify is a powerful hosting platform that supports Next.js applications with automatic builds, continuous deployment, and serverless functions. It offers free SSL, form handling, and split testing for modern web projects.


# Install Netlify CLI
npm install -g netlify-cli

# Deploy your app
netlify deploy --prod

Netlify Features

🔄

Continuous Deploy

Auto-deploy from Git repositories

GitHub GitLab Bitbucket

⚡

Edge Functions

Run serverless code at the edge

API Routes Middleware Fast Response

📝

Form Handling

Built-in form processing

Submissions Notifications Spam Filter

🔀

Split Testing

A/B test different versions

Traffic Split Analytics Optimization

🔹 Setup Next.js for Netlify

Configure your Next.js project for Netlify deployment. Install the Essential Next.js plugin which handles server-side rendering, API routes, and image optimization automatically. This ensures your Next.js features work correctly on Netlify's infrastructure.

# Install Netlify plugin for Next.js
npm install -D @netlify/plugin-nextjs

# Create netlify.toml configuration
touch netlify.toml

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

[[plugins]]
  package = "@netlify/plugin-nextjs"

🔹 Deploy via GitHub

Connect your GitHub repository to Netlify for automatic deployments. Every push to your main branch triggers a new build and deployment. Pull requests get unique preview URLs for testing before merging.

Deployment Steps:

Push your Next.js project to GitHub
Sign up at netlify.com
Click "Add new site" → "Import from Git"
Select your repository and deploy

# Push to GitHub
git add .
git commit -m "Deploy to Netlify"
git push origin main

# Netlify automatically builds and deploys
# You get a URL like: your-app.netlify.app

🔹 Deploy via CLI

Use Netlify CLI for manual deployments and local testing. The CLI lets you test your site locally with Netlify's environment before deploying. Great for debugging and quick deployments without pushing to Git.

# Install Netlify CLI
npm install -g netlify-cli

# Login to Netlify
netlify login

# Initialize your project
netlify init

# Test locally with Netlify environment
netlify dev

# Deploy to production
netlify deploy --prod

# Your site is live!
# Output: https://your-site.netlify.app

🔹 Environment Variables

Add environment variables through Netlify dashboard or CLI. Variables are encrypted and available during build and runtime. You can scope variables to specific deploy contexts like production, deploy previews, or branch deploys.

# Add environment variable via CLI
netlify env:set API_KEY "your-api-key-here"

# List all environment variables
netlify env:list

# Access in your Next.js app
// app/api/data/route.ts
export async function GET() {
  const apiKey = process.env.API_KEY
  return Response.json({ message: 'Success' })
}

Via Netlify Dashboard:

Go to Site Settings → Environment Variables
Click "Add a variable"
Enter key and value
Select deploy contexts (production, previews, etc.)

🔹 Custom Domain Setup

Connect your custom domain to your Netlify site. Netlify provides free SSL certificates and handles DNS configuration. You can add multiple domains and set up redirects from old domains to new ones.

# Add custom domain via CLI
netlify domains:add yourdomain.com

# Or in Netlify Dashboard:
# 1. Go to Site Settings → Domain Management
# 2. Click "Add custom domain"
# 3. Enter your domain
# 4. Update DNS records

# DNS Configuration:
# Add these records at your domain registrar:
# Type: A
# Name: @
# Value: 75.2.60.5

# Type: CNAME
# Name: www
# Value: your-site.netlify.app

🔹 Netlify Functions

Create serverless functions that work alongside your Next.js API routes. Netlify Functions are perfect for background tasks, webhooks, or additional API endpoints. They deploy automatically with your site.

// netlify/functions/hello.js
export async function handler(event, context) {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Hello from Netlify Function!',
      time: new Date().toISOString()
    })
  }
}

// Access at: https://your-site.netlify.app/.netlify/functions/hello

# netlify.toml - Configure functions
[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = ".next"

[functions]
  directory = "netlify/functions"