M

MLOG

Magyar

Tanulja meg, hogyan használhatja a Next.js API útvonalakat szervermentes backendek építésére közvetlenül a Next.js alkalmazásában. Ez az útmutató mindent lefed az alapbeállításoktól a haladó technikákig.

Next.js API útvonalak: Backend építés könnyedén

A Next.js forradalmasította a front-end fejlesztést erőteljes funkcióival és intuitív felépítésével. De tudta, hogy a backend fejlesztést is jelentősen leegyszerűsítheti? A Next.js API útvonalak lehetővé teszik szervermentes API végpontok létrehozását közvetlenül a Next.js alkalmazáson belül, így sok esetben feleslegessé válik egy különálló backend szerver. Ez az átfogó útmutató végigvezeti Önt egy robusztus és skálázható backend felépítésének folyamatán a Next.js API útvonalak segítségével.

Mik azok a Next.js API útvonalak?

Az API útvonalak szervermentes függvények, amelyeket a /pages/api könyvtárban hozhat létre a Next.js projektjében. Ezek a függvények kezelik a bejövő HTTP kéréseket és válaszokat adnak vissza, akárcsak egy hagyományos backend API. A kulcsfontosságú különbség az, hogy szervermentes függvényként kerülnek telepítésre, ami azt jelenti, hogy nem kell szervereket vagy infrastruktúrát menedzselnie.

Gondoljon rájuk úgy, mint könnyűsúlyú, igény szerint elérhető backend függvényekre, amelyek zökkenőmentesen integrálódnak a Next.js front-endjével.

A Next.js API útvonalak használatának előnyei

Első lépések a Next.js API útvonalakkal

Hozzuk létre egy egyszerű API útvonalat, amely egy JSON választ ad vissza. Először győződjön meg róla, hogy van egy beállított Next.js projektje. Ha nincs, hozzon létre egyet a következő paranccsal:

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

Most hozzon létre egy hello.js nevű fájlt a /pages/api könyvtárban:

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

Ez a kód egy egyszerű API útvonalat definiál, amely egy "John Doe" nevet tartalmazó JSON objektummal válaszol. Az API útvonal eléréséhez indítsa el a Next.js fejlesztői szervert:

npm run dev

Ezután nyissa meg a böngészőjét, és navigáljon a http://localhost:3000/api/hello címre. A következő JSON választ kell látnia:

{"name": "John Doe"}

Az API útvonal kezelőjének (handler) megértése

Az API útvonalában lévő handler függvény két argumentumot kap:

Ezeket az objektumokat használhatja a különböző típusú kérések kezelésére, adatok olvasására a kérés törzséből, válaszfejlécek beállítására és különböző típusú válaszok küldésére.

Különböző HTTP metódusok kezelése

A req.method tulajdonság segítségével meghatározhatja a bejövő kérés HTTP metódusát, és ennek megfelelően kezelheti a különböző metódusokat. Például:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // GET kérés kezelése
    res.status(200).json({ message: 'Ez egy GET kérés' })
  } else if (req.method === 'POST') {
    // POST kérés kezelése
    res.status(200).json({ message: 'Ez egy POST kérés' })
  } else {
    // Más metódusok kezelése
    res.status(405).json({ message: 'A metódus nem engedélyezett' })
  }
}

Ebben a példában az API útvonal kezeli a GET és a POST kéréseket is. Ha a kérés metódusa GET, akkor egy JSON objektummal válaszol, amely az "Ez egy GET kérés" üzenetet tartalmazza. Ha a kérés metódusa POST, akkor egy JSON objektummal válaszol, amely az "Ez egy POST kérés" üzenetet tartalmazza. Ha a kérés metódusa bármi más, akkor egy 405-ös „Method Not Allowed” hibával válaszol.

Adatok olvasása a kérés törzséből

POST, PUT és PATCH kérések esetén gyakran kell adatokat olvasni a kérés törzséből. A Next.js beépített támogatást nyújt a JSON és URL-kódolt kéréstörzsek feldolgozásához. Egy JSON kéréstörzs feldolgozásához használhatja a req.body tulajdonságot. Például:

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

    // Az adatok feldolgozása
    console.log('Név:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Adatok sikeresen fogadva' })
  } else {
    res.status(405).json({ message: 'A metódus nem engedélyezett' })
  }
}

Az API útvonal teszteléséhez használhat egy olyan eszközt, mint a Postman vagy a curl, hogy POST kérést küldjön egy JSON törzzsel:

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

Válaszfejlécek beállítása

A res.setHeader() metódussal állíthat be válaszfejléceket. Ez hasznos a tartalomtípus, a gyorsítótár-vezérlés és más fontos információk beállításához. Például:

// 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: 'Helló, világ!' })
}

Ebben a példában az API útvonal a Content-Type fejlécet application/json-re állítja, jelezve, hogy a válasz egy JSON objektum. Beállítja továbbá a Cache-Control fejlécet s-maxage=3600-ra, ami azt jelzi a böngészőnek és a CDN-nek, hogy a választ legfeljebb 1 órán át gyorsítótárazzák.

Hibakezelés

Fontos, hogy az API útvonalakon elegánsan kezelje a hibákat. Használhat try-catch blokkokat a kivételek elkapására és a megfelelő hibaválaszok küldésére a kliensnek. Például:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Hiba szimulálása
    throw new Error('Valami hiba történt')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Belső szerverhiba' })
  }
}

