Deploy to Netlify

Deploy your Next.js template to Netlify with ease. Great alternative to Vercel with excellent free tier.

Why Netlify?

✅ Easy Setup - Simple deployment process ✅ Free Tier - Generous free hosting ✅ Continuous Deployment - Auto-deploy from Git ✅ Form Handling - Built-in form processing ✅ Split Testing - A/B testing built-in ✅ Edge Functions - Serverless functions

Prerequisites

Netlify requires a static export for Next.js or using their adapter. We’ll cover both approaches.

Quick Deploy

Option 1: Deploy from Git (Recommended)

Step 1: Configure Next.js

Add to next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export', // For static export
  images: {
    unoptimized: true, // Required for static export
  },
}
 
module.exports = nextConfig

Note: Static export has limitations:

• No API routes
• No server-side rendering (SSR)
• No dynamic routes without generateStaticParams

Step 2: Push to Git

git add .
git commit -m "Configure for Netlify"
git push

Step 3: Import to Netlify

1. Visit app.netlify.com/start 
2. Click “Import from Git”
3. Choose provider (GitHub/GitLab/Bitbucket)
4. Select repository
5. Configure settings:

   Build command: npm run build
   Publish directory: out

6. Click “Deploy site”

Option 2: Use Next.js Runtime (Full Features)

For full Next.js features (SSR, API routes):

Step 1: Install Plugin

npm install -D @netlify/plugin-nextjs

Step 2: Create netlify.toml

[build]
  command = "npm run build"
  publish = ".next"
 
[[plugins]]
  package = "@netlify/plugin-nextjs"

Step 3: Update next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Remove 'output: export'
  // Keep your existing config
}
 
module.exports = nextConfig

Step 4: Deploy via Netlify Same process as Option 1, but Netlify will detect the plugin.

Option 3: Deploy with CLI

Step 1: Install Netlify CLI

npm install -g netlify-cli

Step 2: Login

netlify login

Step 3: Build

npm run build

Step 4: Deploy

# Deploy to draft URL
netlify deploy
 
# Specify publish directory
netlify deploy --dir=out
 
# Deploy to production
netlify deploy --prod --dir=out

Configuration

Environment Variables

Add via Dashboard:

1. Go to Site Settings
2. Navigate to “Environment Variables”
3. Add variables:

   NEXT_PUBLIC_SITE_URL=https://yourdomain.netlify.app
   NEXT_PUBLIC_API_URL=https://api.yourdomain.com

4. Trigger redeploy

Add via CLI:

netlify env:set NEXT_PUBLIC_SITE_URL "https://yourdomain.com"

Add via netlify.toml:

[build.environment]
  NEXT_PUBLIC_SITE_URL = "https://yourdomain.netlify.app"

Build Settings

netlify.toml:

[build]
  command = "npm run build"
  publish = "out"  # or ".next" with plugin
 
[build.environment]
  NODE_VERSION = "18"
 
# Redirect rules
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
 
# Custom headers
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"

Custom Domain

Step 1: Add Domain

1. Go to Site Settings
2. Click “Domain Management”
3. Click “Add custom domain”
4. Enter your domain

Step 2: Configure DNS

Option A: Use Netlify DNS (Recommended)

1. Update nameservers at registrar:

   dns1.p01.nsone.net
   dns2.p01.nsone.net
   dns3.p01.nsone.net
   dns4.p01.nsone.net

Option B: Use External DNS

For root domain:

Type: A
Name: @
Value: 75.2.60.5

For www:

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

Step 3: Enable HTTPS Netlify automatically provisions SSL certificate (free).

Deployment Workflow

Automatic Deployments

Configure in Site Settings:

• Production: Deploy from main branch
• Branch Deploys: Deploy from specific branches
• Deploy Previews: Deploy from pull requests

Deploy Contexts

Different settings per context:

# Production context
[context.production]
  command = "npm run build"
 
