NextReady

Deployment Guide

This guide provides detailed instructions for deploying your NextReady application to various hosting platforms. Follow these steps to get your application up and running in a production environment.

Deployment Platforms

NextReady can be deployed to several platforms, each with its own advantages:

  • Vercel (recommended)
  • Netlify
  • AWS Amplify
  • Railway
  • DigitalOcean App Platform
  • Self-hosted options

Deploying to Vercel

Vercel is the recommended platform for deploying Next.js applications, offering the best integration and performance.

Prerequisites

  • A Vercel account
  • Your project code pushed to a Git repository (GitHub, GitLab, or Bitbucket)
  • All environment variables ready for configuration

Deployment Steps

  1. Log in to your Vercel account and click "New Project"

  2. Import your repository from GitHub, GitLab, or Bitbucket

  3. Configure your project settings:

    • Framework Preset: Next.js
    • Root Directory: ./ (or your project root)
    • Build Command: next build
    • Output Directory: .next

  4. Add your environment variables:

    # Required environment variables
MONGODB_URI=mongodb+srv://user:password@cluster.mongodb.net/production-db
NEXTAUTH_URL=https://your-domain.com
NEXTAUTH_SECRET=your-nextauth-secret
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
EMAIL_SERVER_HOST=smtp.example.com
EMAIL_SERVER_PORT=587
EMAIL_SERVER_USER=your-email@example.com
EMAIL_SERVER_PASSWORD=your-email-password
EMAIL_FROM=noreply@your-domain.com

  5. Click "Deploy" and wait for the build to complete

  6. Once deployed, you can access your application at the provided Vercel URL

Custom Domain Setup

  1. In your Vercel project dashboard, go to "Settings" > "Domains"

  2. Add your custom domain and follow the instructions to configure DNS settings

  3. Vercel will automatically provision an SSL certificate for your domain

Vercel Webhooks

For Stripe webhooks, use the following URL format:

https://your-domain.com/api/webhooks/stripe

Deploying to Netlify

Prerequisites

  • A Netlify account
  • Your project code pushed to a Git repository

Deployment Steps

  1. Log in to your Netlify account and click "New site from Git"

  2. Connect to your Git provider and select your repository

  3. Configure build settings:

    • Build command: next build
    • Publish directory: .next

  4. Add your environment variables in the "Advanced build settings" section

  5. Click "Deploy site" and wait for the build to complete

Netlify Configuration File

Create a netlify.toml file in your project root:

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

[build.environment]
  NEXT_USE_NETLIFY_EDGE = "true"

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

[[redirects]]
  from = "/*"
  to = "/_ipx:path*"
  status = 200
  force = true
  conditions = {Path = ["/_ipx/**"]}

[[redirects]]
  from = "/*"
  to = "/404"
  status = 404

Deploying to AWS Amplify

Prerequisites

  • An AWS account
  • Your project code pushed to a Git repository

Deployment Steps

  1. Log in to the AWS Management Console and navigate to AWS Amplify

  2. Click "New app" > "Host web app"

  3. Connect to your Git provider and select your repository

  4. Configure build settings:

    version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

  5. Add your environment variables in the "Environment variables" section

  6. Click "Save and deploy" and wait for the build to complete

Deploying to Railway

Prerequisites

  • A Railway account
  • Your project code pushed to a Git repository

Deployment Steps

  1. Log in to your Railway account and click "New Project"

  2. Select "Deploy from GitHub repo"

  3. Connect to your GitHub account and select your repository

  4. Configure your project settings:

    • Root Directory: ./ (or your project root)
    • Build Command: npm run build
    • Start Command: npm start

  5. Add your environment variables in the "Variables" tab

  6. Railway will automatically deploy your application

Deploying to DigitalOcean App Platform

Prerequisites

  • A DigitalOcean account
  • Your project code pushed to a Git repository

Deployment Steps

  1. Log in to your DigitalOcean account and navigate to the App Platform

  2. Click "Create App" and connect to your Git provider

  3. Select your repository and branch

  4. Configure your app settings:

    • Type: Web Service
    • Build Command: npm run build
    • Run Command: npm start

  5. Add your environment variables in the "Environment Variables" section

  6. Select your plan and click "Launch App"

