M

MLOG

Čeština

Naučte se využívat Next.js API Routes k vytváření serverless backendů přímo ve vaší Next.js aplikaci. Tento průvodce pokrývá vše od základního nastavení po pokročilé techniky pro autentizaci, persistenci dat a další.

API Routes v Next.js: Tvorba backendu s lehkostí

Next.js přinesl revoluci do vývoje front-endu díky svým výkonným funkcím a intuitivní struktuře. Věděli jste ale, že může také výrazně zjednodušit vývoj backendu? API Routes v Next.js vám umožňují vytvářet serverless API endpointy přímo ve vaší Next.js aplikaci, což v mnoha případech eliminuje potřebu samostatného backendového serveru. Tento komplexní průvodce vás provede procesem tvorby robustního a škálovatelného backendu pomocí API Routes v Next.js.

Co jsou Next.js API Routes?

API Routes jsou serverless funkce, které vytváříte ve složce /pages/api ve vašem Next.js projektu. Tyto funkce zpracovávají příchozí HTTP požadavky a vrací odpovědi, stejně jako tradiční backendové API. Klíčovým rozdílem je, že jsou nasazovány jako serverless funkce, což znamená, že nemusíte spravovat servery ani infrastrukturu.

Představte si je jako lehké, on-demand backendové funkce, které jsou hladce integrovány s vaším Next.js front-endem.

Výhody používání Next.js API Routes

Jak začít s Next.js API Routes

Vytvořme si jednoduchou API route, která vrací JSON odpověď. Nejprve se ujistěte, že máte nastavený Next.js projekt. Pokud ne, vytvořte si ho pomocí:

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

Nyní vytvořte soubor s názvem hello.js uvnitř složky /pages/api:

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

Tento kód definuje jednoduchou API route, která odpovídá JSON objektem obsahujícím jméno "John Doe". Pro přístup k této API route spusťte vývojový server Next.js:

npm run dev

Poté otevřete prohlížeč a přejděte na http://localhost:3000/api/hello. Měli byste vidět následující JSON odpověď:

{"name": "John Doe"}

Porozumění handleru API Route

Funkce handler ve vaší API route přijímá dva argumenty:

Tyto objekty můžete použít ke zpracování různých typů požadavků, čtení dat z těla požadavku, nastavení hlaviček odpovědi a odesílání různých typů odpovědí.

Zpracování různých HTTP metod

Pomocí vlastnosti req.method můžete určit HTTP metodu příchozího požadavku a podle toho zpracovat různé metody. Například:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Zpracování GET požadavku
    res.status(200).json({ message: 'This is a GET request' })
  } else if (req.method === 'POST') {
    // Zpracování POST požadavku
    res.status(200).json({ message: 'This is a POST request' })
  } else {
    // Zpracování ostatních metod
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

V tomto příkladu API route zpracovává jak GET, tak POST požadavky. Pokud je metoda požadavku GET, odpoví JSON objektem s hláškou "This is a GET request". Pokud je metoda požadavku POST, odpoví JSON objektem s hláškou "This is a POST request". Pokud je metoda požadavku jakákoli jiná, odpoví chybou 405 Method Not Allowed.

Čtení dat z těla požadavku

Pro POST, PUT a PATCH požadavky často potřebujete číst data z těla požadavku. Next.js poskytuje vestavěnou podporu pro parsování JSON a URL-encoded těl požadavků. Pro parsování JSON těla požadavku můžete použít vlastnost req.body. Například:

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

    // Zpracování dat
    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' })
  }
}

Pro otestování této API route můžete použít nástroj jako Postman nebo curl k odeslání POST požadavku s JSON tělem:

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

Nastavení hlaviček odpovědi

Pomocí metody res.setHeader() můžete nastavit hlavičky odpovědi. To je užitečné pro nastavení typu obsahu, cache control a dalších důležitých informací. Napří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: 'Hello, world!' })
}

V tomto příkladu API route nastavuje hlavičku Content-Type na application/json, což značí, že odpověď je JSON objekt. Také nastavuje hlavičku Cache-Control na s-maxage=3600, což říká prohlížeči a CDN, aby odpověď cachovaly po dobu až 1 hodiny.

Zpracování chyb

Je důležité elegantně zpracovávat chyby ve vašich API routes. Můžete použít bloky try-catch k zachycení výjimek a odeslání příslušných chybových odpovědí klientovi. Například:

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

