Next.js API marsruudid: täislahenduse arendusmustrid

Next.js on revolutsioneerinud Reacti arendust, pakkudes tugevat raamistikku jõudluspõhiste ja skaleeritavate veebirakenduste loomiseks. Üks selle peamisi funktsioone on API marsruudid, mis võimaldavad arendajatel luua tagarakendi funktsionaalsust otse oma Next.js projektides. See lähenemine muudab arenduse sujuvamaks, lihtsustab juurutamist ja avab võimsad täislahenduse võimalused.

Mis on Next.js API marsruudid?

Next.js API marsruudid on serverivabad funktsioonid, mis on kirjutatud otse teie /pages/api kausta. Iga fail selles kaustas muutub API lõpp-punktiks, suunates HTTP-päringud automaatselt vastavale funktsioonile. See välistab vajaduse eraldi tagarakendi serveri järele, lihtsustades teie rakenduse arhitektuuri ja vähendades operatiivkulusid.

Mõelge neist kui miniatuursetest serverivabadest funktsioonidest, mis elavad teie Next.js rakenduse sees. Nad vastavad HTTP-päringutele nagu GET, POST, PUT, DELETE ja saavad suhelda andmebaaside, väliste API-de ja muude serveripoolsete ressurssidega. Oluline on see, et need töötavad ainult serveris, mitte kasutaja brauseris, tagades tundlike andmete, näiteks API-võtmete, turvalisuse.

API marsruutide peamised eelised

Lihtsustatud arendus: Kirjutage nii esi- kui ka tagarakendi kood samas projektis.
Serverivaba arhitektuur: Kasutage serverivabasid funktsioone skaleeritavuse ja kulutõhususe saavutamiseks.
Lihtne juurutamine: Juurutage oma esi- ja tagarakend koos ühe käsuga.
Parem jõudlus: Serveripoolne renderdamine ja andmete pärimise võimalused suurendavad rakenduse kiirust.
Täiustatud turvalisus: Tundlikud andmed jäävad serverisse, kaitstuna kliendipoolse kokkupuute eest.

API marsruutidega alustamine

API marsruudi loomine Next.js-is on lihtne. Looge lihtsalt uus fail /pages/api kausta. Failinimi määrab marsruudi tee. Näiteks faili nimega /pages/api/hello.js loomine loob API lõpp-punkti, mis on kättesaadav aadressil /api/hello.

Näide: lihtne tervituse API

Siin on põhiline näide API marsruudist, mis tagastab JSON-vastuse:


// pages/api/hello.js

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

See kood defineerib asünkroonse funktsiooni handler, mis saab kaks argumenti:

req: http.IncomingMessage eksemplar, millele on lisatud mõned eelsisestatud vahevarad.
res: http.ServerResponse eksemplar, millele on lisatud mõned abifunktsioonid.

Funktsioon määrab HTTP olekukoodiks 200 (OK) ja tagastab sõnumiga JSON-vastuse.

Erinevate HTTP-meetodite käsitlemine

Saate oma API marsruudis käsitleda erinevaid HTTP-meetodeid (GET, POST, PUT, DELETE jne), kontrollides req.method omadust. See võimaldab teil hõlpsasti luua RESTful API-sid.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Hangi kõik ülesanded andmebaasist
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Loo uus ülesanne
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Käsitle toetamata meetodeid
    res.status(405).json({ message: 'Meetod pole lubatud' });
  }
}

See näide demonstreerib, kuidas käsitleda GET- ja POST-päringuid hüpoteetilise /api/todos lõpp-punkti jaoks. See sisaldab ka veatöötlust toetamata meetodite jaoks.

Täislahenduse arendusmustrid API marsruutidega

Next.js API marsruudid võimaldavad erinevaid täislahenduse arendusmustreid. Siin on mõned levinumad kasutusjuhud:

1. Andmete pärimine ja manipuleerimine

API marsruute saab kasutada andmete pärimiseks andmebaasidest, välistest API-dest või muudest andmeallikatest. Neid saab kasutada ka andmete manipuleerimiseks, näiteks kirjete loomiseks, värskendamiseks või kustutamiseks.

Näide: kasutajaandmete pärimine andmebaasist


// 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: 'Kasutajat ei leitud' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Sisemine serveri viga' });
  }
}

See näide pärib kasutaja andmed andmebaasist URL-is antud kasutaja ID alusel. See kasutab andmebaasiga suhtlemiseks andmebaasi päringuteeki (eeldatavasti asukohas lib/db). Pange tähele parameetritega päringute kasutamist SQL-i süstimise haavatavuste vältimiseks.

