M

MLOG

Türkçe

Next.js API Rotalarını kullanarak doğrudan Next.js uygulamanız içinde sunucusuz arka uçlar oluşturmayı öğrenin. Bu kılavuz, temel kurulumdan kimlik doğrulama, veri kalıcılığı ve daha fazlasını yönetmek için gelişmiş tekniklere kadar her şeyi kapsar.

Next.js API Rotaları: Backend'inizi Kolaylıkla Oluşturun

Next.js, güçlü özellikleri ve sezgisel yapısıyla ön uç (front-end) geliştirmede devrim yarattı. Peki, arka uç (backend) geliştirmeyi de önemli ölçüde basitleştirebildiğini biliyor muydunuz? Next.js API Rotaları, doğrudan Next.js uygulamanız içinde sunucusuz API uç noktaları oluşturmanıza olanak tanıyarak birçok durumda ayrı bir arka uç sunucusuna olan ihtiyacı ortadan kaldırır. Bu kapsamlı kılavuz, Next.js API Rotalarını kullanarak sağlam ve ölçeklenebilir bir arka uç oluşturma sürecinde size yol gösterecektir.

Next.js API Rotaları Nedir?

API Rotaları, Next.js projenizdeki /pages/api dizini içinde oluşturduğunuz sunucusuz fonksiyonlardır. Bu fonksiyonlar, gelen HTTP isteklerini işler ve tıpkı geleneksel bir arka uç API'si gibi yanıtlar döndürür. Temel fark, sunucusuz fonksiyonlar olarak dağıtılmalarıdır, bu da sunucuları veya altyapıyı yönetmeniz gerekmediği anlamına gelir.

Bunları, Next.js ön ucunuzla sorunsuz bir şekilde entegre olan, hafif, isteğe bağlı arka uç fonksiyonları olarak düşünebilirsiniz.

Next.js API Rotalarını Kullanmanın Faydaları

Next.js API Rotalarına Başlarken

JSON yanıtı döndüren basit bir API rotası oluşturalım. Öncelikle, bir Next.js projesi kurduğunuzdan emin olun. Eğer yoksa, şunu kullanarak bir tane oluşturun:

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

Şimdi, /pages/api dizini içinde hello.js adında bir dosya oluşturun:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Bu kod, "John Doe" adını içeren bir JSON nesnesi ile yanıt veren basit bir API rotası tanımlar. Bu API rotasına erişmek için Next.js geliştirme sunucunuzu başlatın:

npm run dev

Ardından, tarayıcınızı açın ve http://localhost:3000/api/hello adresine gidin. Aşağıdaki JSON yanıtını görmelisiniz:

{"name": "John Doe"}

API Rota İşleyicisini (Handler) Anlamak

API rotanızdaki handler fonksiyonu iki argüman alır:

Bu nesneleri farklı türdeki istekleri işlemek, istek gövdesinden veri okumak, yanıt başlıklarını ayarlamak ve farklı türlerde yanıtlar göndermek için kullanabilirsiniz.

Farklı HTTP Metotlarını İşleme

Gelen isteğin HTTP metodunu belirlemek ve farklı metotları buna göre işlemek için req.method özelliğini kullanabilirsiniz. Örneğin:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // GET isteğini işle
    res.status(200).json({ message: 'Bu bir GET isteğidir' })
  } else if (req.method === 'POST') {
    // POST isteğini işle
    res.status(200).json({ message: 'Bu bir POST isteğidir' })
  } else {
    // Diğer metotları işle
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

Bu örnekte, API rotası hem GET hem de POST isteklerini işler. İstek metodu GET ise, "Bu bir GET isteğidir" mesajını içeren bir JSON nesnesiyle yanıt verir. İstek metodu POST ise, "Bu bir POST isteğidir" mesajını içeren bir JSON nesnesiyle yanıt verir. İstek metodu başka bir şey ise, 405 Method Not Allowed hatasıyla yanıt verir.

İstek Gövdesinden Veri Okuma

POST, PUT ve PATCH istekleri için genellikle istek gövdesinden veri okumanız gerekir. Next.js, JSON ve URL kodlu istek gövdelerini ayrıştırmak için yerleşik destek sağlar. Bir JSON istek gövdesini ayrıştırmak için req.body özelliğini kullanabilirsiniz. Örneğin:

// pages/api/post.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body

    // Veriyi işle
    console.log('İsim:', name)
    console.log('E-posta:', email)

    res.status(200).json({ message: 'Veri başarıyla alındı' })
  } else {
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

Bu API rotasını test etmek için Postman veya curl gibi bir araç kullanarak JSON gövdeli bir POST isteği gönderebilirsiniz:

curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post

Yanıt Başlıklarını Ayarlama

Yanıt başlıklarını ayarlamak için res.setHeader() metodunu kullanabilirsiniz. Bu, içerik türünü, önbellek kontrolünü ve diğer önemli bilgileri ayarlamak için kullanışlıdır. Örneğin:

// pages/api/headers.js
export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.setHeader('Cache-Control', 's-maxage=3600')
  res.status(200).json({ message: 'Merhaba, dünya!' })
}

