M

MLOG

O'zbek

Next.js API marshrutlari yordamida to'g'ridan-to'g'ri Next.js ilovangiz ichida serverless bekendlarni qurishni o'rganing. Bu qo'llanma sodda sozlashdan tortib autentifikatsiya va ma'lumotlarni saqlashgacha bo'lgan hamma narsani qamrab oladi.

Next.js API marshrutlari: Bekendingizni osonlik bilan qurish

Next.js o'zining kuchli xususiyatlari va intuitiv tuzilishi bilan front-end ishlab chiqishda inqilob qildi. Ammo uning backend ishlab chiqishni ham sezilarli darajada soddalashtirishi mumkinligini bilasizmi? Next.js API marshrutlari sizga to'g'ridan-to'g'ri Next.js ilovangiz ichida serverless API endpointlarini yaratish imkonini beradi, bu esa ko'p hollarda alohida backend serveriga bo'lgan ehtiyojni yo'qotadi. Ushbu keng qamrovli qo'llanma sizga Next.js API marshrutlaridan foydalangan holda mustahkam va kengaytiriladigan backend qurish jarayonini ko'rsatib beradi.

Next.js API marshrutlari nima?

API marshrutlari bu sizning Next.js loyihangizdagi /pages/api katalogida yaratadigan serverless funksiyalardir. Bu funksiyalar an'anaviy backend API kabi kiruvchi HTTP so'rovlariga ishlov beradi va javob qaytaradi. Asosiy farq shundaki, ular serverless funksiyalar sifatida joylashtiriladi, ya'ni serverlar yoki infratuzilmani boshqarishingiz shart emas.

Ularni Next.js front-endingiz bilan uzluksiz integratsiyalashgan yengil, talab bo'yicha ishlaydigan backend funksiyalari deb o'ylang.

Next.js API marshrutlaridan foydalanishning afzalliklari

Next.js API marshrutlari bilan ishlashni boshlash

Keling, JSON javobini qaytaradigan oddiy API marshrutini yarataylik. Avvalo, sizda Next.js loyihasi sozlanga ishonch hosil qiling. Agar yo'q bo'lsa, quyidagi buyruq yordamida yarating:

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

Endi, /pages/api katalogi ichida hello.js nomli fayl yarating:

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

Bu kod "John Doe" ismini o'z ichiga olgan JSON ob'ekti bilan javob beradigan oddiy API marshrutini belgilaydi. Ushbu API marshrutiga kirish uchun Next.js ishlab chiqish serveringizni ishga tushiring:

npm run dev

Keyin, brauzeringizni oching va http://localhost:3000/api/hello manziliga o'ting. Siz quyidagi JSON javobini ko'rishingiz kerak:

{"name": "John Doe"}

API marshrutining ishlov beruvchisini (handler) tushunish

API marshrutingizdagi handler funksiyasi ikkita argumentni qabul qiladi:

Siz bu ob'ektlardan turli xil so'rovlarga ishlov berish, so'rov tanasidan ma'lumotlarni o'qish, javob sarlavhalarini o'rnatish va turli xil javoblarni yuborish uchun foydalanishingiz mumkin.

Turli HTTP usullariga ishlov berish

Kiruvchi so'rovning HTTP usulini aniqlash va turli usullarga muvofiq ishlov berish uchun req.method xususiyatidan foydalanishingiz mumkin. Masalan:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // GET so'roviga ishlov berish
    res.status(200).json({ message: 'Bu GET so\'rovi' })
  } else if (req.method === 'POST') {
    // POST so'roviga ishlov berish
    res.status(200).json({ message: 'Bu POST so\'rovi' })
  } else {
    // Boshqa usullarga ishlov berish
    res.status(405).json({ message: 'Usulga ruxsat etilmagan' })
  }
}

Ushbu misolda API marshruti ham GET, ham POST so'rovlariga ishlov beradi. Agar so'rov usuli GET bo'lsa, u "Bu GET so'rovi" xabarini o'z ichiga olgan JSON ob'ekti bilan javob beradi. Agar so'rov usuli POST bo'lsa, u "Bu POST so'rovi" xabarini o'z ichiga olgan JSON ob'ekti bilan javob beradi. Agar so'rov usuli boshqa bo'lsa, u 405 Method Not Allowed xatosi bilan javob beradi.

So'rov tanasidan ma'lumotlarni o'qish

