M

MLOG

Latviešu

Uzziniet, kā izmantot Next.js API maršrutus, lai veidotu bezservera aizmugursistēmas tieši Jūsu Next.js lietotnē. Šī rokasgrāmata aptver visu, sākot no pamata iestatīšanas līdz progresīvām tehnikām.

Next.js API maršruti: viegla Jūsu aizmugursistēmas izveide

Next.js ir radījis revolūciju priekšgalsistēmas izstrādē ar savām jaudīgajām funkcijām un intuitīvo struktūru. Bet vai zinājāt, ka tas var arī būtiski vienkāršot aizmugursistēmas izstrādi? Next.js API maršruti ļauj jums izveidot bezservera API galapunktus tieši Jūsu Next.js lietotnē, daudzos gadījumos novēršot nepieciešamību pēc atsevišķa aizmugursistēmas servera. Šī visaptverošā rokasgrāmata Jūs soli pa solim vedīs cauri procesam, kā izveidot robustu un mērogojamu aizmugursistēmu, izmantojot Next.js API maršrutus.

Kas ir Next.js API maršruti?

API maršruti ir bezservera funkcijas, kuras Jūs izveidojat savā Next.js projektā direktorijā /pages/api. Šīs funkcijas apstrādā ienākošos HTTP pieprasījumus un atgriež atbildes, gluži kā tradicionāls aizmugursistēmas API. Galvenā atšķirība ir tā, ka tie tiek izvietoti kā bezservera funkcijas, kas nozīmē, ka Jums nav jāpārvalda serveri vai infrastruktūra.

Uztveriet tos kā vieglas, pēc pieprasījuma aizmugursistēmas funkcijas, kas ir nevainojami integrētas ar Jūsu Next.js priekšgalsistēmu.

Next.js API maršrutu izmantošanas priekšrocības

Darba sākšana ar Next.js API maršrutiem

Izveidosim vienkāršu API maršrutu, kas atgriež JSON atbildi. Vispirms pārliecinieties, ka Jums ir izveidots Next.js projekts. Ja nē, izveidojiet to, izmantojot:

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

Tagad izveidojiet failu ar nosaukumu hello.js direktorijā /pages/api:

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

Šis kods definē vienkāršu API maršrutu, kas atbild ar JSON objektu, kurā ir vārds "John Doe". Lai piekļūtu šim API maršrutam, palaidiet savu Next.js izstrādes serveri:

npm run dev

Pēc tam atveriet pārlūkprogrammu un dodieties uz http://localhost:3000/api/hello. Jums vajadzētu redzēt šādu JSON atbildi:

{"name": "John Doe"}

API maršruta apstrādātāja (handler) izpratne

handler funkcija Jūsu API maršrutā saņem divus argumentus:

Jūs varat izmantot šos objektus, lai apstrādātu dažāda veida pieprasījumus, lasītu datus no pieprasījuma ķermeņa, iestatītu atbildes galvenes un nosūtītu dažāda veida atbildes.

Dažādu HTTP metožu apstrāde

Jūs varat izmantot req.method īpašību, lai noteiktu ienākošā pieprasījuma HTTP metodi un attiecīgi apstrādātu dažādas metodes. Piemēram:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Apstrādāt GET pieprasījumu
    res.status(200).json({ message: 'Šis ir GET pieprasījums' })
  } else if (req.method === 'POST') {
    // Apstrādāt POST pieprasījumu
    res.status(200).json({ message: 'Šis ir POST pieprasījums' })
  } else {
    // Apstrādāt citas metodes
    res.status(405).json({ message: 'Metode nav atļauta' })
  }
}

Šajā piemērā API maršruts apstrādā gan GET, gan POST pieprasījumus. Ja pieprasījuma metode ir GET, tas atbild ar JSON objektu, kas satur ziņojumu "Šis ir GET pieprasījums". Ja pieprasījuma metode ir POST, tas atbild ar JSON objektu, kas satur ziņojumu "Šis ir POST pieprasījums". Ja pieprasījuma metode ir jebkura cita, tas atbild ar 405 Metode nav atļauta kļūdu.

Datu nolasīšana no pieprasījuma ķermeņa

POST, PUT un PATCH pieprasījumiem bieži ir nepieciešams nolasīt datus no pieprasījuma ķermeņa. Next.js nodrošina iebūvētu atbalstu JSON un URL kodētu pieprasījumu ķermeņu parsēšanai. Lai parsētu JSON pieprasījuma ķermeni, varat izmantot req.body īpašību. Piemēram:

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

    // Apstrādāt datus
    console.log('Name:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Dati veiksmīgi saņemti' })
  } else {
    res.status(405).json({ message: 'Metode nav atļauta' })
  }
}

Lai pārbaudītu šo API maršrutu, varat izmantot rīku, piemēram, Postman vai curl, lai nosūtītu POST pieprasījumu ar JSON ķermeni:

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

Atbildes galveņu iestatīšana

Jūs varat izmantot metodi res.setHeader(), lai iestatītu atbildes galvenes. Tas ir noderīgi, lai iestatītu satura veidu, kešatmiņas kontroli un citu svarīgu informāciju. Piemēram:

// 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: 'Hello, world!' })
}

Šajā piemērā API maršruts iestata Content-Type galveni uz application/json, norādot, ka atbilde ir JSON objekts. Tas arī iestata Cache-Control galveni uz s-maxage=3600, kas pārlūkprogrammai un CDN norāda kešot atbildi līdz pat 1 stundai.

Kļūdu apstrāde

Ir svarīgi korekti apstrādāt kļūdas Jūsu API maršrutos. Jūs varat izmantot try-catch blokus, lai notvertu izņēmumus un nosūtītu klientam atbilstošas kļūdu atbildes. Piemēram:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simulēt kļūdu
    throw new Error('Kaut kas nogāja greizi')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Iekšējā servera kļūda' })
  }
}

