M

MLOG

Română

Învățați cum să folosiți Rutele API Next.js pentru a construi backend-uri serverless direct în aplicația dvs. Next.js. Acest ghid acoperă totul, de la configurarea de bază la tehnici avansate pentru gestionarea autentificării, persistenței datelor și multe altele.

Rute API Next.js: Construirea Backend-ului cu Ușurință

Next.js a revoluționat dezvoltarea front-end cu funcționalitățile sale puternice și structura intuitivă. Dar știați că poate simplifica semnificativ și dezvoltarea backend-ului? Rutele API Next.js vă permit să creați endpoint-uri API serverless direct în aplicația dvs. Next.js, eliminând în multe cazuri necesitatea unui server backend separat. Acest ghid cuprinzător vă va ghida prin procesul de construire a unui backend robust și scalabil folosind Rutele API Next.js.

Ce sunt Rutele API Next.js?

Rutele API sunt funcții serverless pe care le creați în directorul /pages/api din proiectul dvs. Next.js. Aceste funcții gestionează cererile HTTP primite și returnează răspunsuri, la fel ca un API backend tradițional. Diferența cheie este că sunt implementate ca funcții serverless, ceea ce înseamnă că nu trebuie să gestionați servere sau infrastructură.

Gândiți-vă la ele ca la funcții backend ușoare, la cerere, care sunt integrate perfect cu front-end-ul dvs. Next.js.

Beneficiile Utilizării Rutelor API Next.js

Primii Pași cu Rutele API Next.js

Să creăm o rută API simplă care returnează un răspuns JSON. Mai întâi, asigurați-vă că aveți un proiect Next.js configurat. Dacă nu, creați unul folosind:

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

Acum, creați un fișier numit hello.js în directorul /pages/api:

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

Acest cod definește o rută API simplă care răspunde cu un obiect JSON ce conține numele "John Doe". Pentru a accesa această rută API, porniți serverul de dezvoltare Next.js:

npm run dev

Apoi, deschideți browserul și navigați la http://localhost:3000/api/hello. Ar trebui să vedeți următorul răspuns JSON:

{"name": "John Doe"}

Înțelegerea Handler-ului Rutei API

Funcția handler din ruta dvs. API primește doi parametri:

Puteți folosi aceste obiecte pentru a gestiona diferite tipuri de cereri, a citi date din corpul cererii, a seta antete de răspuns și a trimite diferite tipuri de răspunsuri.

Gestionarea Diferitelor Metode HTTP

Puteți folosi proprietatea req.method pentru a determina metoda HTTP a cererii primite și a gestiona diferitele metode în consecință. De exemplu:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Gestionează cererea GET
    res.status(200).json({ message: 'Aceasta este o cerere GET' })
  } else if (req.method === 'POST') {
    // Gestionează cererea POST
    res.status(200).json({ message: 'Aceasta este o cerere POST' })
  } else {
    // Gestionează alte metode
    res.status(405).json({ message: 'Metodă Nepermisă' })
  }
}

În acest exemplu, ruta API gestionează atât cererile GET, cât și cele POST. Dacă metoda cererii este GET, răspunde cu un obiect JSON ce conține mesajul "Aceasta este o cerere GET". Dacă metoda cererii este POST, răspunde cu un obiect JSON ce conține mesajul "Aceasta este o cerere POST". Dacă metoda cererii este oricare alta, răspunde cu o eroare 405 Metodă Nepermisă.

Citirea Datelor din Corpul Cererii (Request Body)

Pentru cererile POST, PUT și PATCH, adesea trebuie să citiți date din corpul cererii. Next.js oferă suport integrat pentru parsarea corpurilor de cerere JSON și URL-encoded. Pentru a parsa un corp de cerere JSON, puteți folosi proprietatea req.body. De exemplu:

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

    // Procesează datele
    console.log('Nume:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Datele au fost primite cu succes' })
  } else {
    res.status(405).json({ message: 'Metodă Nepermisă' })
  }
}

Pentru a testa această rută API, puteți folosi un instrument precum Postman sau curl pentru a trimite o cerere POST cu un corp JSON:

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

Setarea Antetelor de Răspuns (Response Headers)

Puteți folosi metoda res.setHeader() pentru a seta antetele de răspuns. Acest lucru este util pentru a seta tipul de conținut, controlul cache-ului și alte informații importante. De exemplu:

// 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: 'Salut, lume!' })
}

În acest exemplu, ruta API setează antetul Content-Type la application/json, indicând că răspunsul este un obiect JSON. De asemenea, setează antetul Cache-Control la s-maxage=3600, care spune browserului și CDN-ului să pună în cache răspunsul pentru până la 1 oră.

Gestionarea Erorilor

Este important să gestionați erorile în mod corespunzător în rutele dvs. API. Puteți folosi blocuri try-catch pentru a prinde excepții și a trimite răspunsuri de eroare adecvate clientului. De exemplu:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simulează o eroare
    throw new Error('Ceva nu a funcționat corect')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Eroare Internă a Serverului' })
  }
}

