Skip to main content

​
Overview

Vercel is the official hosting platform for Next.js applications, offering zero-configuration deployment, automatic CI/CD, and global edge network distribution. This portfolio is optimized for Vercel deployment with integrated analytics and performance monitoring.

​
Quick Deploy

1

Connect Repository

  1. Push your code to GitHub, GitLab, or Bitbucket
  2. Visit vercel.com/new
  3. Import your repository
2

Configure Project

Vercel automatically detects Next.js projects. The default settings work for this portfolio:
  • Framework Preset: Next.js
  • Build Command: npm run build
  • Output Directory: .next (auto-detected)
  • Install Command: npm install
3

Deploy

Click “Deploy” and Vercel will:
  • Install dependencies
  • Run the build command
  • Deploy to a production URL
  • Generate preview URLs for each commit
Your portfolio will be live at https://your-project.vercel.app within minutes. Custom domains can be added in project settings.

​
CLI Deployment

For deployment via command line:
1

Install Vercel CLI

npm i -g vercel
2

Login to Vercel

vercel login
3

Deploy

vercel --prod

​
Next.js Configuration

The portfolio’s next.config.mjs is optimized for both Vercel and standalone deployments: 
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const nextConfig = {
  output: "standalone",
  outputFileTracingRoot: __dirname,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "d2th3dc33uqqn2.cloudfront.net",
      },
      {
        protocol: "https",
        hostname: "cdn.jsdelivr.net",
      },
    ],
  },
};

export default nextConfig;
While output: "standalone" is configured for Docker deployments, Vercel automatically handles this configuration. You can deploy without modifications.

​
Integrated Analytics

This portfolio includes Vercel Analytics and Speed Insights: 
{
  "dependencies": {
    "@vercel/analytics": "^1.5.0",
    "@vercel/speed-insights": "^1.2.0"
  }
}
Features:
  • Web Analytics: Privacy-friendly visitor tracking without cookies
  • Speed Insights: Real User Metrics (RUM) for Core Web Vitals
  • Audience Insights: Geographic and device analytics
Analytics are automatically enabled when deployed to Vercel. View metrics in your Vercel dashboard under the Analytics tab.

​
Environment Variables

1

Add Environment Variables

In your Vercel project dashboard:
  1. Go to Settings → Environment Variables
  2. Add variables for each environment (Production, Preview, Development)
2

Configure Variables

NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_SITE_URL=https://luannguyen.net
3

Redeploy

Environment variable changes require redeployment:
vercel --prod
Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. Keep sensitive keys without this prefix.

​
Image Optimization

The portfolio leverages Vercel’s Image Optimization with configured remote patterns: 
images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "d2th3dc33uqqn2.cloudfront.net",
    },
    {
      protocol: "https",
      hostname: "cdn.jsdelivr.net",
    },
  ],
}
Benefits:
  • Automatic format conversion (WebP, AVIF)
  • Responsive image serving
  • Lazy loading with blur placeholders
  • CDN caching on Vercel Edge Network
Add additional remote patterns for any external image sources used in your portfolio.

​
Automatic CI/CD

Vercel provides automatic deployments for every Git push: Production Deployments:
  • Triggered by commits to main or master branch
  • Assigned to your production domain
  • Requires manual promotion or automatic via branch settings
Preview Deployments:
  • Created for every push to non-production branches
  • Unique URL for each commit
  • Perfect for reviewing changes before merging
https://luannguyen.net

​
Custom Domain Setup

1

Add Domain

In Vercel project settings:
  1. Navigate to Settings → Domains
  2. Enter your custom domain (e.g., luannguyen.net)
2

Configure DNS

Add DNS records at your domain registrar:
A Record: @ → 76.76.21.21
CNAME: www → cname.vercel-dns.com
3

Verify Domain

Vercel automatically verifies DNS configuration and provisions SSL certificates.
SSL certificates are automatically issued via Let’s Encrypt and renewed. HTTPS is enforced by default.

​
Performance Optimization

Vercel Edge Network:
  • Automatic static asset caching
  • Global CDN distribution across 40+ regions
  • Edge Functions for dynamic content
Build Optimization:
  • Automatic code splitting
  • Tree shaking and minification
  • Incremental Static Regeneration (ISR) support
Use next/image and next/font components to automatically leverage Vercel’s optimization features.

​
Technology Stack

This portfolio leverages these technologies on Vercel: 
{
  "dependencies": {
    "next": "^15.3.8",
    "react": "^18",
    "react-dom": "^18",
    "@vercel/analytics": "^1.5.0",
    "@vercel/speed-insights": "^1.2.0",
    "framer-motion": "^11.3.8",
    "tailwindcss": "^3.4.6"
  }
}
Runtime:
  • Node.js 18+ (automatically selected)
  • Edge Runtime available for API routes

​
Monitoring & Debugging

Deployment Logs:
  • View real-time build logs in Vercel dashboard
  • Check for build errors or warnings
Runtime Logs:
  • Access function execution logs
  • Monitor API route performance
  • Track errors with Vercel Error Tracking
Analytics:
  • Core Web Vitals tracking
  • Page load performance metrics
  • User interaction analytics
vercel logs <deployment-url>

​
Rollback Deployments

Instantly rollback to previous deployments:
1

View Deployments

Go to Deployments tab in Vercel dashboard
2

Select Previous Deployment

Click on any successful deployment
3

Promote to Production

Click “Promote to Production” to instantly rollback
Rollbacks are instant but don’t change your Git history. Consider reverting commits for persistent fixes.

​
Preview Comments & Collaboration

Vercel enables team collaboration on preview deployments:
  • Visual Feedback: Comment directly on preview deployments
  • Integration: Works with GitHub, GitLab, Bitbucket PR comments
  • Approval Workflow: Require approvals before production promotion

​
Best Practices

1

Use Environment Variables

Never commit secrets to Git. Use Vercel environment variables for API keys and sensitive data.
2

Enable Branch Protection

Configure production branch protection to require preview deployment success before merging.
3

Monitor Core Web Vitals

Regularly check Speed Insights to maintain optimal performance scores.
4

Leverage ISR

Use Incremental Static Regeneration for dynamic content that doesn’t need real-time updates.

Build docs developers (and LLMs) love

Get started for freeTalk to us