Preskúmajte Next.js API Routes a odomknite možnosti vývoja full-stack vo vašich aplikáciách React. Naučte sa vzory, osvedčené postupy a stratégie nasadenia.
Next.js API Routes: Vzory vývoja Full-Stack
Next.js priniesol revolúciu vo vývoji React tým, že poskytol robustný framework na vytváranie výkonných a škálovateľných webových aplikácií. Jednou z jeho kľúčových funkcií sú API Routes, ktoré umožňujú vývojárom vytvárať backend funkcionalitu priamo v rámci ich projektov Next.js. Tento prístup zefektívňuje vývoj, zjednodušuje nasadenie a odomyká výkonné full-stack možnosti.
Čo sú Next.js API Routes?
Next.js API Routes sú serverless funkcie napísané priamo v adresári /pages/api
. Každý súbor v tomto adresári sa stáva API endpointom, ktorý automaticky smeruje HTTP požiadavky na jeho zodpovedajúcu funkciu. To eliminuje potrebu samostatného backend servera, zjednodušuje architektúru vašej aplikácie a znižuje prevádzkové náklady.
Predstavte si ich ako miniatúrne serverless funkcie, ktoré sa nachádzajú vo vašej aplikácii Next.js. Reagujú na HTTP požiadavky ako GET, POST, PUT, DELETE a môžu interagovať s databázami, externými API a ďalšími server-side zdrojmi. Rozhodujúce je, že bežia len na serveri, nie v prehliadači používateľa, čo zaisťuje bezpečnosť citlivých údajov, ako sú API kľúče.
Kľúčové výhody API Routes
- Zjednodušený vývoj: Píšte frontend aj backend kód v rámci rovnakého projektu.
- Serverless architektúra: Využite serverless funkcie pre škálovateľnosť a efektívnosť nákladov.
- Jednoduché nasadenie: Nasaďte svoj frontend a backend spoločne pomocou jedného príkazu.
- Vylepšený výkon: Server-side rendering a možnosti načítavania dát vylepšujú rýchlosť aplikácie.
- Vylepšená bezpečnosť: Citlivé údaje zostávajú na serveri, chránené pred expozíciou na strane klienta.
Začíname s API Routes
Vytvorenie API route v Next.js je jednoduché. Jednoducho vytvorte nový súbor v adresári /pages/api
. Názov súboru určí cestu route. Napríklad vytvorenie súboru s názvom /pages/api/hello.js
vytvorí API endpoint prístupný na /api/hello
.
Príklad: Jednoduché pozdravovacie API
Tu je základný príklad API route, ktorý vracia JSON odpoveď:
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Ahoj z Next.js API Route!' });
}
Tento kód definuje asynchrónnu funkciu handler
, ktorá prijíma dva argumenty:
req
: Inštanciahttp.IncomingMessage
, plus niektoré vopred vytvorené middleware.res
: Inštanciahttp.ServerResponse
, plus niektoré pomocné funkcie.
Funkcia nastaví HTTP status code na 200 (OK) a vráti JSON odpoveď so správou.
Spracovanie rôznych HTTP metód
Rôzne HTTP metódy (GET, POST, PUT, DELETE atď.) môžete spracovať vo svojej API route tak, že skontrolujete vlastnosť req.method
. To vám umožňuje jednoducho vytvárať RESTful API.
// pages/api/todos.js
export default async function handler(req, res) {
if (req.method === 'GET') {
// Načítanie všetkých úloh z databázy
const todos = await fetchTodos();
res.status(200).json(todos);
} else if (req.method === 'POST') {
// Vytvorenie novej úlohy
const newTodo = await createTodo(req.body);
res.status(201).json(newTodo);
} else {
// Spracovanie nepodporovaných metód
res.status(405).json({ message: 'Metóda nie je povolená' });
}
}
Tento príklad ukazuje, ako spracovať GET a POST požiadavky pre hypotetický /api/todos
endpoint. Obsahuje tiež spracovanie chýb pre nepodporované metódy.
Vzory vývoja Full-Stack s API Routes
Next.js API Routes umožňujú rôzne vzory vývoja full-stack. Tu sú niektoré bežné prípady použitia:
1. Načítavanie a manipulácia s dátami
API Routes sa dajú použiť na načítavanie dát z databáz, externých API alebo iných dátových zdrojov. Môžu sa tiež použiť na manipuláciu s dátami, ako je vytváranie, aktualizácia alebo mazanie záznamov.
Príklad: Načítavanie používateľských dát z databázy
// pages/api/users/[id].js
import { query } from '../../../lib/db';
export default async function handler(req, res) {
const { id } = req.query;
try {
const results = await query(
'SELECT * FROM users WHERE id = ?',
[id]
);
if (results.length === 0) {
return res.status(404).json({ message: 'Používateľ sa nenašiel' });
}
res.status(200).json(results[0]);
} catch (error) {
console.error(error);
res.status(500).json({ message: 'Interná chyba servera' });
}
}
Tento príklad načítava používateľské dáta z databázy na základe ID používateľa poskytnutého v URL. Používa knižnicu pre databázové otázky (predpokladá sa, že je v lib/db
) na interakciu s databázou. Všimnite si použitie parametrizovaných otázok na zabránenie zraniteľnosti SQL injection.
2. Autentifikácia a autorizácia
API Routes sa môžu použiť na implementáciu autentifikačnej a autorizačnej logiky. Môžete ich použiť na overenie používateľských poverení, generovanie JWT tokenov a ochranu citlivých zdrojov.
Príklad: Autentifikácia používateľa
// pages/api/login.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { query } from '../../lib/db';
export default async function handler(req, res) {
if (req.method === 'POST') {
const { email, password } = req.body;
try {
const results = await query(
'SELECT * FROM users WHERE email = ?',
[email]
);
if (results.length === 0) {
return res.status(401).json({ message: 'Neplatné poverenia' });
}
const user = results[0];
const passwordMatch = await bcrypt.compare(password, user.password);
if (!passwordMatch) {
return res.status(401).json({ message: 'Neplatné poverenia' });
}
const token = jwt.sign(
{ userId: user.id, email: user.email },
process.env.JWT_SECRET,
{ expiresIn: '1h' }
);
res.status(200).json({ token });
} catch (error) {
console.error(error);
res.status(500).json({ message: 'Interná chyba servera' });
}
} else {
res.status(405).json({ message: 'Metóda nie je povolená' });
}
}
Tento príklad overuje používateľov porovnaním poskytnutého hesla s uloženým hashovaným heslom v databáze. Ak sú poverenia platné, vygeneruje JWT token a vráti ho klientovi. Klient môže potom použiť tento token na overenie nasledujúcich požiadaviek.
3. Spracovanie formulárov a odosielanie dát
API Routes sa dajú použiť na spracovanie odosielania formulárov a spracovanie dát odoslaných od klienta. To je užitočné na vytváranie kontaktných formulárov, registračných formulárov a ďalších interaktívnych prvkov.
Príklad: Odoslanie kontaktného formulára
// pages/api/contact.js
import { sendEmail } from '../../lib/email';
export default async function handler(req, res) {
if (req.method === 'POST') {
const { name, email, message } = req.body;
try {
await sendEmail({
to: 'admin@example.com',
subject: 'Odoslanie nového kontaktného formulára',
text: `Meno: ${name}\nEmail: ${email}\nSpráva: ${message}`,
});
res.status(200).json({ message: 'E-mail bol úspešne odoslaný' });
} catch (error) {
console.error(error);
res.status(500).json({ message: 'Nepodarilo sa odoslať e-mail' });
}
} else {
res.status(405).json({ message: 'Metóda nie je povolená' });
}
}
Tento príklad spracováva odoslanie kontaktného formulára odoslaním e-mailu administrátorovi. Na odoslanie e-mailu používa knižnicu na odosielanie e-mailov (predpokladá sa, že je v lib/email
). Mali by ste nahradiť admin@example.com
skutočnou e-mailovou adresou príjemcu.
4. Webhooky a spracovanie udalostí
API Routes sa môžu použiť na spracovanie webhookov a reagovanie na udalosti z externých služieb. To vám umožňuje integrovať vašu aplikáciu Next.js s inými platformami a automatizovať úlohy.
Príklad: Spracovanie Stripe Webhooku
// pages/api/stripe-webhook.js
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
export const config = {
api: {
bodyParser: false, // Vypnúť predvolené parsovanie tela
},
};
async function buffer(req) {
const chunks = [];
for await (const chunk of req) {
chunks.push(chunk);
}
return Buffer.concat(chunks).toString();
}
export default async function handler(req, res) {
if (req.method === 'POST') {
const sig = req.headers['stripe-signature'];
let event;
try {
const buf = await buffer(req);
event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
} catch (err) {
console.log(`Chyba Webhooku: ${err.message}`);
res.status(400).send(`Chyba Webhooku: ${err.message}`);
return;
}
// Spracovať udalosť
switch (event.type) {
case 'payment_intent.succeeded':
const paymentIntent = event.data.object;
console.log(`PaymentIntent pre ${paymentIntent.amount} bol úspešný!`);
// Potom definujte a zavolajte metódu na spracovanie úspešného zámeru platby.
// handlePaymentIntentSucceeded(paymentIntent);
break;
case 'payment_method.attached':
const paymentMethod = event.data.object;
// Potom definujte a zavolajte metódu na spracovanie úspešného pripojenia PaymentMethod.
// handlePaymentMethodAttached(paymentMethod);
break;
default:
// Neočakávaný typ udalosti
console.log(`Nezachytávaný typ udalosti ${event.type}.`);
}
// Vrátiť odpoveď 200 na potvrdenie prijatia udalosti
res.status(200).json({ received: true });
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Metóda nie je povolená');
}
}
Tento príklad spracováva Stripe webhook overením podpisu a spracovaním dát udalosti. Vypne predvolený parser tela a používa vlastnú funkciu buffer na čítanie surového tela požiadavky. Je nevyhnutné vypnúť predvolený parser tela, pretože Stripe vyžaduje surové telo na overenie podpisu. Nezabudnite nakonfigurovať svoj Stripe webhook endpoint v paneli Stripe a nastaviť premennú prostredia STRIPE_WEBHOOK_SECRET
.
Osvedčené postupy pre API Routes
Ak chcete zabezpečiť kvalitu a udržiavateľnosť vašich API Routes, postupujte podľa týchto osvedčených postupov:
1. Modularizujte svoj kód
Vyhnite sa písaniu rozsiahlych, monolitických API routes. Namiesto toho rozdeľte svoj kód na menšie, znovu použiteľné moduly. Vďaka tomu bude váš kód ľahšie pochopiteľný, testovateľný a udržiavateľný.
2. Implementujte spracovanie chýb
Správne spracovávajte chyby vo svojich API routes. Použite bloky try...catch
na zachytenie výnimiek a vrátenie príslušných chybových odpovedí klientovi. Zaznamenajte chyby, aby ste si pomohli s ladenie a monitorovaním.
3. Overte vstupné dáta
Vždy overujte vstupné dáta od klienta, aby ste predišli bezpečnostným zraniteľnostiam a zabezpečili integritu dát. Použite validačné knižnice ako Joi alebo Yup na definovanie validačných schém a vynútenie dátových obmedzení.
4. Chráňte citlivé dáta
Uchovávajte citlivé dáta, ako sú API kľúče a poverenia databázy, v premenných prostredia. Nikdy neposielajte citlivé údaje do úložiska vášho kódu.
5. Implementujte obmedzovanie frekvencie
Chráňte svoje API routes pred zneužitím implementáciou obmedzovania frekvencie. Tým sa obmedzuje počet požiadaviek, ktoré môže klient zadať v danom časovom období. Použite knižnice na obmedzovanie frekvencie ako express-rate-limit
alebo limiter
.
6. Zabezpečte API kľúče
Nevystavujte API kľúče priamo v kóde na strane klienta. Vždy presmerujte požiadavky cez svoje API routes, aby ste chránili svoje API kľúče pred neoprávneným prístupom. Ukladajte API kľúče bezpečne v premenných prostredia na svojom serveri.
7. Používajte premenné prostredia
Vyhnite sa pevnému kódovaniu konfiguračných hodnôt vo svojom kóde. Namiesto toho použite premenné prostredia na ukladanie nastavení konfigurácie. To uľahčuje správu vašej aplikácie v rôznych prostrediach (vývoj, staging, produkcia).
8. Zaznamenávanie a monitorovanie
Implementujte zaznamenávanie a monitorovanie na sledovanie výkonu vašich API routes. Zaznamenávajte dôležité udalosti, ako sú chyby, varovania a úspešné požiadavky. Použite monitorovacie nástroje na sledovanie metrík, ako je latencia požiadaviek, chybovosť a využitie zdrojov. Služby ako Sentry, Datadog alebo New Relic môžu byť užitočné.
Úvahy o nasadení
Next.js API Routes sú navrhnuté tak, aby boli nasadené na serverless platformách. Medzi obľúbené možnosti nasadenia patria:
- Vercel: Vercel je odporúčaná platforma na nasadenie aplikácií Next.js. Poskytuje bezproblémovú integráciu s Next.js a automaticky optimalizuje vašu aplikáciu pre výkon.
- Netlify: Netlify je ďalšia populárna serverless platforma, ktorá podporuje nasadenie Next.js. Ponúka podobné funkcie ako Vercel, ako sú automatické nasadenia a integrácia CDN.
- AWS Lambda: AWS Lambda je serverless výpočtová služba, ktorá vám umožňuje spúšťať kód bez provisioningu alebo správy serverov. Svoje Next.js API Routes môžete nasadiť ako funkcie Lambda pomocou nástrojov ako Serverless Framework alebo AWS SAM.
- Google Cloud Functions: Google Cloud Functions je serverless vykonávacie prostredie, ktoré vám umožňuje vytvárať a pripájať cloudové služby. Svoje Next.js API Routes môžete nasadiť ako Cloud Functions pomocou nástrojov ako Firebase CLI alebo Google Cloud SDK.
- Azure Functions: Azure Functions je serverless výpočtová služba, ktorá vám umožňuje spúšťať kód na požiadanie bez správy infraštruktúry. Svoje Next.js API Routes môžete nasadiť ako Azure Functions pomocou nástrojov ako Azure Functions Core Tools alebo Azure CLI.
Pri nasadzovaní vašej aplikácie Next.js s API Routes sa uistite, že vaše premenné prostredia sú správne nakonfigurované na platforme nasadenia. Zvážte tiež čas studeného štartu serverless funkcií, ktorý môže ovplyvniť počiatočnú dobu odozvy vašich API routes. Optimalizácia vášho kódu a používanie techník, ako je poskytnutá konkurencia, môže pomôcť zmierniť problémy so studeným štartom.
Záver
Next.js API Routes poskytujú výkonný a pohodlný spôsob vytvárania full-stack aplikácií s Reactom. Využitím serverless funkcií môžete zjednodušiť vývoj, znížiť prevádzkové náklady a zlepšiť výkon aplikácie. Dodržiavaním osvedčených postupov uvedených v tomto článku môžete vytvárať robustné a udržiavateľné API Routes, ktoré poháňajú vaše aplikácie Next.js.
Či už vytvárate jednoduchý kontaktný formulár alebo komplexnú platformu elektronického obchodu, Next.js API Routes vám môžu pomôcť zefektívniť váš vývojový proces a poskytnúť výnimočné používateľské skúsenosti.