Deploy a Next.JS app on Vercel CLI and Utilizing a Custom VPS Domain

• Introduction

Vercel, a powerful platform for hosting and deploying web projects. Vercel offers a seamless deployment experience with features like automatic Git integration, serverless functions, and instant scaling. This tutorial will walk you through the process of deploying your Next.js app using Vercel's CLI tool. First, we'll start by installing the Vercel CLI on your system to kickstart your deployment journey.

Installatioin of Vercel through terminal:

Open your terminal and run the bellow command. This will install the Vercel CLI globally on your system.

npm install -g vercel             or               yarn global add vercel         or       pnpm i -g vercel        

Login to Vercel: After installation, authenticate with Vercel by running vercel login in your terminal. Follow the prompts to log in or sign up for a Vercel account if you haven't already. or you can easily login through there official website https://vercel.com/login.

• Creating a Simple Next.js App (Optional)

If you're starting from scratch and don't have a Next.js app ready, don't worry! I will guide you through the process of creating a basic Next.js app to get you up and running. This step is optional if you already have a Next.js project set up.

Create a New Next.js App: Navigate to your desired directory in the terminal and run npx create-next-app my-next-app. Replace my-next-app with your preferred app name.

> npx create-next-app quddus-vercel-app        

Navigate to App Directory: Move into your newly created app directory by running cd my-next-app`

> cd quddus-vercel-app

//open with vsCode or your preferred IDE 

> code .        

• Building Your Next.js App for Production with Vercel

Now that you have your Next.js app ready, it's time to deploy it to Vercel. Following the deployment process using the Vercel CLI, from logging in to configuring deployment settings. By the end of this section, your Next.js app will be live and accessible via a unique Vercel URL.

Deploy to Vercel: Run `vercel` in your terminal within your Next.js app directory. Follow the prompts to set up your deployment, including logging in with your Vercel credentials, selecting the project scope, naming your project, and specifying the deployment directory.

../quddus-vercel-app> vercel        

if you encounter: undefine script error you can run execution policy Bypass command Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted`

> Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted        

Re-run the 'vercel' command after clearing the error, or ignore this if you did not face any error while building.

Confirm Deployment: Once the deployment is complete, Vercel will provide you with a URL where your app is live. Access it to ensure everything deployed correctly.

• Accessing Your Deployed Next.js App on Vercel

Once your Next.js app is deployed, you'll want to access and explore its live version. We'll show you how to navigate the Vercel dashboard to find your deployed app and access its live URL. This step ensures that your deployment was successful and allows you to inspect your app's performance.

step one is clicking the preview link you generated in the previous guide while the second method is below.

Visit Vercel Dashboard: Log in to your Vercel account and navigate to the dashboard. You should see your deployed Next.js app listed there.

Click the image of your app and it will direct you to your shareble deployed application link. CONGRATULATIONS you have successful deployed your next.js app on Vercel CLI.

• Advanced Environment Setup on Vercel (optional but considerable for API usage accessible on server side)

To take your deployment to the next level, we'll explore advanced environment configuration options on Vercel. Learn how to manage environment variables seamlessly, whether by directly importing them into Vercel or adding them via the CLI. This step ensures that your Next.js app can securely access sensitive information like API keys and database credentials.

Navigate to your Vercel application dashboard and click the app settings

select the environment variable option

To manage environment variables on Vercel, follow these steps:

Direct Import of Environment Variables: Access your project settings on Vercel's dashboard. Navigate to the Environment Variables section and manually input your variables or upload a .env file.

another method is:

Adding Environment Variables via CLI: Alternatively, use the Vercel CLI to add environment variables. Run vercel env add VARIABLE_NAME VALUE in your terminal to add each variable individually. Replace the example name and other value with your actual value.

> vercel env add NEXT_PUBLIC_EXAMPLE_NAME        

it's important that you configure the following to make your application API accessible to both client and server side.

step1: To expose the environments variable

configure your next.config.mjs file using

/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        NEXT_PUBLIC_AZURE_OPENAI_ENDPOINT: process.env.AZURE_OPENAI_ENDPOINT,
        NEXT_PUBLIC_AZURE_OPENAI_MODEL: process.env.AZURE_OPENAI_MODEL,
//Remember to replace with your actual values
    },
};

export default nextConfig;        

step2: Accessing the variable in client code using 'process.env.NEXT_PUBLIC_NAME_EXAMPLE`

route.js

const endpoint = process.env.NEXT_PUBLIC_AZURE_OPENAI_ENPOINT;
const apikey = process.env.NEXT_PUBLIC_AZURE_OPENAI_API_KEY;
const model = process.env.NEXT_PUBLIC_AZURE_OPENAI_MODEL;        

step3: setting the env

.env

NEXT_PUBLIC_AZURE_OPENAI_ENPOINT=https://********.openai.azure.com/
NEXT_PUBLIC_AZURE_OPENAI_API_KEY=****************************
NEXT_PUBLIC_AZURE_OPENAI_MODEL=******************        

******

• Utilizing a Custom Domain from Your VPS Server (using Hostinger )

Lastly, will demonstrate how to integrate a custom domain from your VPS server with your Next.js app deployed on Vercel. By configuring DNS settings and adding your custom domain to Vercel, you can enhance your app's branding and provide a seamless user experience. This step adds a professional touch to your deployment and ensures consistency across your online presence.

Add Custom Domain on Vercel: In your Vercel project settings, navigate to the Domains section. Add your custom domain and follow the verification steps provided by Vercel.

Configure the required DNS settings with your domain service hosting provider.

Configure DNS Settings: Log in to your domain registrar's website and navigate to the DNS settings for your domain. Add a new DNS record (typically an A record) pointing to Vercel's IP addresses.

cname:

I hope you enjoyed your new learning experience so far.

Keep in touch. Thanks

Quddus Raheem