V tomto příkladu API route simuluje chybu vyhozením nového objektu Error. Blok catch chybu zachytí, zaloguje ji do konzole a odešle klientovi odpověď 500 Internal Server Error. Pro produkční prostředí zvažte použití robustního logovacího systému jako Sentry nebo Datadog.

Připojení k databázi

Jedním z nejčastějších použití API routes je připojení k databázi. Next.js API Routes se bezproblémově integrují s různými databázemi, včetně:

Zde je příklad, jak se připojit k databázi 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('Please add your Mongo URI to .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // V režimu vývoje použijte globální proměnnou, aby byla hodnota
  // zachována mezi opětovným načtením modulu způsobeným HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // V produkčním režimu je lepší nepoužívat globální proměnnou.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Exportujte příslib MongoClient s module-scoped platností. Tímto způsobem
// v samostatném modulu může být klient bezpečně znovu použit napříč více
// funkcemi. Viz: 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' })
  }
}

Před spuštěním tohoto kódu se ujistěte, že máte nainstalovaný balíček mongodb:

npm install mongodb

Musíte také nastavit proměnné prostředí MONGODB_URI a MONGODB_DB. Tyto proměnné by měly být definovány ve vašem souboru .env.local (nebo v nastavení proměnných prostředí vašeho hostingového poskytovatele pro produkci). MONGODB_URI obsahuje připojovací řetězec k vaší databázi MongoDB a MONGODB_DB specifikuje název databáze.

Autentizace a autorizace

Ochrana vašich API routes je klíčová pro bezpečnost. API Routes v Next.js lze zabezpečit pomocí různých technik autentizace a autorizace, včetně:

Zde je příklad, jak chránit API route pomocí JWT autentizace:

// 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)
    // Objekt "decoded" obsahuje informace o uživateli vložené do tokenu
    // Například: const userId = decoded.userId;

    // Pokračování ve zpracování požadavku
    res.status(200).json({ message: 'Protected resource accessed successfully' })
  } catch (error) {
    return res.status(401).json({ message: 'Invalid token' })
  }
}

Před spuštěním tohoto kódu se ujistěte, že máte nainstalovaný balíček jsonwebtoken:

npm install jsonwebtoken

Musíte také nastavit proměnnou prostředí JWT_SECRET. Měl by to být silný, náhodně vygenerovaný tajný klíč, který se používá k podepisování a ověřování JWT. Ukládejte ho bezpečně a nikdy ho neodhalujte ve svém kódu na straně klienta.

Middleware

Ačkoliv Next.js nenabízí tradiční middleware pro API routes stejným způsobem jako Express.js, můžete dosáhnout podobné funkcionality obalením vašich handlerů API routes opakovaně použitelnými funkcemi. To vám umožňuje provádět úkoly jako:

Zde je příklad, jak vytvořit jednoduchý logovací middleware:

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

Pro použití tohoto middleware jednoduše obalte váš handler API route funkcí withLogging:

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

Doporučené postupy pro tvorbu Next.js API Routes

Pokročilé techniky

Úlohy na pozadí (Background Jobs)

Pro dlouhotrvající úkoly, které by neměly blokovat odpověď API, zvažte použití úloh na pozadí. Můžete použít knihovny jako BullMQ nebo Bree ke správě vašich úloh na pozadí a jejich asynchronnímu zpracování.

WebSockets

Pro aplikace v reálném čase můžete ve svých Next.js API routes použít WebSockets. Knihovny jako Socket.IO a ws usnadňují navázání trvalých spojení mezi klientem a serverem.

GraphQL

Pokud potřebujete flexibilnější a efektivnější způsob načítání dat, zvažte použití GraphQL. Můžete použít knihovny jako Apollo Server nebo Yoga k vytvoření GraphQL API endpointu ve vaší Next.js aplikaci.

Závěr

Next.js API Routes poskytují výkonný a pohodlný způsob, jak vytvářet serverless backendy přímo ve vaší Next.js aplikaci. Využitím výhod serverless architektury můžete zjednodušit vývoj, zlepšit výkon a snížit náklady. Ať už vytváříte jednoduchý kontaktní formulář nebo komplexní e-commerce platformu, Next.js API Routes vám mohou pomoci snadno vytvořit robustní a škálovatelný backend. S pevným porozuměním základům a aplikací osvědčených postupů můžete tento výkonný nástroj využít k tvorbě efektivních, bezpečných a globálně dostupných aplikací.