Skip to content

Deploy to Vercel

eziwiki

Vercel is the easiest way to deploy your eziwiki with zero configuration.

Quick Deploy#

Using Vercel CLI#

bash
# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Follow the prompts and your site will be live in seconds!

Using Vercel Dashboard#

  1. Go to vercel.com
  2. Click "New Project"
  3. Import your Git repository
  4. Click "Deploy"

That's it! Vercel automatically detects Next.js and configures everything.

Automatic Deployments#

Production Deployments#

Every push to your main branch triggers a production deployment:

bash
git push origin main

Your site updates automatically at your-project.vercel.app

Preview Deployments#

Every pull request gets a unique preview URL:

bash
git checkout -b feature-branch
git push origin feature-branch

Create a PR and get a preview link like your-project-git-feature-branch.vercel.app

Custom Domain#

1. Add Domain#

In Vercel dashboard:

  1. Go to Project Settings → Domains
  2. Add your domain: wiki.example.com
  3. Follow DNS instructions

2. Configure DNS#

Add DNS records provided by Vercel:

text
Type    Name    Value
A       @       76.76.21.21
CNAME   www     cname.vercel-dns.com

3. Enable HTTPS#

Vercel automatically provisions SSL certificates. HTTPS is enabled by default.

Environment Variables#

Add Variables#

In Vercel dashboard:

  1. Go to Project Settings → Environment Variables
  2. Add variables:
text
NEXT_PUBLIC_BASE_URL=https://wiki.example.com

Use in Code#

typescript
// payload/config.ts
global: {
  baseUrl: process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000',
}

Build Configuration#

vercel.json#

Create vercel.json for custom configuration:

json
{
  "buildCommand": "npm run build",
  "outputDirectory": "out",
  "framework": "nextjs",
  "regions": ["iad1"]
}

Build Settings#

In Vercel dashboard:

  • Framework Preset: Next.js
  • Build Command: npm run build
  • Output Directory: out
  • Install Command: npm install

Performance Optimization#

Edge Network#

Vercel automatically deploys to a global edge network for fast loading worldwide.

Automatic Caching#

Static assets are cached automatically:

  • HTML: Cached with revalidation
  • JS/CSS: Cached with long expiry
  • Images: Optimized and cached

Analytics#

Enable Vercel Analytics:

bash
npm install @vercel/analytics
typescript
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Deployment Workflow#

Development#

bash
# Work locally
npm run dev

# Commit changes
git add .
git commit -m "Update content"

Preview#

bash
# Create feature branch
git checkout -b new-feature

# Push to get preview
git push origin new-feature

Create PR to get preview URL.

Production#

bash
# Merge to main
git checkout main
git merge new-feature
git push origin main

Automatic production deployment!

Rollback#

Using Dashboard#

  1. Go to Deployments
  2. Find previous deployment
  3. Click "Promote to Production"

Using CLI#

bash
# List deployments
vercel ls

# Rollback to specific deployment
vercel rollback [deployment-url]

Monitoring#

Deployment Logs#

View logs in Vercel dashboard:

  1. Go to Deployments
  2. Click on a deployment
  3. View build and runtime logs

Real-time Logs#

bash
# Stream logs
vercel logs

Team Collaboration#

Add Team Members#

  1. Go to Project Settings → Team
  2. Invite members
  3. Set permissions (Viewer, Developer, Admin)

Protected Branches#

Configure branch protection:

  1. Go to Git → Branch Protection
  2. Require reviews before merging
  3. Require status checks

Vercel Features#

Instant Rollback#

One-click rollback to any previous deployment.

Preview Comments#

Comment on preview deployments directly in GitHub PRs.

Automatic HTTPS#

Free SSL certificates for all domains.

Global CDN#

Deploy to 100+ edge locations worldwide.

Zero Config#

Works out of the box with Next.js.

Pricing#

Hobby (Free)#

  • Unlimited deployments
  • 100 GB bandwidth/month
  • Automatic HTTPS
  • Preview deployments
  • Perfect for personal wikis

Pro ($20/month)#

  • 1 TB bandwidth/month
  • Team collaboration
  • Analytics
  • Password protection
  • Custom deployment regions

Troubleshooting#

Build Fails#

Check build logs in Vercel dashboard:

bash
# Test build locally
npm run build

Environment Variables#

Make sure all required variables are set in Vercel dashboard.

Domain Not Working#

  1. Check DNS propagation: dig wiki.example.com
  2. Wait up to 48 hours for DNS propagation
  3. Verify DNS records match Vercel's instructions

Old Content Showing#

Vercel caches aggressively. To force refresh:

  1. Make a change
  2. Push to trigger new deployment
  3. Hard refresh browser (Ctrl+Shift+R)

Best Practices#

Use Git Integration#

Connect your Git repository for automatic deployments.

Enable Preview Deployments#

Test changes before merging to production.

Set Up Custom Domain#

Use your own domain for professional appearance.

Monitor Analytics#

Track page views and performance.

Use Environment Variables#

Keep sensitive data out of your code.

Comparison with Other Platforms#

FeatureVercelGitHub PagesNetlify
SetupInstantManualEasy
Custom DomainFreeFreeFree
HTTPSAutomaticAutomaticAutomatic
Preview URLsYesNoYes
AnalyticsYes ($)NoYes ($)
Build TimeFastMediumFast

Next Steps#

Edit this page

Linked from 3 pages

Connected to 3 pages

Static ExportWelcome to eziwikiDeploy to VercelGitHub Pages