Šajā piemērā API maršruts simulē kļūdu, izmetot jaunu Error objektu. Catch bloks notver kļūdu, reģistrē to konsolē un nosūta klientam 500 Iekšējā servera kļūdas atbildi. Ražošanas vidēm apsveriet iespēju izmantot robustu reģistrēšanas sistēmu, piemēram, Sentry vai Datadog.

Savienojuma izveide ar datubāzi

Viens no visbiežāk sastopamajiem API maršrutu pielietojumiem ir savienojuma izveide ar datubāzi. Next.js API maršruti nevainojami integrējas ar dažādām datubāzēm, tostarp:

Šeit ir piemērs, kā izveidot savienojumu ar MongoDB datubāzi Next.js API maršrutā:

// 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ūdzu, pievienojiet savu Mongo URI failam .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // Izstrādes režīmā izmantojiet globālu mainīgo, lai vērtība
  // tiktu saglabāta starp moduļu pārlādēm, ko izraisa HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // Ražošanas režīmā labāk neizmantot globālu mainīgo.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Eksportējiet moduļa līmeņa MongoClient solījumu. To darot
// atsevišķā modulī, klientu var droši atkārtoti izmantot vairākās
// funkcijās. Skatīt: 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: 'Neizdevās ielādēt lietotājus' })
  }
}

Pirms šī koda palaišanas pārliecinieties, ka Jums ir instalēta mongodb pakotne:

npm install mongodb

Jums ir arī jāiestata MONGODB_URI un MONGODB_DB vides mainīgie. Šiem mainīgajiem jābūt definētiem Jūsu .env.local failā (vai Jūsu mitināšanas pakalpojumu sniedzēja vides mainīgo iestatījumos ražošanas videi). MONGODB_URI satur savienojuma virkni ar Jūsu MongoDB datubāzi, un MONGODB_DB norāda datubāzes nosaukumu.

Autentifikācija un autorizācija

Jūsu API maršrutu aizsardzība ir būtiska drošībai. Next.js API maršrutus var aizsargāt, izmantojot dažādas autentifikācijas un autorizācijas metodes, tostarp:

Šeit ir piemērs, kā aizsargāt API maršrutu, izmantojot JWT autentifikāciju:

// 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: 'Neautorizēts' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded" objekts satur lietotāja informāciju, kas iestrādāta marķierī
    // Piemēram: const userId = decoded.userId;

    // Turpināt pieprasījuma apstrādi
    res.status(200).json({ message: 'Aizsargātais resurss veiksmīgi sasniegts' })
  } catch (error) {
    return res.status(401).json({ message: 'Nederīgs marķieris' })
  }
}

Pirms šī koda palaišanas pārliecinieties, ka Jums ir instalēta jsonwebtoken pakotne:

npm install jsonwebtoken

Jums ir arī jāiestata JWT_SECRET vides mainīgais. Tai jābūt spēcīgai, nejauši ģenerētai slepenajai atslēgai, kas tiek izmantota JWT parakstīšanai un pārbaudei. Glabājiet to droši un nekad neatklājiet to savā klienta puses kodā.

Starpprogrammatūra (Middleware)

Lai gan Next.js nepiedāvā tradicionālu starpprogrammatūru API maršrutiem tādā pašā veidā kā Express.js, Jūs varat sasniegt līdzīgu funkcionalitāti, ietinot savus API maršrutu apstrādātājus atkārtoti lietojamās funkcijās. Tas ļauj veikt tādus uzdevumus kā:

Šeit ir piemērs, kā izveidot vienkāršu reģistrēšanas starpprogrammatūru:

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

Lai izmantotu šo starpprogrammatūru, vienkārši ietiniet savu API maršruta apstrādātāju ar withLogging funkciju:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Šis pieprasījums tika reģistrēts' })
}

export default withLogging(handler)

Labākās prakses Next.js API maršrutu izveidē

Progresīvas tehnikas

Fona darbi

Ilgstošiem uzdevumiem, kuriem nevajadzētu bloķēt API atbildi, apsveriet fona darbu izmantošanu. Jūs varat izmantot bibliotēkas, piemēram, BullMQ vai Bree, lai pārvaldītu savus fona darbus un apstrādātu tos asinhroni.

WebSockets

Reāllaika lietojumprogrammām Jūs varat izmantot WebSockets savos Next.js API maršrutos. Bibliotēkas, piemēram, Socket.IO un ws, atvieglo pastāvīgu savienojumu izveidi starp klientu un serveri.

GraphQL

Ja Jums nepieciešams elastīgāks un efektīvāks veids datu iegūšanai, apsveriet GraphQL izmantošanu. Jūs varat izmantot bibliotēkas, piemēram, Apollo Server vai Yoga, lai izveidotu GraphQL API galapunktu savā Next.js lietojumprogrammā.

Noslēgums

Next.js API maršruti nodrošina jaudīgu un ērtu veidu, kā veidot bezservera aizmugursistēmas tieši Jūsu Next.js lietojumprogrammā. Izmantojot bezservera arhitektūras priekšrocības, Jūs varat vienkāršot izstrādi, uzlabot veiktspēju un samazināt izmaksas. Neatkarīgi no tā, vai veidojat vienkāršu saziņas formu vai sarežģītu e-komercijas platformu, Next.js API maršruti var palīdzēt Jums viegli izveidot robustu un mērogojamu aizmugursistēmu. Ar stabilu pamatu izpratni un labāko prakšu pielietošanu Jūs varat izmantot šo jaudīgo rīku, lai radītu efektīvas, drošas un globāli pieejamas lietojumprogrammas.