M

MLOG

Slovenčina

Naučte sa, ako využiť Next.js API Routes na vytváranie serverless backendov priamo vo vašej Next.js aplikácii. Táto príručka pokrýva všetko od základného nastavenia až po pokročilé techniky.

Next.js API Routes: Tvorba backendu s ľahkosťou

Next.js priniesol revolúciu do front-end vývoja vďaka svojim výkonným funkciám a intuitívnej štruktúre. Vedeli ste však, že dokáže výrazne zjednodušiť aj vývoj backendu? Next.js API Routes vám umožňujú vytvárať serverless API koncové body priamo vo vašej Next.js aplikácii, čím v mnohých prípadoch eliminujú potrebu samostatného backendového servera. Táto komplexná príručka vás prevedie procesom budovania robustného a škálovateľného backendu pomocou Next.js API Routes.

Čo sú Next.js API Routes?

API Routes sú serverless funkcie, ktoré vytvárate v adresári /pages/api vo vašom Next.js projekte. Tieto funkcie spracovávajú prichádzajúce HTTP požiadavky a vracajú odpovede, rovnako ako tradičné backendové API. Kľúčový rozdiel je v tom, že sú nasadené ako serverless funkcie, čo znamená, že nemusíte spravovať servery ani infraštruktúru.

Predstavte si ich ako odľahčené backendové funkcie na požiadanie, ktoré sú bezproblémovo integrované s vaším Next.js front-endom.

Výhody používania Next.js API Routes

Začíname s Next.js API Routes

Vytvorme si jednoduchú API route, ktorá vráti JSON odpoveď. Najprv sa uistite, že máte nastavený Next.js projekt. Ak nie, vytvorte ho pomocou:

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

Teraz vytvorte súbor s názvom hello.js v adresári /pages/api:

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

Tento kód definuje jednoduchú API route, ktorá odpovedá JSON objektom obsahujúcim meno "John Doe". Pre prístup k tejto API route spustite váš vývojový server Next.js:

npm run dev

Potom otvorte prehliadač a prejdite na http://localhost:3000/api/hello. Mali by ste vidieť nasledujúcu JSON odpoveď:

{"name": "John Doe"}

Pochopenie handlera API Route

Funkcia handler vo vašej API route prijíma dva argumenty:

Tieto objekty môžete použiť na spracovanie rôznych typov požiadaviek, čítanie dát z tela požiadavky, nastavenie hlavičiek odpovede a odosielanie rôznych typov odpovedí.

Spracovanie rôznych HTTP metód

Môžete použiť vlastnosť req.method na určenie HTTP metódy prichádzajúcej požiadavky a podľa toho spracovať rôzne metódy. Napríklad:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Spracovanie GET požiadavky
    res.status(200).json({ message: 'Toto je GET požiadavka' })
  } else if (req.method === 'POST') {
    // Spracovanie POST požiadavky
    res.status(200).json({ message: 'Toto je POST požiadavka' })
  } else {
    // Spracovanie ostatných metód
    res.status(405).json({ message: 'Metóda nie je povolená' })
  }
}

V tomto príklade API route spracováva GET aj POST požiadavky. Ak je metóda požiadavky GET, odpovie JSON objektom so správou "Toto je GET požiadavka". Ak je metóda požiadavky POST, odpovie JSON objektom so správou "Toto je POST požiadavka". Ak je metóda požiadavky akákoľvek iná, odpovie chybou 405 Metóda nie je povolená.

Čítanie dát z tela požiadavky

Pre požiadavky typu POST, PUT a PATCH často potrebujete čítať dáta z tela požiadavky. Next.js poskytuje vstavanú podporu pre parsovanie JSON a URL-enkódovaných tiel požiadaviek. Na parsovanie JSON tela požiadavky môžete použiť vlastnosť req.body. Napríklad:

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

    // Spracovanie dát
    console.log('Name:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Dáta úspešne prijaté' })
  } else {
    res.status(405).json({ message: 'Metóda nie je povolená' })
  }
}

Na otestovanie tejto API route môžete použiť nástroj ako Postman alebo curl na odoslanie POST požiadavky s JSON telom:

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

Nastavenie hlavičiek odpovede

Na nastavenie hlavičiek odpovede môžete použiť metódu res.setHeader(). To je užitočné na nastavenie typu obsahu, cache control a ďalších dôležitých informácií. Napríklad:

// 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: 'Ahoj, svet!' })
}

V tomto príklade API route nastavuje hlavičku Content-Type na application/json, čo naznačuje, že odpoveď je JSON objekt. Taktiež nastavuje hlavičku Cache-Control na s-maxage=3600, čo hovorí prehliadaču a CDN, aby odpoveď cachovali až na 1 hodinu.

Spracovanie chýb

Je dôležité správne spracovávať chyby vo vašich API routes. Môžete použiť bloky try-catch na zachytenie výnimiek a odoslanie príslušných chybových odpovedí klientovi. Napríklad:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simulácia chyby
    throw new Error('Niečo sa pokazilo')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Vnútorná chyba servera' })
  }
}

