M

MLOG

Eesti

Õppige, kuidas Next.js API marsruutide abil ehitada serverivabu taustasüsteeme otse oma Next.js rakenduses. Juhend katab kõik alates põhisätetest kuni täiustatud tehnikateni.

Next.js API marsruudid: taustasüsteemi lihtne ehitamine

Next.js on revolutsioneerinud esirakenduste arendust oma võimsate funktsioonide ja intuitiivse struktuuriga. Aga kas teadsite, et see võib oluliselt lihtsustada ka taustasüsteemi arendust? Next.js API marsruudid võimaldavad teil luua serverivabu API lõpp-punkte otse oma Next.js rakenduses, kaotades paljudel juhtudel vajaduse eraldi taustaserveri järele. See põhjalik juhend juhatab teid läbi protsessi, kuidas ehitada robustset ja skaleeruvat taustasüsteemi kasutades Next.js API marsruute.

Mis on Next.js API marsruudid?

API marsruudid on serverivabad funktsioonid, mille loote oma /pages/api kausta oma Next.js projektis. Need funktsioonid käsitlevad sissetulevaid HTTP päringuid ja tagastavad vastuseid, täpselt nagu traditsiooniline taustasüsteemi API. Peamine erinevus seisneb selles, et need on paigaldatud serverivabade funktsioonidena, mis tähendab, et te ei pea haldama servereid ega infrastruktuuri.

Mõelge neist kui kergetest, nõudmisel põhinevatest taustasüsteemi funktsioonidest, mis on sujuvalt integreeritud teie Next.js esirakendusega.

Next.js API marsruutide kasutamise eelised

Alustamine Next.js API marsruutidega

Loome lihtsa API marsruudi, mis tagastab JSON-vastuse. Esmalt veenduge, et teil on Next.js projekt seadistatud. Kui ei, looge see kasutades:

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

Nüüd looge fail nimega hello.js kausta /pages/api:

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

See kood defineerib lihtsa API marsruudi, mis vastab JSON-objektiga, mis sisaldab nime "John Doe". Selle API marsruudi kasutamiseks käivitage oma Next.js arendusserver:

npm run dev

Seejärel avage oma brauser ja navigeerige aadressile http://localhost:3000/api/hello. Peaksite nägema järgmist JSON-vastust:

{"name": "John Doe"}

API marsruudi käsitleja mõistmine

handler-funktsioon teie API marsruudis saab kaks argumenti:

Saate neid objekte kasutada erinevat tüüpi päringute käsitlemiseks, andmete lugemiseks päringu kehast, vastuse päiste määramiseks ja erinevat tüüpi vastuste saatmiseks.

Erinevate HTTP meetodite käsitlemine

Saate kasutada req.method omadust, et määrata sissetuleva päringu HTTP meetod ja käsitleda erinevaid meetodeid vastavalt. Näiteks:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Käsitle GET päringut
    res.status(200).json({ message: 'This is a GET request' })
  } else if (req.method === 'POST') {
    // Käsitle POST päringut
    res.status(200).json({ message: 'This is a POST request' })
  } else {
    // Käsitle teisi meetodeid
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

Selles näites käsitleb API marsruut nii GET kui ka POST päringuid. Kui päringu meetod on GET, vastab see JSON-objektiga, mis sisaldab teadet "This is a GET request". Kui päringu meetod on POST, vastab see JSON-objektiga, mis sisaldab teadet "This is a POST request". Kui päringu meetod on midagi muud, vastab see 405 Method Not Allowed veaga.

Andmete lugemine päringu kehast

POST, PUT ja PATCH päringute puhul peate sageli lugema andmeid päringu kehast. Next.js pakub sisseehitatud tuge JSON- ja URL-kodeeritud päringukehade parsimiseks. JSON-päringu keha parsimiseks saate kasutada req.body omadust. Näiteks:

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

    // Töötle andmeid
    console.log('Name:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Data received successfully' })
  } else {
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

Selle API marsruudi testimiseks saate kasutada tööriista nagu Postman või curl, et saata POST-päring JSON-kehaga:

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

Vastuse päiste määramine

Saate kasutada res.setHeader() meetodit vastuse päiste määramiseks. See on kasulik sisu tüübi, vahemälu kontrolli ja muu olulise teabe seadistamiseks. Näiteks:

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

Selles näites määrab API marsruut Content-Type päise väärtuseks application/json, mis näitab, et vastus on JSON-objekt. Samuti seab see Cache-Control päise väärtuseks s-maxage=3600, mis käsib brauseril ja CDN-il vastust vahemällu salvestada kuni 1 tunniks.

Vigade käsitlemine

On oluline oma API marsruutides vigu sujuvalt käsitleda. Saate kasutada try-catch plokke erandite püüdmiseks ja kliendile asjakohaste veateadete saatmiseks. Näiteks:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simuleeri viga
    throw new Error('Something went wrong')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internal Server Error' })
  }
}

