Get NextJet

Hosting

Learn how to host your website on a server and make it accessible to the public.

Choose a Hosting Provider

You can host your apps on a variety of hosting providers that supports Next.js.

Here are some popular hosting providers:

I recommend using Vercel, it's the company behind Next.js and offers a seamless deployment experience. I will be using Vercel in this guide.

Deploy to Vercel

Since we're using turborepo and have multiple apps (marketing and dashboard), we need to deploy each app separately.

We're going to deploy the marketing site under your-domain.com and the dashboard under the app subdomain, app.your-domain.com.

This gives a clean separation between the marketing site and the dashboard, and gives a professional look to your website rather than having everything under the same domain.

Make sure to have the keys and secrets ready that you got from the previous steps.

Deploy the Marketing Site

Login to Vercel

Go to the Vercel dashboard and login with your credentials.

Import the repository

On the Overview tab, click on the Add New... dropdown and select Project.

Select your repository and click Import.

Configure the Project

Enter the project name suffixed with -marketing, for example, your-project-name-marketing.

Framework preset should be Next.js.

Override the build command with the following:

cd ../.. && pnpm build --filter=marketing

The root directory should be apps/marketing.

Make sure the include source files outside of the Root Directory in the Build Step is checked.

Node.js version should be 20.x.

Environment Variables

Add the following environment variables:

# --------------- APP ---------------
NEXT_PUBLIC_APP_ENV = The environment of the app, set it to `production`.
NEXT_PUBLIC_APP_URL = The URL of the marketing site, set it to `https://your-domain.com`.

# --------------- ANALYTICS ---------------
NEXT_PUBLIC_TINYBIRD_SRC
NEXT_PUBLIC_TINYBIRD_DATA_HOST
NEXT_PUBLIC_TINYBIRD_ANALYTICS_MARKETING_TRACKER_TOKEN

# --------------- MISC ---------------
NEXT_PUBLIC_CRISP_WEBSITE_ID = OPTIONAL, if you want to enable the support chat widget on the marketing site.

Deploy

Click on the Deploy button to deploy the marketing site.

Setup Custom Domain

Once the deployment is complete, go to the Settings tab and click on Domains.

In the input field, enter your domain name your-domain.com and click Add.

Follow the instructions to add the necessary DNS records to your domain registrar.

Be patient, it could take a few minutes for the DNS records to propagate.

Done

Once the DNS records have propagated, your marketing site will be live at https://your-domain.com.

You will also be able to check the analytics of the website on the tinybird URL we bookmarked earlier.

Deploy the Dashboard Site

Login to Vercel

Go to the Vercel dashboard and login with your credentials.

Import your repository

On the Overview tab, click on the Add New... dropdown and select Project.

Select your repository and click Import.

Configure the Project

Enter the project name suffixed with -dashboard, for example, your-project-name-dashboard.

Framework preset should be Next.js.

Override the build command with the following:

cd ../.. && pnpm build --filter=dashboard

The root directory should be apps/dashboard.

Make sure the include source files outside of the Root Directory in the Build Step is checked.

Node.js version should be 20.x.

Environment Variables

Add the following environment variables:

# --------------- APP ---------------
NEXT_PUBLIC_APP_ENV = The environment of the app, set it to `production`.
NEXT_PUBLIC_APP_URL = The URL of the dashboard site, set it to `https:/app.your-domain.com`.

# --------------- ANALYTICS ---------------
NEXT_PUBLIC_TINYBIRD_SRC
NEXT_PUBLIC_TINYBIRD_DATA_HOST
NEXT_PUBLIC_TINYBIRD_ANALYTICS_DASHBOARD_TRACKER_TOKEN
    
# --------------- EMAIL ---------------
RESEND_KEY = The Resend API key.
RESEND_EMAIL_DOMAIN = Choose a professional email sending domain, for example, "info@your-domain.com"

# --------------- AUTHENTICATION ---------------
NEXTAUTH_URL = The URL of the dashboard site, set it to "https:/app.your-domain.com".
NEXTAUTH_SECRET = You can generate a secret by running "openssl rand -base64 32".
GITHUB_CLIENT_ID = OPTIONAL, if you want to enable GitHub login.
GITHUB_CLIENT_SECRET = OPTIONAL, if you want to enable GitHub login.
GOOGLE_CLIENT_ID = OPTIONAL, if you want to enable Google login.
GOOGLE_CLIENT_SECRET = OPTIONAL, if you want to enable Google login.

# --------------- DATABASE ---------------
DATABASE_URL = The production database URL. We obtained this from the previous steps.

# --------------- PAYMENTS ---------------
# Use these if you are using Stripe
STRIPE_SECRET_KEY = Make sure you use the production secret key.
STRIPE_PUBLISHABLE_KEY = Make sure you use the production publishable key.
STRIPE_WEBHOOKS_SECRET = Make sure you use the production webhooks signing secret.

# Use these if you are using Lemon Squeezy:
LEMONSQUEEZY_API_KEY = Make sure you use the production api key.
LEMONSQUEEZY_STORE_ID = Make sure you use the production Store ID.
LEMONSQUEEZY_WEBHOOK_SECRET = Make sure you use the production webhooks signing secret.

# --------------- MISC ---------------
NEXT_PUBLIC_CRISP_WEBSITE_ID = OPTIONAL, if you want to enable the support chat widget.
NEXT_PUBLIC_CANNY_BOARD_TOKEN = OPTIONAL, if you want to enable the feedback board.
CANNY_PRIVATE_KEY = OPTIONAL, if you want to enable the feedback board.

Deploy

Click on the Deploy button to deploy the dashboard site.

Setup Custom Domain

Once the deployment is complete, go to the Settings tab and click on Domains.

In the input field, enter your domain name app.your-domain.com and click Add.

Follow the instructions to add the necessary DNS records to your domain registrar.

Be patient, it could take a few minutes for the DNS records to propagate.

Done

Once the DNS records have propagated, your dashboard site will be live at https://app.your-domain.com.

You will also be able to check the analytics of the website on the tinybird URL we bookmarked earlier.

Activate Speed Insights

Vercel Speed Insights is a tool that helps you monitor the performance of your website and provides suggestions to improve it.

I have already configured Vercel Speed Insights for you. If you wish to activate it you can do so in the Vercel dashboard.

Enable Speed Insights in Vercel

To access the Speed Insights tab for your project on Vercel's dashboard, first navigate to your Project, then click on the Speed Insights tab. Alternatively, you can directly visit the tab by clicking here. Next, choose "Enable" from the dialog to proceed.

You can activate Speed Insights for both the marketing and dashboard sites if you wish. However, doing so for the marketing site is most important.

Done

Congratulations, you have successfully deployed your marketing and dashboard site to Vercel. You're all set to jump right into your business now!

When modifications are made to the database schema and these changes are merged into the main branch, GitHub Actions will automatically execute the migrations and synchronize the production database schema.

Everytime you push to the main branch, Vercel will automatically deploy the changes to the production environment.

Last updated on

Lemon Squeezy