Magnolia-integrated Next.js to Vercel

Prerequisites

You should have Git installed and configured.
Have an account on GitHub (or GitLab/Bitbucket as per your preference).
Make sure you have an account on Vercel.

Step 1: Create your Next.js project

Run the following command.
```
npx create-next-app --example magnolia-vercel my-nextjs-project (1)
```
1 This command creates a new Next.js project using the magnolia-vercel example in a directory named my-nextjs-project.
Navigate to your project directory.

Or you can go to a GitHub repo and fork it.

Fork the Repository:

Visit https://github.com/magnolia-cms/magnolia-vercel-nextjs.

On the repository page, click the Fork button at the top right corner to create a fork of the repository under your GitHub account.
```
cd my-nextjs-project
```

Step 2: Push the project to your repository

Initialize a Git repository.
```
git init
```
Add your files to the repository.
```
git add .
```

Commit the files.

git commit -m "Initial commit with Magnolia-Vercel Next.js project"

Push to your GitHub repository.

You may need to create a new repository on GitHub. Follow the instructions to push your local repository to GitHub. It will look something like this:

git remote add origin <your-repository-url>
git branch -M main
git push -u origin main

Step 3: Connect Your Repository to Vercel

Log in to Vercel.
Import your project.
1. Click on “New Project”.
2. Choose to import a project from a Git repository.
3. Follow the prompts to connect Vercel to your GitHub account (if not already connected).
Set up Vercel Git integration:
1. Select your GitHub repository with the Next.js project.
2. Vercel detects that it’s a Next.js project and sets up the build settings automatically.
3. Now yo can add the environment variables for Magnolia before you deploy the project.
Set up environment variables:
1. Click on “Environment Variables”.
2. Add the following environment variables: + NEXT_PUBLIC_MGNL_HOST=YOUR_LOCAL_TUNNEL_URL NEXT_APP_MGNL_SITE_PATH="/vercel-demo"
3. Click on “Deploy”.
Deployment:

Vercel will begin deploying your project. Once the deployment is complete, you’ll receive a URL to view your live project. There will probably nothing displayed at this point, but we will fix that in the next steps.

Step 4: Verify Your Deployment

Check your Vercel dashboard.
1. Go back to your Vercel dashboard.
2. You should now see your new Next.js project (integrated with Magnolia) listed there.

Step 5: Getting your Vercel Domain URL and setting it in Magnolia

Get your Vercel domain URL. By clicking on the Visit button this will open a new tab with your project. Copy the URL from the address bar.
Take this URL and go to your Magnolia code base remember the file called spa-lm/templates/pages/basic.yaml

In this file you will find the following lines:

baseUrl: http://localhost:3000 (1)

Replace the http://localhost:3000 with the URL you copied from Vercel. Something like this:

baseUrl: https://my-nextjs-project.vercel.app

+ NOTE: You don’t have to do anything else to deploy your project. We will go forward and set the environment variables which will be the connection into Magnolia in the next steps.