POST, PUT va PATCH so'rovlari uchun siz ko'pincha so'rov tanasidan ma'lumotlarni o'qishingiz kerak bo'ladi. Next.js JSON va URL-kodlangan so'rov tanalarini tahlil qilish uchun o'rnatilgan qo'llab-quvvatlashni taqdim etadi. JSON so'rov tanasini tahlil qilish uchun req.body xususiyatidan foydalanishingiz mumkin. Masalan:

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

    // Ma'lumotlarga ishlov berish
    console.log('Ism:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Ma\'lumotlar muvaffaqiyatli qabul qilindi' })
  } else {
    res.status(405).json({ message: 'Usulga ruxsat etilmagan' })
  }
}

Ushbu API marshrutini sinab ko'rish uchun Postman yoki curl kabi vosita yordamida JSON tanasi bilan POST so'rovini yuborishingiz mumkin:

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

Javob sarlavhalarini o'rnatish

Javob sarlavhalarini o'rnatish uchun res.setHeader() usulidan foydalanishingiz mumkin. Bu kontent turi, keshni boshqarish va boshqa muhim ma'lumotlarni o'rnatish uchun foydalidir. Masalan:

// 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: 'Salom, dunyo!' })
}

Ushbu misolda API marshruti Content-Type sarlavhasini application/json ga o'rnatadi, bu javobning JSON ob'ekti ekanligini bildiradi. Shuningdek, u Cache-Control sarlavhasini s-maxage=3600 ga o'rnatadi, bu brauzer va CDN ga javobni 1 soatgacha keshda saqlashni aytadi.

Xatoliklarga ishlov berish

API marshrutlaringizda xatoliklarga to'g'ri ishlov berish muhimdir. Istisnolarni ushlash va mijozga tegishli xato javoblarini yuborish uchun try-catch bloklaridan foydalanishingiz mumkin. Masalan:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Xatolikni simulyatsiya qilish
    throw new Error('Nimadir noto\'g\'ri ketdi')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Ichki server xatoligi' })
  }
}

Ushbu misolda API marshruti yangi Error ob'ektini tashlash orqali xatolikni simulyatsiya qiladi. Catch bloki xatoni ushlaydi, uni konsolga yozadi va mijozga 500 Ichki Server Xatoligi javobini yuboradi. Ishlab chiqarish muhitlari uchun Sentry yoki Datadog kabi mustahkam loglash tizimidan foydalanishni o'ylab ko'ring.

Ma'lumotlar bazasiga ulanish

API marshrutlari uchun eng keng tarqalgan foydalanish holatlaridan biri bu ma'lumotlar bazasiga ulanishdir. Next.js API marshrutlari turli ma'lumotlar bazalari bilan uzluksiz integratsiyalanadi, jumladan:

Quyida Next.js API marshrutida MongoDB ma'lumotlar bazasiga qanday ulanish mumkinligi haqida misol keltirilgan:

// 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('Iltimos, Mongo URI manzilingizni .env.local fayliga qo\'shing')
}

if (process.env.NODE_ENV === 'development') {
  // Ishlab chiqish rejimida, qiymat HMR (Hot Module Replacement) tufayli
  // modulni qayta yuklashlar davomida saqlanib qolishi uchun global o'zgaruvchidan foydalaning.
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // Ishlab chiqarish rejimida global o'zgaruvchidan foydalanmaslik yaxshiroq.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Modul doirasidagi MongoClient promisini eksport qilish. Buni alohida
// modulda bajarish orqali mijozni bir nechta funksiyalar bo'ylab xavfsiz 
// qayta ishlatish mumkin. Qarang: 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: 'Foydalanuvchilarni olishda xatolik yuz berdi' })
  }
}

Ushbu kodni ishga tushirishdan oldin, sizda mongodb paketi o'rnatilganiga ishonch hosil qiling:

npm install mongodb

Shuningdek, MONGODB_URI va MONGODB_DB muhit o'zgaruvchilarini o'rnatishingiz kerak. Bu o'zgaruvchilar sizning .env.local faylingizda (yoki ishlab chiqarish uchun xosting provayderingizning muhit o'zgaruvchilari sozlamalarida) aniqlanishi kerak. MONGODB_URI sizning MongoDB ma'lumotlar bazangizga ulanish satrini o'z ichiga oladi, va MONGODB_DB esa ma'lumotlar bazasi nomini belgilaydi.

