Next.js API poti: Vzorci polno-skladnega razvoja

Next.js je revolucioniral razvoj Reacta, saj ponuja robusten okvir za gradnjo zmogljivih in razširljivih spletnih aplikacij. Ena ključnih značilnosti so API poti (API Routes), ki razvijalcem omogočajo ustvarjanje zaledne funkcionalnosti neposredno v njihovih projektih Next.js. Ta pristop poenostavi razvoj, olajša namestitev in omogoči zmogljive polno-skladne zmogljivosti.

Kaj so API poti Next.js?

API poti Next.js so brezstrežniške funkcije, napisane neposredno v vaši mapi /pages/api. Vsaka datoteka v tej mapi postane API končna točka, ki samodejno preusmeri HTTP zahteve na ustrezno funkcijo. To odpravlja potrebo po ločenem zalednem strežniku, kar poenostavi arhitekturo vaše aplikacije in zmanjša operativne stroške.

Predstavljajte si jih kot miniaturne brezstrežniške funkcije, ki živijo znotraj vaše aplikacije Next.js. Odzivajo se na HTTP zahteve, kot so GET, POST, PUT, DELETE, in lahko komunicirajo z bazami podatkov, zunanjimi API-ji in drugimi viri na strežniški strani. Ključno je, da se izvajajo samo na strežniku, ne v uporabnikovem brskalniku, kar zagotavlja varnost občutljivih podatkov, kot so API ključi.

Ključne prednosti API poti

Poenostavljen razvoj: Pišite tako sprednjo kot zaledno kodo v istem projektu.
Brezstrežniška arhitektura: Izkoristite brezstrežniške funkcije za skalabilnost in stroškovno učinkovitost.
Enostavna namestitev: Namestite sprednji in zaledni del skupaj z enim samim ukazom.
Izboljšana zmogljivost: Zmogljivosti strežniškega upodabljanja in pridobivanja podatkov povečajo hitrost aplikacije.
Izboljšana varnost: Občutljivi podatki ostanejo na strežniku, zaščiteni pred izpostavljenostjo na strani odjemalca.

Začetek dela z API potmi

Ustvarjanje API poti v Next.js je preprosto. Preprosto ustvarite novo datoteko v mapi /pages/api. Ime datoteke bo določilo pot poti. Na primer, ustvarjanje datoteke z imenom /pages/api/hello.js bo ustvarilo API končno točko, dostopno na /api/hello.

Primer: Preprost API za pozdrav

Tukaj je osnovni primer API poti, ki vrne JSON odgovor:


// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API Route!' });
}

Ta koda definira asinhrono funkcijo handler, ki prejme dva argumenta:

req: Instanca http.IncomingMessage, plus nekaj vgrajenih vmesnikov.
res: Instanca http.ServerResponse, plus nekaj pomožnih funkcij.

Funkcija nastavi HTTP statusno kodo na 200 (OK) in vrne JSON odgovor s sporočilom.

Obravnavanje različnih HTTP metod

Različne HTTP metode (GET, POST, PUT, DELETE itd.) lahko obravnavate znotraj svoje API poti tako, da preverite lastnost req.method. To vam omogoča enostavno ustvarjanje RESTful API-jev.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Fetch all todos from the database
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Create a new todo
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Handle unsupported methods
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

Ta primer prikazuje, kako obravnavati GET in POST zahteve za hipotetično končno točko /api/todos. Vključuje tudi obravnavanje napak za nepodprte metode.

Vzorci polno-skladnega razvoja z API potmi

API poti Next.js omogočajo različne vzorce polno-skladnega razvoja. Tukaj je nekaj pogostih primerov uporabe:

1. Pridobivanje in manipulacija podatkov

API poti se lahko uporabljajo za pridobivanje podatkov iz baz podatkov, zunanjih API-jev ali drugih virov podatkov. Uporabljajo se lahko tudi za manipulacijo podatkov, kot so ustvarjanje, posodabljanje ali brisanje zapisov.

Primer: Pridobivanje uporabniških podatkov iz baze podatkov


// 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: 'User not found' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal Server Error' });
  }
}

Ta primer pridobiva uporabniške podatke iz baze podatkov na podlagi uporabnikovega ID-ja, podanega v URL-ju. Uporablja knjižnico za poizvedbe po bazi podatkov (predpostavlja se, da je v lib/db) za interakcijo z bazo podatkov. Upoštevajte uporabo parametriziranih poizvedb za preprečevanje ranljivosti za SQL injekcije.

