Deployment

Deploy your Capricorn Next.js template to production in minutes.

Before You Deploy

1. Build Test

Ensure your app builds successfully:


npm run build

If the build succeeds, you’re ready to deploy!

2. Environment Variables

If your template uses environment variables, prepare them:


# .env.local (for local development)
# .env.production (for production)
 
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_API_URL=https://api.yourdomain.com

3. Choose Your Platform

We recommend these platforms based on your needs:

Vercel (Recommended)

Zero configuration
Automatic HTTPS
Global CDN
Best for most use cases

Netlify

Easy setup
Free tier available
Good for static sites

Self-Hosted

Full control
Your infrastructure
Requires server management

Deployment Options

Quick Deploy

Choose your preferred platform:

Post-Deployment Checklist

After deploying, verify:

✅ Site loads correctly - Visit your production URL ✅ All pages accessible - Test navigation ✅ Images display - Check image loading ✅ Forms work - Test contact/booking forms ✅ Links functional - Verify internal/external links ✅ Mobile responsive - Test on mobile devices ✅ SSL certificate - Ensure HTTPS is active

Custom Domain Setup

All platforms support custom domains:

Purchase domain - From any registrar
Add to platform - Follow platform instructions
Update DNS - Point domain to platform
Wait for propagation - Usually 24-48 hours

Detailed instructions in each platform guide.

Performance Optimization

Enable Caching

Next.js automatically handles caching, but ensure:

Images use Next.js <Image> component
Static assets in public/ folder
API routes use appropriate cache headers

Optimize Images


// Use Next.js Image component
import Image from 'next/image'
 
<Image
  src="/images/hero.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  priority // For above-fold images
/>

Environment-Specific Builds


# Production build
npm run build
npm run start
 
# Preview build
npm run build
npm run dev

Monitoring & Analytics

Add Analytics

Most templates support analytics. Add your tracking ID:


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

Error Monitoring

Consider adding error tracking:

Sentry
LogRocket
Rollbar

Continuous Deployment

Set up automatic deployments:

Connect Git repo - Link to GitHub/GitLab/Bitbucket
Configure branches - Production from main, staging from dev
Auto-deploy - Commits trigger builds

All recommended platforms support Git-based deployments.

Common Issues

Build Fails


# Clear cache and rebuild
rm -rf .next
npm run build

Environment Variables Not Working

Ensure variables start with NEXT_PUBLIC_ for client-side
Redeploy after adding new variables
Check platform-specific variable settings

Images Not Loading

Verify images are in public/ folder
Check image paths (case-sensitive)
Ensure proper next.config.js settings

Need Help?

Next Steps

Choose your deployment platform
Follow the platform-specific guide
Set up custom domain
Add monitoring/analytics
Configure continuous deployment

Ready to deploy? Pick your platform and let’s go! 🚀