M

MLOG

Slovenčina

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

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:

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:

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.

Ďalšie štúdium