[context.production.environment]
  NEXT_PUBLIC_ENV = "production"
 
# Deploy preview context
[context.deploy-preview]
  command = "npm run build"
 
[context.deploy-preview.environment]
  NEXT_PUBLIC_ENV = "preview"
 
# Branch context
[context.branch-deploy]
  command = "npm run build"

Advanced Features

Forms

Built-in form handling:

<!-- Add to your HTML form -->
<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact" />
  <input type="text" name="name" />
  <input type="email" name="email" />
  <button type="submit">Send</button>
</form>

Submissions appear in Netlify dashboard.

Functions

Create serverless functions:

netlify/functions/hello.js:

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello World" })
  }
}

Access at: /.netlify/functions/hello

Split Testing

A/B test deployments:

# netlify.toml
[[branch-deploy]]
  branch = "main"
 
[[branch-deploy]]
  branch = "experiment"
 
# Split traffic 50/50

Configure in dashboard under “Split Testing”.

Analytics

Enable Netlify Analytics:

1. Go to Site Settings
2. Click “Analytics”
3. Enable (paid feature)

Or use Google Analytics:

// app/layout.tsx
<Script
  src="https://www.googletagmanager.com/gtag/js?id=GA_ID"
  strategy="afterInteractive"
/>

Monitoring

View Deploys

netlify deploy:list

View Logs

Check in Netlify dashboard under “Deploys” → “Deploy log”

Build Status

netlify status

Pricing

Starter (Free):

• 100GB bandwidth/month
• 300 build minutes/month
• Unlimited sites
• HTTPS included

Pro ($19/month):

• 400GB bandwidth
• 1,000 build minutes
• Forms (1,000/month)
• Analytics addon

Business ($99/month):

• 1TB bandwidth
• 3,000 build minutes
• Priority support
• SSO

Troubleshooting

Build Fails

Check logs:

1. Go to “Deploys”
2. Click failed deploy
3. View “Deploy log”

Common fixes:

# Clear Netlify cache
netlify deploy --clear-cache
 
# Update Node version in netlify.toml
[build.environment]
  NODE_VERSION = "18"

Static Export Issues

If using output: 'export':

1. API routes don’t work - Move to Netlify Functions
2. Images not optimized - Set unoptimized: true
3. Dynamic routes fail - Use generateStaticParams

404 Errors

Add redirect rule:

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

Environment Variables Not Loading

1. Check variable names (must start with NEXT_PUBLIC_)
2. Trigger new deploy after adding
3. Verify in build logs

Rollback Deployment

Via Dashboard:

1. Go to “Deploys”
2. Find previous deploy
3. Click “Publish deploy”

Via CLI:

netlify rollback

Best Practices

1. Use netlify.toml - Version control settings
2. Test Locally First - Run npm run build
3. Use Deploy Previews - Test PRs before merging
4. Cache Dependencies - Faster builds
5. Optimize Images - Better performance
6. Monitor Builds - Check deploy logs
7. Set Up Notifications - Get deploy alerts

Comparing: Static Export vs Runtime

Static Export (output: ‘export’):

• ✅ Faster builds
• ✅ Lower costs
• ✅ Better SEO (pre-rendered)
• ❌ No API routes
• ❌ No SSR
• ❌ Limited dynamic features

Next.js Runtime (@netlify/plugin-nextjs):

• ✅ Full Next.js features
• ✅ API routes work
• ✅ SSR supported
• ✅ Dynamic routing
• ❌ Slower builds
• ❌ Higher costs

Choose based on your template’s needs.

Next Steps

✅ Deployed? Now:

1. Set up custom domain
2. Enable HTTPS (automatic)
3. Configure environment variables
4. Set up deploy notifications
5. Consider analytics

Need help? Email support@capricorn.engineering

Resources:

• Netlify Documentation 
• Next.js on Netlify 
• Netlify CLI Reference