Bu örnekte, API rotası Content-Type başlığını application/json olarak ayarlar, bu da yanıtın bir JSON nesnesi olduğunu belirtir. Ayrıca Cache-Control başlığını s-maxage=3600 olarak ayarlar, bu da tarayıcıya ve CDN'e yanıtı 1 saate kadar önbelleğe almasını söyler.

Hata Yönetimi

API rotalarınızda hataları zarif bir şekilde yönetmek önemlidir. İstisnaları yakalamak ve istemciye uygun hata yanıtları göndermek için try-catch bloklarını kullanabilirsiniz. Örneğin:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Bir hata simüle et
    throw new Error('Bir şeyler ters gitti')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internal Server Error' })
  }
}

Bu örnekte, API rotası yeni bir Error nesnesi atarak bir hata simüle eder. Catch bloğu hatayı yakalar, konsola kaydeder ve istemciye 500 Internal Server Error yanıtı gönderir. Üretim ortamları için Sentry veya Datadog gibi sağlam bir kayıt sistemi kullanmayı düşünün.

Veritabanına Bağlanma

API rotaları için en yaygın kullanım durumlarından biri bir veritabanına bağlanmaktır. Next.js API Rotaları, aşağıdakiler de dahil olmak üzere çeşitli veritabanlarıyla sorunsuz bir şekilde entegre olur:

İşte bir Next.js API rotasında bir MongoDB veritabanına nasıl bağlanılacağına dair bir örnek:

// pages/api/mongodb.js
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('Lütfen Mongo URI\'nizi .env.local dosyasına ekleyin')
}

if (process.env.NODE_ENV === 'development') {
  // Geliştirme modunda, değerin HMR (Hot Module Replacement)
  // tarafından neden olunan modül yeniden yüklemeleri arasında korunması
  // için küresel bir değişken kullanın.
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // Üretim modunda, küresel bir değişken kullanmamak en iyisidir.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Modül kapsamlı bir MongoClient promise'i dışa aktarın. Bunu ayrı
// bir modülde yaparak, istemci birden fazla
// fonksiyonda güvenle yeniden kullanılabilir. Bkz: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
  try {
    const client = await clientPromise
    const db = client.db(process.env.MONGODB_DB)
    const collection = db.collection('users')

    const users = await collection.find({}).toArray()

    res.status(200).json({ users })
  } catch (e) {
    console.error(e)
    res.status(500).json({ message: 'Kullanıcılar getirilemedi' })
  }
}

Bu kodu çalıştırmadan önce, mongodb paketinin kurulu olduğundan emin olun:

npm install mongodb

Ayrıca MONGODB_URI ve MONGODB_DB ortam değişkenlerini de ayarlamanız gerekir. Bu değişkenler .env.local dosyanızda (veya üretim için barındırma sağlayıcınızın ortam değişkeni ayarlarında) tanımlanmalıdır. MONGODB_URI, MongoDB veritabanınıza bağlantı dizesini içerir ve MONGODB_DB veritabanı adını belirtir.

Kimlik Doğrulama ve Yetkilendirme