Self-Hosted Deployment

Prerequisites

  • A server or VPS (e.g., Ubuntu 20.04+)
  • Node.js 18+ installed
  • Nginx or another web server
  • PM2 or another process manager

Deployment Steps

  1. Clone your repository to the server:

    git clone https://github.com/yourusername/your-repo.git
cd your-repo

  2. Install dependencies and build the application:

    npm ci
npm run build

  3. Create a .env.local file with your environment variables

  4. Install PM2 and start your application:

    npm install -g pm2
pm2 start npm --name "nextready" -- start

  5. Configure Nginx as a reverse proxy:

    server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

  6. Set up SSL with Certbot:

    sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

Database Deployment

MongoDB Atlas

For production, we recommend using MongoDB Atlas:

  1. Create a MongoDB Atlas account at mongodb.com/cloud/atlas

  2. Create a new cluster (the free tier is sufficient for starting out)

  3. Set up a database user with appropriate permissions

  4. Configure network access (IP whitelist) or allow access from anywhere for testing

  5. Get your connection string and update your environment variables

Post-Deployment Tasks

Stripe Webhook Configuration

After deployment, update your Stripe webhook endpoint:

  1. Go to the Stripe Dashboard > Developers > Webhooks

  2. Add an endpoint with your production URL:

    https://your-domain.com/api/webhooks/stripe

  3. Select the following events to listen for:

    • checkout.session.completed
    • customer.subscription.created
    • customer.subscription.updated
    • customer.subscription.deleted
    • invoice.payment_succeeded
    • invoice.payment_failed

  4. Get the webhook signing secret and update your environment variable

Google OAuth Configuration

Update your Google OAuth credentials:

  1. Go to the Google Cloud Console > APIs & Services > Credentials

  2. Edit your OAuth 2.0 Client ID

  3. Add your production domain to the Authorized JavaScript origins:

    https://your-domain.com

  4. Add your production redirect URI:

    https://your-domain.com/api/auth/callback/google

Monitoring and Maintenance

Uptime Monitoring

Set up uptime monitoring with a service like UptimeRobot or Pingdom to be alerted if your site goes down.

Error Tracking

Implement error tracking with Sentry or a similar service:

// Install Sentry
npm install @sentry/nextjs

// Configure Sentry
// sentry.client.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'your-sentry-dsn',
  tracesSampleRate: 0.5,
});

// sentry.server.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'your-sentry-dsn',
  tracesSampleRate: 0.5,
});

Regular Backups

Ensure your MongoDB database is regularly backed up. MongoDB Atlas provides automated backups.

Continuous Deployment

Set up continuous deployment to automatically deploy changes when you push to your main branch.

Deployment Troubleshooting

Common Issues

  • Build Failures: Check your build logs for errors. Common issues include missing dependencies or environment variables.

  • API Routes Not Working: Ensure your API routes are properly configured and environment variables are set correctly.

  • Database Connection Issues: Verify your MongoDB connection string and network access settings.

  • Authentication Problems: Check your NextAuth.js configuration and OAuth provider settings.

  • Stripe Webhook Errors: Ensure your webhook endpoint is correctly configured and the signing secret is set.

Deployment Logs

Always check your deployment logs for errors:

  • Vercel: Project Dashboard > Deployments > Select deployment > Logs
  • Netlify: Site overview > Deploys > Select deploy > Deploy log
  • AWS Amplify: App > Select branch > Deployment details

Deployment Best Practices

  • Use Environment Variables: Never hardcode sensitive information in your codebase.
  • Implement CI/CD: Automate testing and deployment to catch issues early.
  • Stage Changes: Deploy to a staging environment before production.
  • Monitor Performance: Use tools like Lighthouse to monitor performance.
  • Regular Updates: Keep dependencies and packages updated.
  • Security Headers: Implement proper security headers for your application.
  • Rollback Plan: Have a plan for rolling back deployments if issues arise.

Next Steps

After successfully deploying your application, consider these next steps: