Deploy to Netlify - Pengrafic

Why Netlify?

Netlify offers excellent Next.js support with powerful features:

Essential Next.js Support: Full support for Next.js 14 with App Router
Git-Based Workflow: Automatic deployments on git push
Edge Functions: Deploy serverless functions globally
Deploy Previews: Automatic preview URLs for pull requests
Built-in CI/CD: Continuous deployment pipeline
Split Testing: A/B testing and branch-based deploys

Prerequisites

GitHub, GitLab, or Bitbucket account
Your Pengrafic project pushed to a git repository
Netlify account (free tier available)

Deployment Steps

Create Netlify Account

Visit netlify.com and sign up:

Click “Sign Up”
Choose your git provider (GitHub, GitLab, or Bitbucket)
Authorize Netlify to access your repositories

Import Your Project

From your Netlify dashboard:

Click “Add new site” → “Import an existing project”
Choose your git provider
Select your Pengrafic repository
Authorize repository access if prompted

Configure Build Settings

Netlify may auto-detect Next.js. Verify these settings:Build Settings:

Base directory: (leave empty)
Build command: npm run build
Publish directory: .next

Advanced Settings:

Enable “Next.js Runtime” (recommended for best performance)
Node version: 18.x or higher (auto-detected from .nvmrc or .node-version)

The build command npm run build is from your package.json and runs next build.

Configure Environment Variables

Add your environment variables:

Scroll to “Advanced build settings”
Click “New variable” for each environment variable
Add key-value pairs

Example variables:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_PUBLIC_SITE_URL=https://yourdomain.netlify.app

You can also add environment variables later in Site Settings → Environment Variables.

Deploy Site

Click “Deploy site” to start the build:

Netlify clones your repository
Runs npm install to install dependencies
Executes npm run build to build your app
Deploys to Netlify’s global CDN

Your site will be live in 2-3 minutes with a generated URL like random-name-123.netlify.app.

Post-Deployment Configuration

Custom Domain

Add Custom Domain

In your site settings:

Go to “Domain management” → “Add custom domain”
Enter your domain name (e.g., yourdomain.com)
Click “Verify” then “Add domain”

Configure DNS

Choose your DNS configuration method:Option 1: Netlify DNS (Recommended)

Click “Use Netlify DNS”
Update nameservers at your domain registrar:

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

Option 2: External DNSAdd these records to your DNS provider:

Type: A
Name: @
Value: 75.2.60.5

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

Enable HTTPS

Netlify automatically provisions SSL certificates:

Wait for DNS propagation (up to 24 hours, usually minutes)
Certificate is auto-provisioned via Let’s Encrypt
HTTPS is enabled automatically
HTTP to HTTPS redirect is enabled by default

Environment Variables Management

Manage environment variables after deployment:

Go to “Site settings” → “Environment variables”
Click “Add a variable” to create new ones
Edit or delete existing variables
Choose scopes: Production, Deploy Previews, Branch deploys

Changes to environment variables require a new deployment. Trigger one by clicking “Trigger deploy” → “Deploy site”.

Netlify Configuration File

For advanced configuration, create netlify.toml in your project root:

[build]
  command = "npm run build"
  publish = ".next"

[build.environment]
  NODE_VERSION = "18"

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

# Redirect rules
[[redirects]]
  from = "/old-path"
  to = "/new-path"
  status = 301