În acest exemplu, ruta API simulează o eroare aruncând un nou obiect Error. Blocul catch prinde eroarea, o înregistrează în consolă și trimite un răspuns de eroare 500 Eroare Internă a Serverului către client. Luați în considerare utilizarea unui sistem de logging robust precum Sentry sau Datadog pentru mediile de producție.

Conectarea la o Bază de Date

Unul dintre cele mai comune cazuri de utilizare pentru rutele API este conectarea la o bază de date. Rutele API Next.js se integrează perfect cu diverse baze de date, inclusiv:

Iată un exemplu despre cum să vă conectați la o bază de date MongoDB într-o rută API Next.js:

// 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('Vă rugăm să adăugați URI-ul Mongo în .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // În modul de dezvoltare, folosiți o variabilă globală pentru ca valoarea
  // să fie păstrată între reîncărcările de module cauzate de HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // În modul de producție, este mai bine să nu folosiți o variabilă globală.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Exportați o promisiune MongoClient cu scop de modul. Făcând acest lucru într-un
// modul separat, clientul poate fi reutilizat în siguranță în mai multe
// funcții. Vedeți: 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: 'Eșec la preluarea utilizatorilor' })
  }
}

Înainte de a rula acest cod, asigurați-vă că aveți pachetul mongodb instalat:

npm install mongodb

De asemenea, trebuie să setați variabilele de mediu MONGODB_URI și MONGODB_DB. Aceste variabile ar trebui definite în fișierul dvs. .env.local (sau în setările variabilelor de mediu ale furnizorului dvs. de găzduire pentru producție). MONGODB_URI conține șirul de conexiune la baza dvs. de date MongoDB, iar MONGODB_DB specifică numele bazei de date.

Autentificare și Autorizare

Protejarea rutelor dvs. API este crucială pentru securitate. Rutele API Next.js pot fi securizate folosind diverse tehnici de autentificare și autorizare, inclusiv:

Iată un exemplu despre cum să protejați o rută API folosind autentificarea JWT:

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

  try {
    const decoded = jwt.verify(token, secret)
    // Obiectul "decoded" conține informațiile utilizatorului încorporate în token
    // De exemplu: const userId = decoded.userId;

    // Continuă procesarea cererii
    res.status(200).json({ message: 'Resursa protejată a fost accesată cu succes' })
  } catch (error) {
    return res.status(401).json({ message: 'Token invalid' })
  }
}

Înainte de a rula acest cod, asigurați-vă că aveți pachetul jsonwebtoken instalat:

npm install jsonwebtoken

De asemenea, trebuie să setați variabila de mediu JWT_SECRET. Aceasta ar trebui să fie o cheie secretă puternică, generată aleatoriu, care este utilizată pentru a semna și verifica JWT-urile. Stocați-o în siguranță și nu o expuneți niciodată în codul dvs. client-side.

Middleware

Deși Next.js nu oferă middleware tradițional pentru rutele API în același mod ca Express.js, puteți obține o funcționalitate similară prin împachetarea handler-elor de rute API cu funcții reutilizabile. Acest lucru vă permite să efectuați sarcini precum:

Iată un exemplu despre cum să creați un middleware simplu de logging:

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

Pentru a utiliza acest middleware, pur și simplu împachetați handler-ul rutei API cu funcția withLogging:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Această cerere a fost înregistrată' })
}

export default withLogging(handler)

Cele Mai Bune Practici pentru Construirea Rutelor API Next.js

Tehnici Avansate

Joburi în Fundal (Background Jobs)

Pentru sarcinile de lungă durată care nu ar trebui să blocheze răspunsul API, luați în considerare utilizarea joburilor în fundal. Puteți folosi biblioteci precum BullMQ sau Bree pentru a gestiona joburile în fundal și a le procesa asincron.

WebSockets

Pentru aplicații în timp real, puteți folosi WebSockets în rutele dvs. API Next.js. Biblioteci precum Socket.IO și ws facilitează stabilirea de conexiuni persistente între client și server.

GraphQL

Dacă aveți nevoie de o modalitate mai flexibilă și eficientă de a prelua date, luați în considerare utilizarea GraphQL. Puteți folosi biblioteci precum Apollo Server sau Yoga pentru a crea un endpoint API GraphQL în aplicația dvs. Next.js.

Concluzie

Rutele API Next.js oferă o modalitate puternică și convenabilă de a construi backend-uri serverless direct în aplicația dvs. Next.js. Prin valorificarea beneficiilor arhitecturii serverless, puteți simplifica dezvoltarea, îmbunătăți performanța și reduce costurile. Fie că construiți un simplu formular de contact sau o platformă complexă de e-commerce, Rutele API Next.js vă pot ajuta să creați un backend robust și scalabil cu ușurință. Cu o înțelegere solidă a fundamentelor și aplicarea celor mai bune practici, puteți valorifica acest instrument puternic pentru a crea aplicații eficiente, sigure și accesibile la nivel global.