M

MLOG

Suomi

Tutustu Next.js API -reitteihin ja avaa full-stack-kehitysmahdollisuudet React-sovelluksissasi. Opi malleja, parhaita käytäntöjä ja käyttöönottostrategioita.

Next.js API -reitit: Full-Stack-kehitysmallit

Next.js on mullistanut React-kehityksen tarjoamalla vankan kehyksen suorituskykyisten ja skaalautuvien web-sovellusten rakentamiseen. Yksi sen keskeisistä ominaisuuksista on API-reitit, joiden avulla kehittäjät voivat luoda backend-toiminnallisuutta suoraan Next.js-projekteihinsa. Tämä lähestymistapa virtaviivaistaa kehitystä, yksinkertaistaa käyttöönottoa ja avaa tehokkaita full-stack-ominaisuuksia.

Mitä Next.js API -reitit ovat?

Next.js API -reitit ovat palvelimettomia funktioita, jotka on kirjoitettu suoraan /pages/api -hakemistossasi. Jokaisesta tässä hakemistossa olevasta tiedostosta tulee API-päätepiste, joka ohjaa automaattisesti HTTP-pyynnöt vastaavaan funktioonsa. Tämä eliminoi erillisen backend-palvelimen tarpeen, yksinkertaistaa sovellusarkkitehtuuriasi ja vähentää operatiivisia kustannuksia.

Ajattele niitä pienoiskokoisina palvelimettomina funktioina, jotka sijaitsevat Next.js-sovelluksesi sisällä. Ne vastaavat HTTP-pyyntöihin, kuten GET, POST, PUT, DELETE, ja voivat olla vuorovaikutuksessa tietokantojen, ulkoisten API:iden ja muiden palvelinpuolen resurssien kanssa. Ratkaisevasti ne suoritetaan vain palvelimella, ei käyttäjän selaimessa, mikä varmistaa arkaluonteisten tietojen, kuten API-avaimien, turvallisuuden.

API-reittien keskeiset edut

API-reittien käytön aloittaminen

API-reitin luominen Next.js:ssä on suoraviivaista. Luo vain uusi tiedosto /pages/api -hakemistoon. Tiedoston nimi määrittää reitin polun. Esimerkiksi tiedoston nimeltä /pages/api/hello.js luominen luo API-päätepisteen, johon pääsee osoitteessa /api/hello.

Esimerkki: Yksinkertainen tervehdys-API

Tässä on perustason esimerkki API-reitistä, joka palauttaa JSON-vastauksen:


// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hei Next.js API -reitiltä!' });
}

Tämä koodi määrittelee asynkronisen funktion handler, joka saa kaksi argumenttia:

Funktio asettaa HTTP-tilakoodin arvoon 200 (OK) ja palauttaa JSON-vastauksen, jossa on viesti.

Eri HTTP-metodien käsittely

Voit käsitellä eri HTTP-metodeja (GET, POST, PUT, DELETE jne.) API-reitilläsi tarkistamalla req.method -ominaisuuden. Tämän avulla voit luoda RESTful-API:ita helposti.


// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // Hae kaikki tehtävät tietokannasta
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // Luo uusi tehtävä
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // Käsittele tukemattomat metodit
    res.status(405).json({ message: 'Metodi ei sallittu' });
  }
}

Tämä esimerkki osoittaa, kuinka käsitellä GET- ja POST-pyyntöjä hypoteettiselle /api/todos -päätepisteelle. Se sisältää myös virheenkäsittelyn tukemattomille metodeille.

Full-Stack-kehitysmallit API-reiteillä

Next.js API -reitit mahdollistavat erilaisia full-stack-kehitysmalleja. Tässä on joitain yleisiä käyttötapauksia:

1. Tietojen hakeminen ja manipulointi

API-reittejä voidaan käyttää tietojen hakemiseen tietokannoista, ulkoisista API:ista tai muista tietolähteistä. Niitä voidaan käyttää myös tietojen manipulointiin, kuten tietueiden luomiseen, päivittämiseen tai poistamiseen.

Esimerkki: Käyttäjätietojen hakeminen tietokannasta


