Slovenščina

Raziščite API poti Next.js in odklenite zmožnosti polno-skladnega razvoja v vaših React aplikacijah. Spoznajte vzorce, najboljše prakse in strategije namestitve.

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

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:

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:

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.

Dodatno učenje