Vercel

Vercel is recommended to transition your project to a production environment. Vercel offers a managed environment that facilitates streamlined deployment with a single command. Additionally, Vercel is a serverless platform that dynamically adjusts resources to accommodate fluctuating demands.

Alternatively, you can explore other options such as SST (opens in a new tab), AWS Amplify (opens in a new tab), or DigitalOcean App Platform (opens in a new tab).

Setup Vercel

Here's a guide on how to setup Vercel:

Head to Vercel

Visit Vercel website (opens in a new tab) and create an account if you don't have one already.

Connect domain

You can connect your own domain name to your Vercel deployment.

Go to [Settings] ⮕ [Domains] and follow instructions to add and verify your domain.

Vercel domain

Create project

Go to [Add New] ⮕ [Project] to create a new project.

Vercel project

Add domain to project

Go to your project then [Settings] ⮕ [Domains] to setup domain for your project.

Vercel project

Setup Environment Variables

Open to your project environment variables page.

https://vercel.com/<your-team>/<your-project>/settings/environment-variables

Vercel environment

Next.js Site URL

Create NEXT_PUBLIC_SITE_URL variable and use domain https://<your-domain>.

OpenAI

💡

Ensure you have completed previous steps and setup your OpenAI account.

Head to your OpenAI project settings page:

https://platform.openai.com/api-keys

Create OPENAI_API_KEY variable and use your API key.

Supabase

💡

Ensure you have completed previous steps and setup your Supabase account for production.

To get Supabase keys, head to your Supabase project settings page:

https://supabase.com/dashboard/project/<project-id>/settings/api

Create NEXT_PUBLIC_SUPABASE_URL variable and use your Project URL.

Create NEXT_PUBLIC_SUPABASE_ANON_KEY variable and use Project API anon key.

Create SUPABASE_SERVICE_ROLE_KEY variable and use Project API service_role key.

Supabase project

Stripe

💡

Ensure you have completed previous steps and setup your Stripe account for production.

Create STRIPE_SECRET_KEY variable and use your API secret key.

Stripe stripe

Create STRIPE_WEBHOOK_SECRET variable and use Webhook signing secret:

Stripe stripe

Upstash [PRO]

💡

Ensure you have completed previous steps and setup Upstash.

Create UPSTASH_REDIS_REST_URL variable and use your rest API URL.

Create UPSTASH_REDIS_REST_TOKEN variable and use your rest API token.

Ensure that you have created all needed variables.

Vercel complete

💡

Ensure to redeploy your project after updating environment variables.

Deploy from Local Project

This method is useful if you don't have your project in a git repository yet or prefer a more manual approach.

Here's what you'll need:

Vercel CLI

The Vercel CLI allows you to manage deployments from your terminal.

You can install it following the instructions on the Vercel CLI page (opens in a new tab)

Run Vercel command

Go to your project directory and run:

vercel

This will initialize Vercel and guide you through the setup process. You'll likely be prompted to connect your account, configure settings, and choose a deployment method. Follow the on-screen prompts: Vercel will provide clear instructions during the setup process to ensure a successful deployment.

To deploy your project to production run the following command:

vercel --prod

You'll be able to access your live website through a Vercel-provided URL or your own domain.

For other methods and techniques to deploy, visit Vercel deployment page (opens in a new tab).

Stripe Project Structure