Ebben a példában az API útvonal hibát szimulál egy új Error objektum dobásával. A catch blokk elkapja a hibát, naplózza a konzolra, és egy 500-as „Internal Server Error” választ küld a kliensnek. Fontolja meg egy robusztus naplózási rendszer, mint a Sentry vagy a Datadog használatát éles környezetben.

Csatlakozás adatbázishoz

Az API útvonalak egyik leggyakoribb felhasználási esete az adatbázishoz való csatlakozás. A Next.js API útvonalak zökkenőmentesen integrálódnak különböző adatbázisokkal, többek között:

Íme egy példa arra, hogyan csatlakozhat egy MongoDB adatbázishoz egy Next.js API útvonalon:

// 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('Kérjük, adja hozzá a Mongo URI-t a .env.local fájlhoz')
}

if (process.env.NODE_ENV === 'development') {
  // Fejlesztői módban használjunk egy globális változót, hogy az érték
  // megmaradjon a HMR (Hot Module Replacement) által okozott modul újratöltések során.
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // Éles környezetben jobb, ha nem használunk globális változót.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Exportáljunk egy modul hatókörű MongoClient promise-t. Ezzel a módszerrel egy
// külön modulban a kliens biztonságosan újrahasználható több függvényen
// keresztül. Lásd: 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: 'Nem sikerült lekérni a felhasználókat' })
  }
}

A kód futtatása előtt győződjön meg róla, hogy telepítve van a mongodb csomag:

npm install mongodb

Be kell állítania a MONGODB_URI és MONGODB_DB környezeti változókat is. Ezeket a változókat a .env.local fájlban (vagy éles környezetben a hosztingszolgáltató környezeti változó beállításaiban) kell definiálni. A MONGODB_URI a MongoDB adatbázis kapcsolati karakterláncát tartalmazza, a MONGODB_DB pedig az adatbázis nevét adja meg.

Hitelesítés és jogosultságkezelés

Az API útvonalak védelme kulcsfontosságú a biztonság szempontjából. A Next.js API útvonalak különböző hitelesítési és jogosultságkezelési technikákkal védhetők, többek között:

Íme egy példa egy API útvonal JWT hitelesítéssel való védelmére:

// 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: 'Jogosulatlan hozzáférés' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // A "decoded" objektum tartalmazza a tokenbe ágyazott felhasználói információkat
    // Például: const userId = decoded.userId;

    // A kérés feldolgozásának folytatása
    res.status(200).json({ message: 'Védett erőforrás sikeresen elérve' })
  } catch (error) {
    return res.status(401).json({ message: 'Érvénytelen token' })
  }
}

A kód futtatása előtt győződjön meg róla, hogy telepítve van a jsonwebtoken csomag:

npm install jsonwebtoken

Be kell állítania a JWT_SECRET környezeti változót is. Ennek egy erős, véletlenszerűen generált titkos kulcsnak kell lennie, amelyet a JWT-k aláírására és ellenőrzésére használnak. Tárolja ezt biztonságosan, és soha ne tegye közzé a kliensoldali kódban.

Middleware

Bár a Next.js nem kínál hagyományos middleware-t az API útvonalakhoz az Express.js-hez hasonló módon, hasonló funkcionalitást érhet el az API útvonal kezelőinek újrafelhasználható függvényekbe csomagolásával. Ez lehetővé teszi olyan feladatok elvégzését, mint például:

Íme egy példa egy egyszerű naplózó middleware létrehozására:

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

A middleware használatához egyszerűen csomagolja be az API útvonal kezelőjét a withLogging függvénnyel:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Ez a kérés naplózva lett' })
}

export default withLogging(handler)

Bevált gyakorlatok a Next.js API útvonalak építéséhez

Haladó technikák

Háttérfeladatok

Hosszú ideig futó feladatokhoz, amelyek nem blokkolhatják az API választ, fontolja meg a háttérfeladatok használatát. Használhat olyan könyvtárakat, mint a BullMQ vagy a Bree a háttérfeladatok kezelésére és aszinkron feldolgozására.

WebSockets

Valós idejű alkalmazásokhoz használhat WebSockets-et a Next.js API útvonalain. Az olyan könyvtárak, mint a Socket.IO és a ws, megkönnyítik az állandó kapcsolatok létrehozását a kliens és a szerver között.

GraphQL

Ha rugalmasabb és hatékonyabb módszerre van szüksége az adatok lekéréséhez, fontolja meg a GraphQL használatát. Olyan könyvtárakat használhat, mint az Apollo Server vagy a Yoga, hogy GraphQL API végpontot hozzon létre a Next.js alkalmazásában.

Összegzés

A Next.js API útvonalak erőteljes és kényelmes módot kínálnak szervermentes backendek építésére közvetlenül a Next.js alkalmazáson belül. A szervermentes architektúra előnyeinek kihasználásával egyszerűsítheti a fejlesztést, javíthatja a teljesítményt és csökkentheti a költségeket. Akár egy egyszerű kapcsolatfelvételi űrlapot, akár egy komplex e-kereskedelmi platformot épít, a Next.js API útvonalak segíthetnek Önnek egy robusztus és skálázható backend könnyed létrehozásában. Az alapok szilárd megértésével és a bevált gyakorlatok alkalmazásával kihasználhatja ezt az erőteljes eszközt hatékony, biztonságos és globálisan elérhető alkalmazások létrehozására.