// 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: 'Käyttäjää ei löydy' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Sisäinen palvelinvirhe' });
  }
}

Tämä esimerkki hakee käyttäjätietoja tietokannasta URL-osoitteessa annetun käyttäjätunnuksen perusteella. Se käyttää tietokantakyselykirjastoa (oletettavasti lib/db:ssä) vuorovaikutukseen tietokannan kanssa. Huomaa parametroituja kyselyjä SQL-injektiohaavoittuvuuksien estämiseksi.

2. Autentikointi ja valtuutus

API-reittejä voidaan käyttää autentikointi- ja valtuutuslogiikan toteuttamiseen. Voit käyttää niitä käyttäjätietojen tarkistamiseen, JWT-tunnusten luomiseen ja arkaluonteisten resurssien suojaamiseen.

Esimerkki: Käyttäjän autentikointi


// 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: 'Virheelliset tunnistetiedot' });
      }

      const user = results[0];

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

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

      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: 'Sisäinen palvelinvirhe' });
    }
  } else {
    res.status(405).json({ message: 'Metodi ei sallittu' });
  }
}

Tämä esimerkki todennus käyttäjät vertaamalla annetun salasanan kanssa tallennettua hashattua salasanaa tietokantaan. Jos tunnistetiedot ovat voimassa, se luo JWT-tunnuksen ja palauttaa sen asiakkaalle. Asiakas voi sitten käyttää tätä tunnistetta todennukseen myöhemmissä pyynnöissä.

3. Lomakkeiden käsittely ja tietojen lähettäminen

API-reittejä voidaan käyttää lomakkeiden lähettämisen käsittelyyn ja asiakkaalta lähetettyjen tietojen käsittelyyn. Tämä on hyödyllistä kontaktilomakkeiden, rekisteröintilomakkeiden ja muiden interaktiivisten elementtien luomisessa.

Esimerkki: Yhteyslomakkeen lähettäminen


// 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: 'Uusi yhteyslomakkeen lähetys',
        text: `Nimi: ${name}\nSähköposti: ${email}\nViesti: ${message}`,
      });

      res.status(200).json({ message: 'Sähköposti lähetetty onnistuneesti' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Sähköpostin lähettäminen epäonnistui' });
    }
  } else {
    res.status(405).json({ message: 'Metodi ei sallittu' });
  }
}

Tämä esimerkki käsittelee yhteyslomakkeen lähettämisen lähettämällä sähköpostin järjestelmänvalvojalle. Se käyttää sähköpostin lähetyskirjastoa (oletettavasti lib/email:ssä) sähköpostin lähettämiseen. Korvaa admin@example.com todellisella vastaanottajan sähköpostiosoitteella.

4. Webhookit ja tapahtumien käsittely

API-reittejä voidaan käyttää webhookien käsittelyyn ja vastaamiseen ulkoisten palvelujen tapahtumiin. Tämän avulla voit integroida Next.js-sovelluksesi muiden alustojen kanssa ja automatisoida tehtäviä.

Esimerkki: Stripe-webhookin käsittely


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

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

export const config = {
  api: {
    bodyParser: false, // Poista oletusarvoinen runkojen jäsennys
  },
};

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

    // Käsittele tapahtuma
    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');
  }
}

Tämä esimerkki käsittelee Stripe-webhookia tarkistamalla allekirjoituksen ja käsittelemällä tapahtumatietoja. Se poistaa oletusarvoisen runkojäsennys-funktion ja käyttää mukautettua puskurifunktiota lukemaan raakapyynnön rungon. On erittäin tärkeää poistaa oletusarvoinen runkojäsennys, koska Stripe vaatii raakaruumiin allekirjoituksen tarkistusta varten. Muista konfiguroida Stripe-webhook-päätepisteesi Stripe-kojelaudassasi ja aseta STRIPE_WEBHOOK_SECRET -ympäristömuuttuja.

API-reittien parhaat käytännöt

Varmistaaksesi API-reittiesi laadun ja ylläpidettävyyden, noudata näitä parhaita käytäntöjä:

1. Modulaarisoi koodisi

