Connecting a GitHub repository to Vercel is the easiest and most robust way to deploy a Next.js (or any frontend) application. By linking the two, you automatically set up Continuous Integration and Continuous Deployment (CI/CD). Whenever you push new code to your repository, Vercel will automatically build and deploy it.
Here is a step-by-step guide to connecting your GitHub repo to Vercel.
### Step 1: Create a Vercel Account If you don't have one already, go to [vercel.com](https://vercel.com/) and click Sign Up. * It is highly recommended to sign up using your GitHub account. This automatically links your Vercel profile to your GitHub profile, making the next steps much easier.
### Step 2: Import Your Project 1. Once logged into Vercel, go to your Dashboard. 2. Click the Add New... button in the top right corner and select Project.
### Step 3: Connect to GitHub 1. Under the "Import Git Repository" section, you will see a button to connect to a Git provider. Select GitHub. 2. Vercel will ask for permission to access your GitHub repositories. 3. You can choose to grant Vercel access to All repositories (easier for future projects) or Only select repositories (better for strict security if you only want it to access one specific repo right now). 4. Click Install / Authorize.
### Step 4: Configure and Deploy 1. Once connected, Vercel will show a list of your GitHub repositories. 2. Find the repository you want to deploy and click Import. 3. Configure the Project: * Project Name: Vercel will default to the repo name, but you can change it. * Framework Preset: Vercel usually auto-detects the framework (like Next.js). If it's correct, leave it as is. * Root Directory: If your code is in the root of the repository, leave this as `./`. If your app is inside a subfolder, select the correct folder. * Environment Variables: If your app uses external services (like Supabase API keys), open this section and add your variables here (e.g., `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY`). 4. Click Deploy.
### Step 5: Wait for the Build Vercel will now clone your repository, install dependencies, and build your application. This usually takes a minute or two. Once it's done, you'll be redirected to a success screen with fireworks and a link to your live application!
### What happens next? (Auto-Deployments) Now that they are linked, Vercel will watch your GitHub repository. * Whenever you run `git push origin main`, Vercel will automatically trigger a new Production Deployment. * Whenever you push to a different branch or open a Pull Request, Vercel will create a Preview Deployment so you can test changes before merging them into main.
This seamless integration ensures your live site is always perfectly in sync with your latest codebase.