2. Autentimine ja autoriseerimine

API marsruute saab kasutada autentimise ja autoriseerimise loogika rakendamiseks. Saate neid kasutada kasutaja sisselogimisandmete kontrollimiseks, JWT-märkide genereerimiseks ja tundlike ressursside kaitsmiseks.

Näide: kasutaja autentimine


// 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: 'Valed sisselogimisandmed' });
      }

      const user = results[0];

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

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

      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: 'Sisemine serveri viga' });
    }
  } else {
    res.status(405).json({ message: 'Meetod pole lubatud' });
  }
}

See näide autendib kasutajaid, võrreldes esitatud parooli andmebaasis salvestatud räsitud parooliga. Kui sisselogimisandmed on kehtivad, genereerib see JWT-märgi ja tagastab selle kliendile. Klient saab seejärel seda märki kasutada järgnevate päringute autentimiseks.

3. Vormide käsitlemine ja andmete edastamine

API marsruute saab kasutada vormide edastamise käsitlemiseks ja kliendilt saadetud andmete töötlemiseks. See on kasulik kontaktivormide, registreerimisvormide ja muude interaktiivsete elementide loomiseks.

Näide: kontaktivormi edastamine


// 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: 'Uus kontaktivormi saadetis',
        text: `Nimi: ${name}\nE-post: ${email}\nSõnum: ${message}`,
      });

      res.status(200).json({ message: 'E-kiri edukalt saadetud' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'E-kirja saatmine ebaõnnestus' });
    }
  } else {
    res.status(405).json({ message: 'Meetod pole lubatud' });
  }
}

See näide käsitleb kontaktivormi edastamist, saates administraatorile e-kirja. See kasutab e-kirja saatmiseks e-kirjade saatmise teeki (eeldatavasti asukohas lib/email). Peaksite asendama admin@example.com tegeliku saaja e-posti aadressiga.

4. Veebikonksud ja sündmuste käsitlemine

API marsruute saab kasutada veebikonksude käsitlemiseks ja välistest teenustest tulevatele sündmustele reageerimiseks. See võimaldab teil integreerida oma Next.js rakenduse teiste platvormidega ja automatiseerida ülesandeid.

Näide: Stripe'i veebikonksu käsitlemine


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

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

export const config = {
  api: {
    bodyParser: false, // Keela vaikimisi keha parsimine
  },
};

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

    // Käsitle sündmust
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`Maksekavatsus summas ${paymentIntent.amount} oli edukas!`);
        // Seejärel defineerige ja kutsuge välja meetod eduka maksekavatsuse käsitlemiseks.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // Seejärel defineerige ja kutsuge välja meetod eduka makseviisi lisamise käsitlemiseks.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // Ootamatu sündmuse tüüp
        console.log(`Käsitlemata sündmuse tüüp ${event.type}.`);
    }

    // Tagastage 200 vastus sündmuse kättesaamise kinnitamiseks
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Meetod pole lubatud');
  }
}

See näide käsitleb Stripe'i veebikonksu, kontrollides allkirja ja töödeldes sündmuse andmeid. See keelab vaikimisi keha parseri ja kasutab toore päringu keha lugemiseks kohandatud puhverfunktsiooni. Vaikimisi keha parseri keelamine on ülioluline, sest Stripe nõuab allkirja kontrollimiseks toorest keha. Ärge unustage konfigureerida oma Stripe'i veebikonksu lõpp-punkti Stripe'i armatuurlaual ja seadistada keskkonnamuutuja STRIPE_WEBHOOK_SECRET.

API marsruutide parimad praktikad

Oma API marsruutide kvaliteedi ja hooldatavuse tagamiseks järgige neid parimaid praktikaid:

1. Moduleerige oma koodi

Vältige suurte, monoliitsete API marsruutide kirjutamist. Selle asemel jaotage oma kood väiksemateks, korduvkasutatavateks mooduliteks. See muudab teie koodi lihtsamini mõistetavaks, testitavaks ja hooldatavaks.

2. Rakendage veatöötlust

Käsitlege vigu oma API marsruutides nõuetekohaselt. Kasutage erandite püüdmiseks try...catch plokke ja tagastage kliendile asjakohased veavastused. Logige vigu, et aidata silumisel ja jälgimisel.

3. Valideerige sisendandmeid

Valideerige alati kliendilt saadud sisendandmeid, et vältida turvaauke ja tagada andmete terviklikkus. Kasutage valideerimisteeke nagu Joi või Yup, et defineerida valideerimisskeeme ja jõustada andmepiiranguid.

