Production setup

Pre-deployment Checklist

Essential Steps

1. Dependencies: Ensure all dependencies are properly listed in package.json
2. Build Testing: Test the production build locally
3. Environment Variables: Set up required environment variables
4. Database Access: Configure proper database access and connection strings
5. Authentication: Test authentication flows with production settings
6. API Endpoints: Verify all API endpoints work correctly
7. Error Handling: Check error boundaries and fallbacks
8. Performance: Verify bundle sizes and load times

Local Build Testing

Before deploying, it's crucial to test your production build locally to catch any potential issues:

Build Commands

Choose the appropriate command based on your package manager:

# Using npm
npm run build
npm run start
 
# Using Yarn
yarn build
yarn start
 
# Using Bun
bun run build
bun run start

Common Local Build Issues

• Missing dependencies in package.json
• Incorrect import paths (case sensitivity)
• Missing environment variables
• Type errors that only appear in production builds
• Browser API usage in server components

Vercel Deployment

Deployment Process

1. Create Vercel Account

   • Sign up for a free account at vercel.com

2. Connect Repository

   • Link your GitHub, GitLab, or Bitbucket repository to Vercel
   • Grant necessary permissions for repository access

3. Configure Project

   • Set up build settings
   • Configure environment variables
   • Set custom domains (if needed)

4. Deploy

   • Trigger deployment manually or via git push
   • Monitor the build logs for any issues

# Or deploy directly from CLI (after installing Vercel CLI)
npm install -g vercel
vercel login
vercel

Automatic Deployments

Vercel automatically deploys your application when you push to your default branch. It also creates preview deployments for pull requests.

Environment Variables

Configuration Process

1. Navigate to your project in the Vercel dashboard
2. Go to the "Settings" tab
3. Select "Environment Variables"
4. Add each required variable with its production value
5. Specify which environments (production, preview, development) should use each variable

Required Variables

Essential environment variables for production:

# Database
DATABASE_URL="your-production-db-url"
 
# Authentication
BETTER_AUTH_URL="https://your-domain.com"
BETTER_AUTH_SECRET="your-secret"
 
# Services
STRIPE_SECRET_KEY="your-stripe-key"
RESEND_API_KEY="your-resend-key"
 
# Storage
AWS_ACCESS_KEY_ID="your-aws-key"
AWS_SECRET_ACCESS_KEY="your-aws-secret"
AWS_REGION="your-aws-region"
S3_BUCKET_NAME="your-bucket-name"
 
# Application
NEXT_PUBLIC_APP_URL="https://your-domain.com"

Environment Separation

You can configure different environment variables for:

• Production: Your live application
• Preview: Deployment previews from pull requests
• Development: Local development environment

Post-deployment Checks

After deploying, verify that your application works correctly in production:

Functionality Testing

Performance Monitoring

Key metrics to check:

1. Page Load Times: Check initial and subsequent page loads
2. API Response Times: Verify API endpoints respond quickly
3. Error Rates: Monitor for unexpected errors
4. Core Web Vitals: Check LCP, FID, and CLS scores
5. Memory Usage: Watch for memory leaks and high usage

Troubleshooting

If you encounter issues during or after deployment:

Common Deployment Issues

1. Build Failures

   • Check build logs for specific errors
   • Verify all dependencies are correctly installed
   • Check for environment variables that might be missing

2. Runtime Errors

   • Check browser console for client-side errors
   • Review server logs for server-side issues
   • Verify environment variables are correctly set and accessible

3. Database Connection Issues

   • Ensure database credentials are correct
   • Check network access rules and IP allowlists
   • Verify connection string format

4. Authentication Problems

   • Confirm authentication environment variables are set correctly
   • Check for domain mismatches in callback URLs
   • Verify cookie settings for secure environments

Vercel Logs

Access detailed logs from the Vercel dashboard:

1. Navigate to your project
2. Go to the "Deployments" tab
3. Select the specific deployment
4. Click "View Functions Logs" or "Build Logs"

Custom Domains

To use a custom domain with your Vercel deployment:

1. Navigate to your project in the Vercel dashboard
2. Go to the "Domains" tab
3. Add your domain
4. Follow the instructions to configure DNS settings
5. Verify domain ownership

Production Best Practices

Security Considerations

1. Enable CORS: Configure proper CORS settings for API routes
2. Content Security Policy: Set up CSP headers
3. API Rate Limiting: Prevent abuse with rate limiting
4. Input Validation: Validate all user input server-side
5. Authentication Timeouts: Set reasonable session timeouts

Continuous Integration

For a robust CI/CD pipeline:

1. GitHub Actions: Set up tests to run on pull requests
2. Automated Testing: Configure unit and integration tests
3. Linting: Enforce code quality standards
4. Type Checking: Verify TypeScript types during CI
5. Branch Protection: Require passing checks before merging

Example GitHub Action workflow:

name: CI
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Run linter
        run: npm run lint
      - name: Run type checker
        run: npm run type-check
      - name: Run tests
        run: npm test

Additional Resources

• Vercel Documentation
• Next.js Deployment Guide
• Database Migration Best Practices
• Next.js Performance Optimization
• Web Vitals Monitoring