Vercel

Deploying your SaaS application with Vercel is seamless, especially since Vercel is the company behind Next.js.

Steps to Deploy

1. Connect Your Repository:

   • Sign up or log in to your Vercel account.
   • From the dashboard, click "Add New..." > "Project".
   • Connect to your Git provider (GitHub, GitLab, Bitbucket) and select the repository containing your SaaS project.

2. Configure Project:

   • Vercel automatically detects Next.js and sets the framework preset.
   • The Build and Output Settings are typically configured correctly by default (npm run build or yarn build, output directory .next). You usually don't need to change these.

3. Add Environment Variables:

   • Expand the "Environment Variables" section during project setup or navigate to Project Settings > Environment Variables after creation.
   • Add all the necessary environment variables defined in your .env.example file (e.g., DATABASE_URL, NEXTAUTH_SECRET, RESEND_API_KEY, etc.).
   • Important: Ensure these variables are set for the Production environment (and Preview/Development if needed).

4. Deploy:

   • Click the "Deploy" button. Vercel will build and deploy your application.
   • Once complete, your site will be live on a Vercel subdomain (e.g., your-project-name.vercel.app).

Add a Custom Domain

Vercel makes adding a custom domain easy:

1. Go to Domain Settings: In your Vercel project dashboard, navigate to Settings > Domains.
2. Add Domain: Enter your custom domain (e.g., yourdomain.com) and click "Add".
3. Configure DNS: Vercel provides instructions for configuring your DNS records. You can either:
   • Use Vercel's nameservers (recommended).
   • Add specific A or CNAME records at your domain registrar to point to Vercel.
4. Verification and SSL: Vercel automatically verifies the domain and provisions an SSL certificate once the DNS is correctly configured and propagated.

Subsequent pushes to your connected Git branch will automatically trigger new deployments on Vercel.