Selles näites simuleerib API marsruut viga, visates uue Error objekti. Catch-plokk püüab vea kinni, logib selle konsooli ja saadab kliendile 500 Internal Server Error vastuse. Kaaluge tootmiskeskkondades robustse logimissüsteemi, nagu Sentry või Datadog, kasutamist.

Andmebaasiga ühendumine

Üks levinumaid kasutusjuhtumeid API marsruutide jaoks on andmebaasiga ühendumine. Next.js API marsruudid integreeruvad sujuvalt erinevate andmebaasidega, sealhulgas:

Siin on näide, kuidas ühenduda MongoDB andmebaasiga Next.js API marsruudis:

// 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('Please add your Mongo URI to .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // Arendusrežiimis kasutage globaalset muutujat, et väärtus
  // säiliks moodulite taaslaadimisel, mille on põhjustanud HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // Tootmisrežiimis on parem mitte kasutada globaalset muutujat.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Eksportige mooduli ulatusega MongoClient'i lubadus. Tehes seda
// eraldi moodulis, saab klienti ohutult taaskasutada mitme
// funktsiooni vahel.  Vaata: 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: 'Failed to fetch users' })
  }
}

Enne selle koodi käivitamist veenduge, et teil on mongodb pakett installitud:

npm install mongodb

Samuti peate määrama keskkonnamuutujad MONGODB_URI ja MONGODB_DB. Need muutujad tuleks defineerida teie .env.local failis (või teie hostingu pakkuja keskkonnamuutujate seadetes tootmises). MONGODB_URI sisaldab ühenduse stringi teie MongoDB andmebaasiga ja MONGODB_DB määrab andmebaasi nime.

Autentimine ja autoriseerimine

Oma API marsruutide kaitsmine on turvalisuse seisukohalt ülioluline. Next.js API marsruute saab turvata, kasutades erinevaid autentimis- ja autoriseerimistehnikaid, sealhulgas:

Siin on näide, kuidas kaitsta API marsruuti JWT autentimisega:

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

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded" objekt sisaldab tokenisse põimitud kasutajateavet
    // Näiteks: const userId = decoded.userId;

    // Jätka päringu töötlemist
    res.status(200).json({ message: 'Protected resource accessed successfully' })
  } catch (error) {
    return res.status(401).json({ message: 'Invalid token' })
  }
}

Enne selle koodi käivitamist veenduge, et teil on jsonwebtoken pakett installitud:

npm install jsonwebtoken

Samuti peate määrama keskkonnamuutuja JWT_SECRET. See peaks olema tugev, juhuslikult genereeritud salajane võti, mida kasutatakse JWT-de allkirjastamiseks ja kontrollimiseks. Hoidke seda turvaliselt ja ärge kunagi avalikustage seda oma kliendipoolses koodis.

Vahevara

Kuigi Next.js ei paku traditsioonilist vahevara API marsruutidele samamoodi nagu Express.js, saate sarnase funktsionaalsuse saavutada, mähkides oma API marsruudi käsitlejad taaskasutatavate funktsioonidega. See võimaldab teil teha toiminguid nagu:

Siin on näide, kuidas luua lihtsat logimise vahevara:

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

Selle vahevara kasutamiseks mähkige lihtsalt oma API marsruudi käsitleja withLogging funktsiooniga:

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

async function handler(req, res) {
  res.status(200).json({ message: 'This request was logged' })
}

export default withLogging(handler)

Parimad praktikad Next.js API marsruutide ehitamiseks

Täiustatud tehnikad

Taustatööd

Pikaajaliste ülesannete jaoks, mis ei tohiks API vastust blokeerida, kaaluge taustatööde kasutamist. Saate oma taustatööde haldamiseks ja nende asünkroonseks töötlemiseks kasutada teeke nagu BullMQ või Bree.

WebSockets

Reaalajas rakenduste jaoks saate kasutada WebSockets'i oma Next.js API marsruutides. Teegid nagu Socket.IO ja ws muudavad püsivate ühenduste loomise kliendi ja serveri vahel lihtsaks.

GraphQL

Kui vajate andmete hankimiseks paindlikumat ja tõhusamat viisi, kaaluge GraphQL-i kasutamist. Saate kasutada teeke nagu Apollo Server või Yoga, et luua oma Next.js rakenduses GraphQL API lõpp-punkt.

Kokkuvõte

Next.js API marsruudid pakuvad võimsat ja mugavat viisi serverivabade taustasüsteemide ehitamiseks otse oma Next.js rakenduses. Kasutades serverivaba arhitektuuri eeliseid, saate lihtsustada arendust, parandada jõudlust ja vähendada kulusid. Ükskõik, kas ehitate lihtsat kontaktivormi või keerukat e-kaubanduse platvormi, aitavad Next.js API marsruudid teil luua robustse ja skaleeruva taustasüsteemi kergusega. Põhjalike teadmiste ja parimate praktikate rakendamisega saate seda võimsat tööriista kasutada tõhusate, turvaliste ja globaalselt kättesaadavate rakenduste loomiseks.