Deploy to Netlify

Netlify provides another excellent option for deploying Portfolio CMS with automatic deployments and global CDN.

Prerequisites

• GitHub account with your code pushed
• Netlify account (netlify.com)
• PostgreSQL database ready
• S3 storage configured

Step-by-Step Deployment

Step 1: Connect Repository

1. Go to app.netlify.com
2. Click "Add new site" > "Import an existing project"
3. Select "GitHub"
4. Authorize and select your repository

Step 2: Configure Build Settings

Setting	Value
Branch to deploy	main
Build command	pnpm build
Publish directory	.next

Step 3: Add Environment Variables

Go to Site Settings > Environment Variables:

DATABASE_URL=postgresql://user:password@host:5432/database?sslmode=require
PAYLOAD_SECRET=your-super-secret-key-at-least-32-characters
NEXT_PUBLIC_SITE_URL=https://your-site.netlify.app

S3_BUCKET=your-bucket-name
S3_ACCOUNT_ID=your-account-id
S3_ACCESS_KEY_ID=your-access-key
S3_SECRET=your-secret-key

# Optional
RESEND_API_KEY=re_...
RESEND_FROM_EMAIL=...
RESEND_FROM_NAME=...

Step 4: Install Next.js Plugin

Add the Next.js Runtime plugin:

1. Go to Site Settings > Build & deploy > Plugins
2. Search for "@netlify/plugin-nextjs"
3. Click Install

Or add to netlify.toml:

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

Step 5: Deploy

1. Click "Deploy site"
2. Wait for build to complete
3. Your site is live!

Netlify Configuration File

Create netlify.toml in your project root:

[build]
  command = "pnpm build"
  publish = ".next"

[build.environment]
  NODE_VERSION = "20"

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

# Redirects
[[redirects]]
  from = "/admin"
  to = "/admin"
  status = 200

[[redirects]]
  from = "/api/*"
  to = "/api/:splat"
  status = 200

# Headers
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"

Custom Domain

Adding a Domain

1. Go to Site Settings > Domain management
2. Click "Add custom domain"
3. Enter your domain name
4. Follow the verification steps

DNS Configuration

Option 1: Netlify DNS (Recommended)

1. Transfer nameservers to Netlify
2. DNS is managed automatically

Option 2: External DNS

Add these records:

Type: A
Name: @
Value: 75.2.60.5

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

SSL Certificate

Netlify automatically provisions Let's Encrypt certificates.

Build Hooks

Trigger rebuilds from external services:

Create Build Hook

1. Site Settings > Build & deploy > Build hooks
2. Click "Add build hook"
3. Name it and save
4. Copy the webhook URL

Use in CMS

Trigger rebuild when content changes:

// In Payload hook
afterChange: [
  async () => {
    await fetch(process.env.NETLIFY_BUILD_HOOK, {
      method: 'POST',
    })
  },
],

Functions

Netlify Functions handle API routes automatically with the Next.js plugin.

Checking Function Logs

1. Go to Functions tab
2. Select a function
3. View real-time logs

Function Configuration

# netlify.toml
[functions]
  directory = ".netlify/functions"
  node_bundler = "esbuild"

  [functions."*"]
    memory = 1024
    timeout = 30

Environment-Specific Deployments

Branch Deploys

Enable for preview environments:

1. Site Settings > Build & deploy > Continuous Deployment
2. Enable "Branch deploys"
3. Specify which branches to deploy

Deploy Contexts

Different settings per context:

# netlify.toml

# Production
[context.production]
  environment = { NODE_ENV = "production" }

# Preview (branch deploys)
[context.deploy-preview]
  environment = { NODE_ENV = "preview" }

# Branch-specific
[context.staging]
  environment = { NODE_ENV = "staging" }

Troubleshooting

Build Fails

View build logs:

1. Go to Deploys
2. Click failed deploy
3. Expand build log

Common issues:

# Plugin not installed
Error: @netlify/plugin-nextjs must be installed

# Fix: Add to netlify.toml or install via UI

# Node version mismatch
Error: Node.js version X required

# Fix: Set NODE_VERSION in build environment

# Memory exceeded
Error: JavaScript heap out of memory

# Fix: Increase function memory in netlify.toml

API Routes Not Working

1. Ensure Next.js plugin is installed
2. Check function logs for errors
3. Verify environment variables
4. Check function timeout settings

Images Not Loading

1. Verify S3 credentials
2. Check CORS settings
3. Ensure Netlify has access to external domains

Slow Builds

1. Enable build caching
2. Use pnpm for faster installs
3. Optimize dependencies

Performance

Enable Asset Optimization

Site Settings > Build & deploy > Asset optimization:

• Bundle CSS
• Minify CSS
• Minify JS
• Compress images

Headers for Caching

[[headers]]
  for = "/static/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/_next/static/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Analytics

Netlify Analytics

Premium feature ($9/month):

• Server-side analytics
• No impact on performance
• Privacy-friendly

Alternative

Use Plausible or Google Analytics via Site Settings.