Vältä suurten, monoliittisten API-reittien kirjoittamista. Jaa sen sijaan koodisi pienempiin, uudelleenkäytettäviin moduuleihin. Tämä tekee koodistasi helpommin ymmärrettävän, testattavan ja ylläpidettävän.

2. Toteuta virheiden käsittely

Käsittele virheet oikein API-reiteilläsi. Käytä try...catch -lohkoja poikkeusten sieppaamiseen ja palauta asiakkaalle sopivat virhevastaukset. Kirjaa virheet, jotta voit auttaa virheenkorjauksessa ja seurannassa.

3. Vahvista syötetiedot

Tarkista aina asiakkaalta tulevat syötetiedot turvallisuushaavoittuvuuksien estämiseksi ja tietojen eheyden varmistamiseksi. Käytä validointikirjastoja, kuten Joi tai Yup, validointiskeemojen määrittämiseen ja tietorajoitusten pakottamiseen.

4. Suojaa arkaluonteiset tiedot

Tallenna arkaluonteiset tiedot, kuten API-avaimet ja tietokannan tunnistetiedot, ympäristömuuttujiin. Älä koskaan lähetä arkaluonteisia tietoja koodivarastoosi.

5. Toteuta nopeusrajoitus

Suojaa API-reitit väärinkäytöltä toteuttamalla nopeusrajoitus. Tämä rajoittaa pyyntöjen määrää, jonka asiakas voi tehdä tietyn ajanjakson aikana. Käytä nopeusrajoituskirjastoja, kuten express-rate-limit tai limiter.

6. Suojaa API-avaimet

Älä paljasta API-avaimia suoraan asiakaspuolen koodissa. Välitä aina pyynnöt API-reittiesi kautta suojataksesi API-avaimiasi luvattomalta pääsyltä. Tallenna API-avaimet turvallisesti ympäristömuuttujiin palvelimellasi.

7. Käytä ympäristömuuttujia

Vältä konfiguraatioarvojen kovakoodausta koodissasi. Käytä sen sijaan ympäristömuuttujia konfigurointiasetusten tallentamiseen. Tämä helpottaa sovelluksesi hallintaa eri ympäristöissä (kehitys, vaiheistus, tuotanto).

8. Lokitus ja seuranta

Toteuta lokitus ja seuranta API-reittiesi suorituskyvyn seuraamiseksi. Kirjaa tärkeitä tapahtumia, kuten virheitä, varoituksia ja onnistuneita pyyntöjä. Käytä seurantatyökaluja mittareiden, kuten pyyntöjen viiveen, virhetaajuuksien ja resurssien käytön, seuraamiseen. Palvelut, kuten Sentry, Datadog tai New Relic, voivat olla hyödyllisiä.

Käyttöönottoon liittyvät huomiot

Next.js API -reitit on suunniteltu otettavaksi käyttöön palvelimattomilla alustoilla. Suosittuja käyttöönottovaihtoehtoja ovat:

Kun otat Next.js-sovelluksesi käyttöön API-reiteillä, varmista, että ympäristömuuttujat on määritetty oikein käyttöönottopalvelimella. Ota myös huomioon palvelimettomien toimintojen kylmäkäynnistysaika, joka voi vaikuttaa API-reittien alkuperäiseen vasteaikaan. Koodin optimointi ja tekniikat, kuten provisioned concurrency, voivat auttaa lieventämään kylmäkäynnistysongelmia.

Johtopäätös

Next.js API -reitit tarjoavat tehokkaan ja kätevän tavan rakentaa full-stack-sovelluksia Reactilla. Hyödyntämällä palvelimettomia funktioita voit yksinkertaistaa kehitystä, vähentää operatiivisia kustannuksia ja parantaa sovelluksen suorituskykyä. Noudattamalla tässä artikkelissa esitettyjä parhaita käytäntöjä voit luoda vankkoja ja ylläpidettäviä API-reittejä, jotka tehostavat Next.js-sovelluksiasi.

Riippumatta siitä, rakennatko yksinkertaista yhteyslomaketta tai monimutkaista verkkokauppaa, Next.js API -reitit voivat auttaa sinua tehostamaan kehitysprosessiasi ja tarjoamaan poikkeuksellisia käyttökokemuksia.

Lisäoppimista