# Headers
[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

Commit this file to enable advanced features:

git add netlify.toml
git commit -m "Add Netlify configuration"
git push

Automatic Deployments

Netlify automatically deploys your project:

Production Deployments

Triggered by pushes to your production branch (usually main or master)
Published to your primary domain
Full build and optimization

git add .
git commit -m "Update feature"
git push origin main

Deploy Previews

Created automatically for every pull request
Unique preview URL for each PR
Comment posted on GitHub/GitLab with preview link

git checkout -b feature-branch
git add .
git commit -m "Add new feature"
git push origin feature-branch
# Open pull request on GitHub

Branch Deploys

Deploy specific branches:

Go to “Site settings” → “Build & deploy” → “Continuous deployment”
Under “Branch deploys”, select branches to deploy
Each branch gets its own URL: branch-name--your-site.netlify.app

Netlify CLI (Optional)

Deploy and manage your site from the terminal:

Installation

npm install -g netlify-cli

netlify login

Link Project

Connect your local project to Netlify:

netlify link

Local Development

Run your site with Netlify’s local environment:

netlify dev

This runs npm run dev with Netlify environment variables and functions.

Deploy

# Deploy to preview
netlify deploy

# Deploy to production
netlify deploy --prod

Edge Functions

Netlify Edge Functions run on Deno at the edge:

Create Edge Function

Create netlify/edge-functions/hello.ts:

export default async (request: Request) => {
  return new Response("Hello from the edge!");
};

export const config = { path: "/api/hello" };

Deploy

Edge functions deploy automatically with your site:

git add netlify/edge-functions/hello.ts
git commit -m "Add edge function"
git push

Performance Optimization

Next.js Runtime

Enable the Next.js Runtime plugin for optimal performance:

Go to “Integrations” → “Next.js Runtime”
Click “Enable” to install
Redeploy your site

Benefits:

Improved serverless function performance
Better image optimization
ISR (Incremental Static Regeneration) support

Image Optimization

Netlify automatically optimizes images using Next.js Image Optimization:

On-demand image processing
Modern format conversion (WebP, AVIF)
Automatic responsive images

Ensure you’re using the next/image component:

import Image from 'next/image';

<Image 
  src="/image.jpg" 
  alt="Description"
  width={800}
  height={600}
/>

Caching

Netlify provides automatic caching:

Static assets cached globally
Dynamic content with smart cache invalidation
Cache purge on deployment

Monitoring and Analytics

Netlify Analytics

Enable server-side analytics (paid add-on):

Go to “Analytics” tab
Click “Enable Analytics”
View traffic, performance, and geographic data

No code changes required - analytics run at the CDN level.

Deploy Notifications

Get notified about deployments:

Go to “Site settings” → “Build & deploy” → “Deploy notifications”
Add notifications for:
- Deploy started
- Deploy succeeded
- Deploy failed
Choose notification method: Email, Slack, webhook

Build Logs

View detailed build logs:

Go to “Deploys” tab
Click on any deployment
View full build output and timing

Troubleshooting

Build Fails

Check build logs:

Go to “Deploys” tab
Click on the failed deployment
Review build logs for errors

Common issues:

# Clear cache and retry
netlify build --clear-cache

# Check Node version
node --version
# Add .nvmrc file if needed:
echo "18" > .nvmrc

# Verify build locally
npm run build

Environment Variable Issues

Verify variables are set:

Go to “Site settings” → “Environment variables”
Check all required variables are present
Ensure correct scopes (Production, Deploy Previews)

Test locally with Netlify CLI:

netlify dev

Function Timeout

Serverless functions timeout after 10 seconds (free tier) or 26 seconds (paid):

Optimize slow functions
Use Edge Functions for faster response times
Consider upgrading to Pro plan for longer timeouts

Image Loading Issues

Configure image domains in next.config.js:

module.exports = {
  images: {
    domains: ['your-image-domain.com'],
  },
};

Redeploy after changes:

git add next.config.js
git commit -m "Update image domains"
git push

Best Practices

Follow these best practices for optimal Netlify deployments:

Use netlify.toml: Define build settings in code
Environment Variables: Never commit secrets to git
Test Locally: Run npm run build before pushing
Deploy Previews: Review preview URLs before merging
Enable Next.js Runtime: Install the official plugin
Monitor Builds: Set up deploy notifications
Optimize Functions: Keep serverless functions fast
Use Edge Functions: For latency-sensitive operations

Split Testing

Run A/B tests with different branches:

Create multiple branches with variations
Enable branch deploys for each branch
Go to “Split Testing” in site settings
Set traffic split percentages
Monitor performance and conversions

Additional Resources

Next Steps

Your Pengrafic application is now live on Netlify! Consider:

Setting up a custom domain
Enabling deploy notifications
Configuring split testing
Adding edge functions for enhanced functionality
Monitoring performance with Netlify Analytics

Getting Started

Components

Customization

Features

Deployment

​Why Netlify?

​Prerequisites

​Deployment Steps

​Post-Deployment Configuration

​Custom Domain

​Environment Variables Management

​Netlify Configuration File

​Automatic Deployments

​Production Deployments

​Deploy Previews

​Branch Deploys

​Netlify CLI (Optional)

​Installation

​Login

​Link Project

​Local Development

​Deploy

​Edge Functions

​Create Edge Function

​Deploy

​Performance Optimization

​Next.js Runtime

​Image Optimization

​Caching

​Monitoring and Analytics

​Netlify Analytics

​Deploy Notifications

​Build Logs

​Troubleshooting

​Build Fails

​Environment Variable Issues

​Function Timeout

​Image Loading Issues

​Best Practices

​Split Testing

​Additional Resources

​Next Steps

Build docs developers (and LLMs) love

Why Netlify?

Prerequisites

Deployment Steps

Post-Deployment Configuration

Custom Domain

Environment Variables Management

Netlify Configuration File

Automatic Deployments

Production Deployments

Deploy Previews

Branch Deploys

Netlify CLI (Optional)

Installation

Login

Link Project

Local Development

Deploy

Edge Functions

Create Edge Function

Deploy

Performance Optimization

Next.js Runtime

Image Optimization

Caching

Monitoring and Analytics

Netlify Analytics

Deploy Notifications

Build Logs

Troubleshooting

Build Fails

Environment Variable Issues

Function Timeout

Image Loading Issues

Best Practices

Split Testing

Additional Resources

Next Steps