Deploy a Next.js App on Vercel with Github Actions

Deploying a Next.js app on Vercel with GitHub Actions is a powerful way to streamline your development workflow. This guide will walk you through the process, ensuring your app is automatically deployed whenever changes are pushed to your GitHub repository.

PrerequisitesPermalink to “Prerequisites”

• A Next.js App
• A GitHub repository containing your Next.js App
• A Vercel account

Step 1: Set up your Next.js App on GithubPermalink to “Step 1: Set up your Next.js App on Github”

Ensure your Next.js app is pushed to a GitHub repository. If you haven’t done this yet, follow these steps:

1. Open a terminal or command prompt.
2. Navigate to the directory where your Next.js app is located.
3. Initialize a new Git repository:

   git init

   ShellCopy to clipboard
4. Add all files to the repository:

   git add .

   ShellCopy to clipboard
5. Commit your changes with a descriptive message:

   git commit -m "Initial commit"

   ShellCopy to clipboard
6. Create a GitHub repository and connect it to your local repository:

   git remote add origin https://github.com/your-username/your-repo-name.git

   ShellCopy to clipboard
7. Push your changes to GitHub:

   git push -u origin main

   ShellCopy to clipboard

Step 2: Connect your repository to VercelPermalink to “Step 2: Connect your repository to Vercel”

Next, we’ll link your GitHub repository to Vercel.

1. Log in to your Vercel account.
2. Click on the “New Project” button.
3. Select your Github repository
4. Configure your project settings (Vercel should automatically detect that it’s a Next.js app)
5. Click on the “Deploy” button.

Step 3: Set up GitHub ActionsPermalink to “Step 3: Set up GitHub Actions”

Now, let’s set up Github Actions to automate the deployment process.

1. In your Github repository, go to the Actions tab.
2. Click on the New Workflow
3. Choose Set up a workflow yourself
4. Name your workflow file (eg. vercel-deploy.tml)
5. Replace the content with following YAML:
6. Or create .github/workflows/vercel-deploy.yml file in your project folder

name: Vercel Production Deployment
env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
  push:
    branches: [main]
jobs:
  Deploy-Production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

Step 4: Configure Vercel TokenPermalink to “Step 4: Configure Vercel Token”

To allow Github Actions to deploy to Vercel, you need to set up a Vercel token:

1. Go to your Vercel account settings
2. Navigate to Tokens
3. Create a new token and copy it
4. In your Github repository, go to Settings>Secrets and variables>Actions
5. Create a new repository secret name VERCEL_TOKEN and paste your Vercel token as the value

{"orgId":"team_xyz12a12asd","projectId":"prj_xxxxxxxxxxxxxxx"}

Step 5: Push Changes and Watch it DeployPermalink to “Step 5: Push Changes and Watch it Deploy”

Now, whenever you push changes to the main branch of your GitHub repository, GitHub Actions will automatically trigger a deployment to Vercel.

By following these steps, you’ve successfully set up automated deployments for your Next.js app using Vercel and GitHub Actions. This workflow will save you time and ensure that your production environment is always up to date with your latest code changes. Remember to test your application thoroughly before pushing to the main branch, as changes will be automatically deployed to production.

Happy coding!