API rotalarınızı korumak güvenlik için çok önemlidir. Next.js API Rotaları, aşağıdakiler de dahil olmak üzere çeşitli kimlik doğrulama ve yetkilendirme teknikleri kullanılarak güvence altına alınabilir:

İşte bir API rotasını JWT kimlik doğrulaması kullanarak nasıl koruyacağınıza dair bir örnek:

// pages/api/protected.js
import jwt from 'jsonwebtoken'

const secret = process.env.JWT_SECRET

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1]

  if (!token) {
    return res.status(401).json({ message: 'Yetkisiz' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded" nesnesi, token içine gömülü kullanıcı bilgilerini içerir
    // Örneğin: const userId = decoded.userId;

    // İsteği işlemeye devam et
    res.status(200).json({ message: 'Korunan kaynağa başarıyla erişildi' })
  } catch (error) {
    return res.status(401).json({ message: 'Geçersiz token' })
  }
}

Bu kodu çalıştırmadan önce, jsonwebtoken paketinin kurulu olduğundan emin olun:

npm install jsonwebtoken

Ayrıca JWT_SECRET ortam değişkenini de ayarlamanız gerekir. Bu, JWT'leri imzalamak ve doğrulamak için kullanılan güçlü, rastgele oluşturulmuş bir gizli anahtar olmalıdır. Bunu güvenli bir şekilde saklayın ve asla istemci tarafı kodunuzda ifşa etmeyin.

Middleware (Ara Katman Yazılımı)

Next.js, API rotaları için Express.js gibi geleneksel bir middleware sunmasa da, API rota işleyicilerinizi yeniden kullanılabilir fonksiyonlarla sarmalayarak benzer işlevsellik elde edebilirsiniz. Bu, aşağıdaki gibi görevleri gerçekleştirmenize olanak tanır:

İşte basit bir kayıt tutma middleware'i nasıl oluşturulacağına dair bir örnek:

// utils/middleware.js
export function withLogging(handler) {
  return async function(req, res) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    return handler(req, res)
  }
}

Bu middleware'i kullanmak için, API rota işleyicinizi withLogging fonksiyonuyla sarmalamanız yeterlidir:

// pages/api/logged.js
import { withLogging } from '../../utils/middleware'

async function handler(req, res) {
  res.status(200).json({ message: 'Bu istek günlüğe kaydedildi' })
}

export default withLogging(handler)

Next.js API Rotaları Oluşturmak İçin En İyi Uygulamalar

Gelişmiş Teknikler

Arka Plan Görevleri

API yanıtını engellememesi gereken uzun süren görevler için arka plan görevleri kullanmayı düşünün. Arka plan görevlerinizi yönetmek ve bunları eşzamansız olarak işlemek için BullMQ veya Bree gibi kütüphaneler kullanabilirsiniz.

WebSockets

Gerçek zamanlı uygulamalar için Next.js API rotalarınızda WebSockets kullanabilirsiniz. Socket.IO ve ws gibi kütüphaneler, istemci ve sunucu arasında kalıcı bağlantılar kurmayı kolaylaştırır.

GraphQL

Veri çekmek için daha esnek ve verimli bir yola ihtiyacınız varsa, GraphQL kullanmayı düşünün. Next.js uygulamanızda bir GraphQL API uç noktası oluşturmak için Apollo Server veya Yoga gibi kütüphaneler kullanabilirsiniz.

Sonuç

Next.js API Rotaları, doğrudan Next.js uygulamanız içinde sunucusuz arka uçlar oluşturmak için güçlü ve kullanışlı bir yol sunar. Sunucusuz mimarinin avantajlarından yararlanarak geliştirmeyi basitleştirebilir, performansı artırabilir ve maliyetleri düşürebilirsiniz. İster basit bir iletişim formu ister karmaşık bir e-ticaret platformu oluşturuyor olun, Next.js API Rotaları kolaylıkla sağlam ve ölçeklenebilir bir arka uç oluşturmanıza yardımcı olabilir. Temel bilgileri sağlam bir şekilde anlayarak ve en iyi uygulamaları uygulayarak, verimli, güvenli ve küresel olarak erişilebilir uygulamalar oluşturmak için bu güçlü araçtan yararlanabilirsiniz.