Next.js Projelerinde CI/CD Pipeline Kurulumu

Modern web uygulamaları geliştirirken, sürekli entegrasyon (CI) ve sürekli dağıtım (CD) pipeline'ları, geliştirme sürecini hızlandırmak ve hataları en aza indirmek için kritik öneme sahiptir. Next.js, React tabanlı bir framework olarak, sunucu taraflı rendering (SSR), statik site generation (SSG) ve API rotaları gibi özellikleriyle modern web uygulamaları için popüler bir seçenektir. Bu yazıda, Next.js projelerinde CI/CD pipeline'larının nasıl kurulacağını detaylı bir şekilde ele alacağız.

1. CI/CD Nedir?

Sürekli Entegrasyon (CI): Geliştiricilerin kod değişikliklerini sık sık bir merkezi depoya (örneğin, GitHub) entegre etmesini sağlayan bir uygulamadır. Her entegrasyon, otomatik testler ve build işlemleriyle doğrulanır.

Sürekli Dağıtım (CD): CI sürecinden sonra, otomatik olarak uygulamanın canlı ortama dağıtılmasını sağlayan bir uygulamadır. Bu, manuel müdahaleleri en aza indirir ve hızlı bir şekilde yeni özelliklerin kullanıcılara ulaşmasını sağlar.

2. Next.js Projesi için CI/CD Pipeline Adımları

Next.js projesi için bir CI/CD pipeline'ı kurarken, genellikle aşağıdaki adımları takip ederiz:

• Kod Depolama ve Versiyon Kontrolü: Proje kodunun GitHub, GitLab veya Bitbucket gibi bir versiyon kontrol sisteminde saklanması.
• Otomatik Testler: Projede yazılan unit testler, integration testler ve end-to-end testlerin otomatik olarak çalıştırılması.
• Build İşlemi: Next.js projesinin build edilmesi ve statik dosyaların oluşturulması.
• Dağıtım: Build edilen projenin canlı ortama (örneğin, Vercel, AWS, Docker container) dağıtılması.

3. Örnek: GitHub Actions ile CI/CD Pipeline Kurulumu

GitHub Actions, GitHub depoları için ücretsiz olarak sunulan bir CI/CD aracıdır. Next.js projesi için GitHub Actions kullanarak bir CI/CD pipeline'ı kurabiliriz.

3.1. Proje Yapısı

Öncelikle, basit bir Next.js projesi oluşturalım:

npx create-next-app nextjs-ci-cd-example
cd nextjs-ci-cd-example

Proje içerisinde package.json dosyasında aşağıdaki script'ler bulunur:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"
  }
}

3.2. GitHub Actions Workflow Dosyası Oluşturma

GitHub Actions, .github/workflows dizini altında YAML dosyaları ile çalışır. Bu dizin altında ci-cd.yml adında bir dosya oluşturalım:

name: Next.js CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

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

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "14"

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test

      - name: Build project
        run: npm run build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

3.3. GitHub Secrets Ayarlama

Vercel'e dağıtım yapabilmek için, GitHub Secrets üzerinden Vercel kimlik bilgilerini eklememiz gerekiyor. GitHub deposunda:

1. Settings sekmesine gidin.
2. Secrets altında New repository secret butonuna tıklayın.
3. VERCEL_TOKEN, VERCEL_ORG_ID, ve VERCEL_PROJECT_ID için gerekli değerleri ekleyin.

3.4. Workflow'un Çalışması

Artık, main branch'ine bir push veya pull request yapıldığında, GitHub Actions otomatik olarak CI/CD pipeline'ını çalıştıracaktır. Bu pipeline:

1. Proje kodunu checkout eder.
2. Node.js ortamını kurar.
3. Bağımlılıkları yükler.
4. Testleri çalıştırır.
5. Projeyi build eder.
6. Vercel'e dağıtım yapar.

4. Sonuç

Next.js projelerinde CI/CD pipeline'ları kurmak, geliştirme sürecini otomatikleştirir ve hataları erken aşamada tespit etmeyi sağlar. GitHub Actions gibi araçlar, bu süreci kolaylaştırır ve ücretsiz olarak sunulur. Bu yazıda, basit bir Next.js projesi için GitHub Actions kullanarak bir CI/CD pipeline'ı nasıl kuracağımızı adım adım ele aldık. Bu örnek, projenizin ihtiyaçlarına göre genişletilebilir ve özelleştirilebilir.

CI/CD pipeline'ları, modern yazılım geliştirme süreçlerinin vazgeçilmez bir parçasıdır ve Next.js gibi modern framework'lerle birlikte kullanıldığında, geliştirme ve dağıtım süreçlerinizi büyük ölçüde iyileştirebilir.