V tomto príklade API route simuluje chybu vyhodením nového objektu Error. Blok catch chybu zachytí, zapíše ju do konzoly a odošle klientovi odpoveď 500 Vnútorná chyba servera. Pre produkčné prostredia zvážte použitie robustného systému na logovanie, ako je Sentry alebo Datadog.

Pripojenie k databáze

Jedným z najbežnejších prípadov použitia API routes je pripojenie k databáze. Next.js API Routes sa bezproblémovo integrujú s rôznymi databázami, vrátane:

Tu je príklad, ako sa pripojiť k databáze MongoDB v Next.js API route:

// 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('Prosím, pridajte vašu Mongo URI do .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // Vo vývojovom režime použite globálnu premennú, aby sa hodnota
  // zachovala pri opätovnom načítaní modulu spôsobenom HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // V produkčnom režime je lepšie nepoužívať globálnu premennú.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Exportujte MongoClient promise s platnosťou v rámci modulu. Týmto spôsobom v
// samostatnom module môže byť klient bezpečne opätovne použitý vo viacerých
// funkciách. Viď: 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: 'Nepodarilo sa načítať používateľov' })
  }
}

Pred spustením tohto kódu sa uistite, že máte nainštalovaný balíček mongodb:

npm install mongodb

Taktiež musíte nastaviť premenné prostredia MONGODB_URI a MONGODB_DB. Tieto premenné by mali byť definované vo vašom súbore .env.local (alebo v nastaveniach premenných prostredia vášho hostingového poskytovateľa pre produkciu). MONGODB_URI obsahuje pripojovací reťazec k vašej databáze MongoDB a MONGODB_DB špecifikuje názov databázy.

Autentifikácia a autorizácia

Ochrana vašich API routes je kľúčová pre bezpečnosť. Next.js API Routes je možné zabezpečiť pomocou rôznych autentifikačných a autorizačných techník, vrátane:

Tu je príklad, ako ochrániť API route pomocou JWT autentifikácie:

// 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: 'Neautorizovaný prístup' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // Objekt "decoded" obsahuje informácie o používateľovi vložené v tokene
    // Napríklad: const userId = decoded.userId;

    // Pokračovať v spracovaní požiadavky
    res.status(200).json({ message: 'Prístup k chránenému zdroju bol úspešný' })
  } catch (error) {
    return res.status(401).json({ message: 'Neplatný token' })
  }
}

Pred spustením tohto kódu sa uistite, že máte nainštalovaný balíček jsonwebtoken:

npm install jsonwebtoken

Taktiež musíte nastaviť premennú prostredia JWT_SECRET. Mal by to byť silný, náhodne vygenerovaný tajný kľúč, ktorý sa používa na podpisovanie a overovanie JWT. Uložte ho bezpečne a nikdy ho neodhaľujte vo svojom kóde na strane klienta.

Middleware

Hoci Next.js neponúka tradičný middleware pre API routes spôsobom, akým to robí Express.js, môžete dosiahnuť podobnú funkcionalitu obalením vašich handlerov API route do znovupoužiteľných funkcií. To vám umožní vykonávať úlohy ako:

Tu je príklad, ako vytvoriť jednoduchý middleware na logovanie:

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

Na použitie tohto middleware jednoducho obaľte váš handler API route funkciou withLogging:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Táto požiadavka bola zalogovaná' })
}

export default withLogging(handler)

Osvedčené postupy pre tvorbu Next.js API Routes

Pokročilé techniky

Úlohy na pozadí

Pre dlhotrvajúce úlohy, ktoré by nemali blokovať odpoveď API, zvážte použitie úloh na pozadí. Na správu úloh na pozadí a ich asynchrónne spracovanie môžete použiť knižnice ako BullMQ alebo Bree.

WebSockets

Pre real-time aplikácie môžete použiť WebSockets vo vašich Next.js API routes. Knižnice ako Socket.IO a ws uľahčujú nadviazanie trvalých spojení medzi klientom a serverom.

GraphQL

Ak potrebujete flexibilnejší a efektívnejší spôsob načítavania dát, zvážte použitie GraphQL. Na vytvorenie GraphQL API koncového bodu vo vašej Next.js aplikácii môžete použiť knižnice ako Apollo Server alebo Yoga.

Záver

Next.js API Routes poskytujú výkonný a pohodlný spôsob, ako budovať serverless backendy priamo vo vašej Next.js aplikácii. Využitím výhod serverless architektúry môžete zjednodušiť vývoj, zlepšiť výkon a znížiť náklady. Či už vytvárate jednoduchý kontaktný formulár alebo komplexnú e-commerce platformu, Next.js API Routes vám môžu pomôcť ľahko vytvoriť robustný a škálovateľný backend. S pevným pochopením základov a uplatňovaním osvedčených postupov môžete tento výkonný nástroj využiť na vytváranie efektívnych, bezpečných a globálne dostupných aplikácií.