2. Avtentikacija in avtorizacija

API poti se lahko uporabljajo za implementacijo logike avtentikacije in avtorizacije. Uporabite jih lahko za preverjanje uporabniških poverilnic, generiranje JWT žetonov in zaščito občutljivih virov.

Primer: Avtentikacija uporabnika


// 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: 'Invalid credentials' });
      }

      const user = results[0];

      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
        return res.status(401).json({ message: 'Invalid credentials' });
      }

      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: 'Internal Server Error' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

Ta primer avtentificira uporabnike s primerjavo podanega gesla s shranjenim zgoščenim geslom v bazi podatkov. Če so poverilnice veljavne, generira JWT žeton in ga vrne odjemalcu. Odjemalec lahko nato ta žeton uporabi za avtentikacijo naknadnih zahtev.

3. Obravnavanje obrazcev in oddaja podatkov

API poti se lahko uporabljajo za obravnavanje oddaj obrazcev in obdelavo podatkov, poslanih od odjemalca. To je uporabno za ustvarjanje kontaktnih obrazcev, obrazcev za registracijo in drugih interaktivnih elementov.

Primer: Oddaja kontaktnega obrazca


// 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: 'New Contact Form Submission',
        text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
      });

      res.status(200).json({ message: 'Email sent successfully' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Failed to send email' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

Ta primer obravnava oddajo kontaktnega obrazca s pošiljanjem e-pošte administratorju. Uporablja knjižnico za pošiljanje e-pošte (predpostavlja se, da je v lib/email) za pošiljanje e-pošte. Zamenjati morate admin@example.com z dejanskim e-poštnim naslovom prejemnika.

4. Spletni kavlji (Webhooks) in obravnavanje dogodkov

API poti se lahko uporabljajo za obravnavanje spletnih kavljev (webhooks) in odzivanje na dogodke iz zunanjih storitev. To vam omogoča integracijo vaše aplikacije Next.js z drugimi platformami in avtomatizacijo nalog.

Primer: Obravnavanje Stripe spletnega kavlja (Webhooka)


// pages/api/stripe-webhook.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false, // Disable default body parsing
  },
};

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(`Webhook Error: ${err.message}`);
      res.status(400).send(`Webhook Error: ${err.message}`);
      return;
    }

    // Handle the event
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent for ${paymentIntent.amount} was successful!`);
        // Then define and call a method to handle the successful payment intent.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Then define and call a method to handle the successful attachment of a PaymentMethod.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // Unexpected event type
        console.log(`Unhandled event type ${event.type}.`);
    }

    // Return a 200 response to acknowledge receipt of the event
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Ta primer obravnava Stripe spletni kavelj (webhook) tako, da preveri podpis in obdela podatke dogodka. Onemogoči privzeti razčlenjevalnik telesa in uporablja funkcijo lastnega pomnilnika (buffer) za branje surovega telesa zahteve. Ključno je onemogočiti privzeti razčlenjevalnik telesa, ker Stripe za preverjanje podpisa zahteva surovo telo. Ne pozabite konfigurirati svoje Stripe končne točke spletnega kavlja v svoji Stripe nadzorni plošči in nastaviti spremenljivko okolja STRIPE_WEBHOOK_SECRET.

Najboljše prakse za API poti

Za zagotavljanje kakovosti in vzdrževanja vaših API poti sledite naslednjim najboljšim praksam:

1. Modularizirajte svojo kodo

Izogibajte se pisanju velikih, monolitnih API poti. Namesto tega razdelite svojo kodo na manjše, ponovno uporabne module. To omogoča lažje razumevanje, testiranje in vzdrževanje vaše kode.

2. Implementirajte obravnavanje napak

Pravilno obravnavajte napake v svojih API poteh. Uporabite bloke try...catch za lovljenje izjem in vračanje ustreznih odgovorov o napakah odjemalcu. Beležite napake za pomoč pri odpravljanju napak in spremljanju.

3. Preverjanje veljavnosti vhodnih podatkov

Vedno preverite veljavnost vhodnih podatkov odjemalca, da preprečite varnostne ranljivosti in zagotovite celovitost podatkov. Uporabite knjižnice za preverjanje veljavnosti, kot sta Joi ali Yup, za določanje shem preverjanja in uveljavljanje podatkovnih omejitev.

4. Zaščitite občutljive podatke

Občutljive podatke, kot so API ključi in poverilnice baze podatkov, shranite v okoljske spremenljivke. Nikoli ne potrjujte občutljivih podatkov v svoje repozitorij kode.

5. Implementirajte omejevanje hitrosti

Zaščitite svoje API poti pred zlorabo z implementacijo omejevanja hitrosti. To omejuje število zahtev, ki jih lahko odjemalec izvede v določenem časovnem obdobju. Uporabite knjižnice za omejevanje hitrosti, kot sta express-rate-limit ali limiter.

6. Zavarujte API ključe

Ne izpostavljajte API ključev neposredno v kodi na strani odjemalca. Vedno posredujte zahteve prek svojih API poti, da zaščitite svoje API ključe pred nepooblaščenim dostopom. API ključe varno shranite v okoljske spremenljivke na vašem strežniku.

7. Uporabite okoljske spremenljivke

Izogibajte se trdemu kodiranju konfiguracijskih vrednosti v svoji kodi. Namesto tega uporabite okoljske spremenljivke za shranjevanje konfiguracijskih nastavitev. To poenostavi upravljanje vaše aplikacije v različnih okoljih (razvoj, testiranje, produkcija).

8. Beleženje in spremljanje

Implementirajte beleženje in spremljanje za sledenje zmogljivosti vaših API poti. Beležite pomembne dogodke, kot so napake, opozorila in uspešne zahteve. Uporabite orodja za spremljanje za sledenje metrikam, kot so latenca zahtev, stopnje napak in uporaba virov. Storitve kot so Sentry, Datadog ali New Relic so lahko v pomoč.

Razmisleki o namestitvi

API poti Next.js so zasnovane za namestitev na brezstrežniških platformah. Priljubljene možnosti namestitve vključujejo:

Vercel: Vercel je priporočena platforma za namestitev aplikacij Next.js. Zagotavlja brezhibno integracijo z Next.js in samodejno optimizira vašo aplikacijo za zmogljivost.
Netlify: Netlify je še ena priljubljena brezstrežniška platforma, ki podpira namestitve Next.js. Ponuja podobne funkcije kot Vercel, kot so samodejne namestitve in integracija CDN.
AWS Lambda: AWS Lambda je brezstrežniška računalniška storitev, ki vam omogoča zagon kode brez zagotavljanja ali upravljanja strežnikov. Svoje API poti Next.js lahko namestite kot Lambda funkcije z orodji, kot sta Serverless Framework ali AWS SAM.
Google Cloud Functions: Google Cloud Functions je brezstrežniško izvedbeno okolje, ki vam omogoča ustvarjanje in povezovanje oblačnih storitev. Svoje API poti Next.js lahko namestite kot Cloud Functions z orodji, kot sta Firebase CLI ali Google Cloud SDK.
Azure Functions: Azure Functions je brezstrežniška računalniška storitev, ki vam omogoča zagon kode na zahtevo brez upravljanja infrastrukture. Svoje API poti Next.js lahko namestite kot Azure Functions z orodji, kot sta Azure Functions Core Tools ali Azure CLI.

Ko nameščate svojo aplikacijo Next.js z API potmi, se prepričajte, da so vaše okoljske spremenljivke pravilno konfigurirane na platformi za namestitev. Upoštevajte tudi čas hladnega zagona brezstrežniških funkcij, ki lahko vpliva na začetni odzivni čas vaših API poti. Optimizacija vaše kode in uporaba tehnik, kot je predhodno dodeljena sočasnost (provisioned concurrency), lahko pomagajo ublažiti težave s hladnim zagonom.

Zaključek

API poti Next.js ponujajo zmogljiv in priročen način za gradnjo polno-skladnih aplikacij z Reactom. Z izkoriščanjem brezstrežniških funkcij lahko poenostavite razvoj, zmanjšate operativne stroške in izboljšate zmogljivost aplikacije. Z upoštevanjem najboljših praks, opisanih v tem članku, lahko ustvarite robustne in vzdržljive API poti, ki poganjajo vaše aplikacije Next.js.

Ne glede na to, ali gradite preprost kontaktni obrazec ali kompleksno platformo za e-trgovino, vam lahko API poti Next.js pomagajo poenostaviti razvojni proces in zagotoviti izjemne uporabniške izkušnje.

MLOG