A Beginner's Guide to CI/CD with Next.js Blog App

Continuous Integration (CI) and Continuous Delivery (CD) are crucial practices in modern software development. They allow developers to automate the process of building, testing, and deploying code, ensuring a more reliable and efficient development workflow. In this guide, we'll walk through the basics of CI/CD and demonstrate how to implement it with a Next.js blog app.

What is CI/CD?

Continuous Integration (CI): This is the practice of automatically integrating code changes from multiple contributors into a shared repository. The primary goal is to detect and address integration issues early in the development process.

Continuous Delivery (CD): Building on CI, Continuous Delivery involves automating the deployment of code changes to a staging or production environment. It ensures that your application is always in a deployable state.

Setting Up Your Next.js Blog App

Before we dive into CI/CD, let's set up a simple Next.js blog app. If you don't have Next.js installed, you can do so by running:

npm install -g create-next-app

Now, let's create our blog app:

npx create-next-app my-blog
cd my-blog

To keep things simple, we'll use a basic blog structure with markdown files for our blog posts. Install the necessary dependencies:

npm install gray-matter remark remark-html

Now, create a posts directory and add a sample markdown file, e.g., post.md.

---
title: My First Post
---

# Welcome to my blog!

This is my first blog post.

Integrating CI/CD with GitHub Actions

GitHub Actions provides an easy way to implement CI/CD directly within your GitHub repository. Let's set up a basic CI workflow.

Create a new directory called .github/workflows in your project root, and add a file named ci-cd.yml:

name: CI/CD

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 14

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Test
        run: npm test

This workflow triggers on every push to the main branch, checks out the code, sets up Node.js, installs dependencies, builds the project and runs tests. Feel free to customize these steps based on your project requirements.

Adding CD with Vercel

Vercel is a popular platform for hosting Next.js applications and provides seamless integration with GitHub. If you don't have a Vercel account, sign up here.

Step 1: Install Vercel CLI

Install the Vercel CLI globally by running:

npm install -g vercel

Step 2: Deploy to Vercel

Run the following command to link your project to Vercel:

vercel login

Follow the prompts to authenticate. Once authenticated, deploy your app with:

vercel

This command will prompt you to configure your deployment settings. Choose the appropriate options, and Vercel will provide you with a deployment URL.

Step 3: Add Vercel Deployment to GitHub Actions Workflow

Update your ci-cd.yml file to include deployment to Vercel:

name: CI/CD

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 14

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Test
        run: npm test

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Deploy to Vercel
        run: npx vercel --prod
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

This workflow adds a deployment job (deploy) that runs after the build job (build). It deploys the app to Vercel using the Vercel CLI. Make sure to configure the VERCEL_TOKEN secret in your GitHub repository settings. You can obtain the token from your Vercel account.

Conclusion

Congratulations! You've successfully set up a basic CI/CD pipeline for your Next.js blog app. With each code push, GitHub Actions will automatically build and test your app, and if successful, deploy it to Vercel.

This guide covers the essentials of CI/CD, GitHub Actions, and Vercel integration. As your project evolves, consider extending your CI/CD pipeline to include additional steps like linting, security scans, and more sophisticated testing.

Remember to adapt these practices to fit the specific needs of your project and enjoy the benefits of a streamlined development workflow. Happy coding!