4. Kaitske tundlikke andmeid

Salvestage tundlikke andmeid, nagu API-võtmed ja andmebaasi sisselogimisandmed, keskkonnamuutujatesse. Ärge kunagi lisage tundlikke andmeid oma koodihoidlasse.

5. Rakendage päringute piiramist (Rate Limiting)

Kaitske oma API marsruute kuritarvitamise eest, rakendades päringute piiramist. See piirab päringute arvu, mida klient saab teatud aja jooksul teha. Kasutage päringute piiramise teeke nagu express-rate-limit või limiter.

6. Turvake API-võtmed

Ärge paljastage API-võtmeid otse kliendipoolses koodis. Suunake päringud alati läbi oma API marsruutide, et kaitsta oma API-võtmeid volitamata juurdepääsu eest. Salvestage API-võtmed turvaliselt oma serveri keskkonnamuutujatesse.

7. Kasutage keskkonnamuutujaid

Vältige konfiguratsiooniväärtuste otse koodi kirjutamist. Selle asemel kasutage konfiguratsiooniseadete salvestamiseks keskkonnamuutujaid. See muudab teie rakenduse haldamise erinevates keskkondades (arendus, testimine, tootmine) lihtsamaks.

8. Logimine ja jälgimine

Rakendage logimist ja jälgimist, et jälgida oma API marsruutide jõudlust. Logige olulisi sündmusi, nagu vead, hoiatused ja edukad päringud. Kasutage jälgimisvahendeid, et jälgida mõõdikuid nagu päringu latentsusaeg, veamäärad ja ressursikasutus. Teenused nagu Sentry, Datadog või New Relic võivad olla abiks.

Juurutamise kaalutlused

Next.js API marsruudid on mõeldud juurutamiseks serverivabadel platvormidel. Populaarsed juurutamisvõimalused hõlmavad:

Vercel: Vercel on soovitatav platvorm Next.js rakenduste juurutamiseks. See pakub sujuvat integratsiooni Next.js-iga ja optimeerib teie rakenduse automaatselt jõudluse jaoks.
Netlify: Netlify on teine populaarne serverivaba platvorm, mis toetab Next.js juurutusi. See pakub Verceliga sarnaseid funktsioone, nagu automaatsed juurutused ja CDN-integratsioon.
AWS Lambda: AWS Lambda on serverivaba arvutusteenus, mis võimaldab teil käivitada koodi ilma servereid ette valmistamata või haldamata. Saate oma Next.js API marsruute juurutada Lambda funktsioonidena, kasutades tööriistu nagu Serverless Framework või AWS SAM.
Google Cloud Functions: Google Cloud Functions on serverivaba täitmiskeskkond, mis võimaldab teil luua ja ühendada pilveteenuseid. Saate oma Next.js API marsruute juurutada Cloud Functions funktsioonidena, kasutades tööriistu nagu Firebase CLI või Google Cloud SDK.
Azure Functions: Azure Functions on serverivaba arvutusteenus, mis võimaldab teil käivitada koodi vastavalt vajadusele ilma infrastruktuuri haldamata. Saate oma Next.js API marsruute juurutada Azure Functions funktsioonidena, kasutades tööriistu nagu Azure Functions Core Tools või Azure CLI.

Kui juurutate oma Next.js rakendust koos API marsruutidega, veenduge, et teie keskkonnamuutujad oleksid juurutusplatvormil õigesti konfigureeritud. Samuti arvestage serverivabade funktsioonide külmkäivituse ajaga, mis võib mõjutada teie API marsruutide esialgset vastamisaega. Koodi optimeerimine ja tehnikate, nagu provisioned concurrency, kasutamine võib aidata külmkäivituse probleeme leevendada.

Kokkuvõte

Next.js API marsruudid pakuvad võimsat ja mugavat viisi täislahendusega rakenduste loomiseks Reactiga. Kasutades serverivabasid funktsioone, saate lihtsustada arendust, vähendada operatiivkulusid ja parandada rakenduse jõudlust. Järgides selles artiklis kirjeldatud parimaid praktikaid, saate luua tugevaid ja hooldatavaid API marsruute, mis toidavad teie Next.js rakendusi.

Olenemata sellest, kas loote lihtsat kontaktivormi või keerulist e-kaubanduse platvormi, aitavad Next.js API marsruudid teil arendusprotsessi sujuvamaks muuta ja pakkuda erakordseid kasutajakogemusi.

MLOG