Autentifikatsiya va Avtorizatsiya

API marshrutlaringizni himoya qilish xavfsizlik uchun juda muhimdir. Next.js API marshrutlari turli autentifikatsiya va avtorizatsiya usullari yordamida himoyalanishi mumkin, jumladan:

Quyida JWT autentifikatsiyasi yordamida API marshrutini qanday himoya qilish haqida misol keltirilgan:

// 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: 'Ruxsatsiz' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded" ob'ekti tokenga joylashtirilgan foydalanuvchi ma'lumotlarini o'z ichiga oladi
    // Masalan: const userId = decoded.userId;

    // So'rovni qayta ishlashni davom ettirish
    res.status(200).json({ message: 'Himoyalangan resursga muvaffaqiyatli kirildi' })
  } catch (error) {
    return res.status(401).json({ message: 'Yaroqsiz token' })
  }
}

Ushbu kodni ishga tushirishdan oldin, sizda jsonwebtoken paketi o'rnatilganiga ishonch hosil qiling:

npm install jsonwebtoken

Shuningdek, JWT_SECRET muhit o'zgaruvchisini o'rnatishingiz kerak. Bu JWT larni imzolash va tekshirish uchun ishlatiladigan kuchli, tasodifiy yaratilgan maxfiy kalit bo'lishi kerak. Buni xavfsiz saqlang va hech qachon mijoz tomonidagi kodingizda fosh qilmang.

Middleware

Next.js API marshrutlari uchun Express.js kabi an'anaviy middleware taklif qilmasa-da, siz API marshruti ishlov beruvchilarini qayta ishlatiladigan funksiyalar bilan o'rash orqali o'xshash funksionallikka erishishingiz mumkin. Bu sizga quyidagi vazifalarni bajarishga imkon beradi:

Quyida oddiy loglash middleware-ni qanday yaratish haqida misol keltirilgan:

// 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)
  }
}

Ushbu middleware-dan foydalanish uchun shunchaki API marshruti ishlov beruvchisini withLogging funksiyasi bilan o'rang:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Bu so\'rov loglandi' })
}

export default withLogging(handler)

Next.js API marshrutlarini qurish uchun eng yaxshi amaliyotlar

Ilg'or usullar

Fon vazifalari (Background Jobs)

API javobini bloklamasligi kerak bo'lgan uzoq davom etadigan vazifalar uchun fon vazifalaridan foydalanishni o'ylab ko'ring. Fon vazifalaringizni boshqarish va ularni asinxron ravishda qayta ishlash uchun BullMQ yoki Bree kabi kutubxonalardan foydalanishingiz mumkin.

WebSockets

Real vaqt rejimida ishlaydigan ilovalar uchun siz Next.js API marshrutlaringizda WebSockets-dan foydalanishingiz mumkin. Socket.IO va ws kabi kutubxonalar mijoz va server o'rtasida doimiy ulanishlarni o'rnatishni osonlashtiradi.

GraphQL

Agar sizga ma'lumotlarni olishning yanada moslashuvchan va samarali usuli kerak bo'lsa, GraphQL-dan foydalanishni o'ylab ko'ring. Next.js ilovangizda GraphQL API endpointini yaratish uchun Apollo Server yoki Yoga kabi kutubxonalardan foydalanishingiz mumkin.

Xulosa

Next.js API marshrutlari to'g'ridan-to'g'ri Next.js ilovangizda serverless bekendlarni qurish uchun kuchli va qulay usulni taqdim etadi. Serverless arxitekturaning afzalliklaridan foydalangan holda, siz ishlab chiqishni soddalashtirishingiz, unumdorlikni oshirishingiz va xarajatlarni kamaytirishingiz mumkin. Oddiy aloqa formasini yoki murakkab elektron tijorat platformasini quryapsizmi, Next.js API marshrutlari sizga osonlik bilan mustahkam va kengaytiriladigan backend yaratishga yordam beradi. Asoslarni puxta tushunish va eng yaxshi amaliyotlarni qo'llash orqali siz ushbu kuchli vositadan samarali, xavfsiz va global miqyosda foydalanish mumkin bo'lgan ilovalarni yaratish uchun foydalanishingiz mumkin.

Next.js API marshrutlari: Bekendingizni osonlik bilan qurish | MLOG