M

MLOG

Hrvatski

Istražite Next.js API Rute i otključajte full-stack razvojne mogućnosti unutar svojih React aplikacija. Naučite obrasce, najbolje prakse i strategije implementacije.

Next.js API Rute: Full-Stack Razvojni Obrasci

Next.js je revolucionirao React razvoj pružajući robustan okvir za izgradnju web aplikacija visokih performansi i skalabilnosti. Jedna od njegovih ključnih značajki su API Rute, koje omogućuju programerima stvaranje backend funkcionalnosti izravno unutar svojih Next.js projekata. Ovaj pristup pojednostavljuje razvoj, olakšava implementaciju i otključava snažne full-stack mogućnosti.

Što su Next.js API Rute?

Next.js API Rute su serverless funkcije napisane izravno unutar vašeg /pages/api direktorija. Svaka datoteka u ovom direktoriju postaje API endpoint, automatski usmjeravajući HTTP zahtjeve na odgovarajuću funkciju. Ovo eliminira potrebu za zasebnim backend serverom, pojednostavljujući arhitekturu vaše aplikacije i smanjujući operativne troškove.

Zamislite ih kao minijaturne serverless funkcije koje žive unutar vaše Next.js aplikacije. One odgovaraju na HTTP zahtjeve poput GET, POST, PUT, DELETE i mogu komunicirati s bazama podataka, vanjskim API-jima i drugim server-side resursima. Ključno je da se izvode samo na serveru, a ne u korisnikovom pregledniku, osiguravajući sigurnost osjetljivih podataka poput API ključeva.

Ključne Prednosti API Ruta

Početak s API Rutama

Stvaranje API rute u Next.js je jednostavno. Jednostavno stvorite novu datoteku unutar /pages/api direktorija. Naziv datoteke će odrediti put rute. Na primjer, stvaranje datoteke pod nazivom /pages/api/hello.js će stvoriti API endpoint dostupan na /api/hello.

Primjer: Jednostavan API za Pozdrav

Evo osnovnog primjera API rute koja vraća JSON odgovor:


// pages/api/hello.js

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

Ovaj kod definira asinkronu funkciju handler koja prima dva argumenta:

Funkcija postavlja HTTP statusni kod na 200 (OK) i vraća JSON odgovor s porukom.

Rukovanje Različitim HTTP Metodama

Možete rukovati različitim HTTP metodama (GET, POST, PUT, DELETE, itd.) unutar svoje API rute provjerom svojstva req.method. To vam omogućuje jednostavno stvaranje RESTful API-ja.


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

Ovaj primjer pokazuje kako rukovati GET i POST zahtjevima za hipotetski /api/todos endpoint. Također uključuje rukovanje pogreškama za nepodržane metode.

Full-Stack Razvojni Obrasci s API Rutama

Next.js API Rute omogućuju različite full-stack razvojne obrasce. Evo nekoliko uobičajenih slučajeva upotrebe:

1. Dohvaćanje i Manipulacija Podacima

API Rute se mogu koristiti za dohvaćanje podataka iz baza podataka, vanjskih API-ja ili drugih izvora podataka. Također se mogu koristiti za manipulaciju podacima, kao što je stvaranje, ažuriranje ili brisanje zapisa.

Primjer: Dohvaćanje Podataka o Korisniku iz Baze Podataka


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

Ovaj primjer dohvaća podatke o korisniku iz baze podataka na temelju ID-a korisnika navedenog u URL-u. Koristi biblioteku za upite baze podataka (pretpostavlja se da je u lib/db) za interakciju s bazom podataka. Obratite pažnju na upotrebu parametriziranih upita kako biste spriječili ranjivosti na SQL injection.

2. Autentifikacija i Autorizacija

API Rute se mogu koristiti za implementaciju logike autentifikacije i autorizacije. Možete ih koristiti za provjeru korisničkih vjerodajnica, generiranje JWT tokena i zaštitu osjetljivih resursa.

Primjer: Korisnička Autentifikacija


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

Ovaj primjer autentificira korisnike uspoređujući unesenu lozinku s pohranjenom hashiranom lozinkom u bazi podataka. Ako su vjerodajnice valjane, generira JWT token i vraća ga klijentu. Klijent zatim može koristiti ovaj token za autentifikaciju kasnijih zahtjeva.

3. Obrada Obrazaca i Slanje Podataka

API Rute se mogu koristiti za obradu slanja obrazaca i obradu podataka poslanih od klijenta. Ovo je korisno za stvaranje kontakt obrazaca, obrazaca za registraciju i drugih interaktivnih elemenata.

Primjer: Slanje Kontakt Obrasca


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

Ovaj primjer obrađuje slanje kontakt obrasca slanjem e-pošte administratoru. Koristi biblioteku za slanje e-pošte (pretpostavlja se da je u lib/email) za slanje e-pošte. Trebali biste zamijeniti admin@example.com sa stvarnom adresom e-pošte primatelja.

4. Webhooks i Rukovanje Događajima

API Rute se mogu koristiti za rukovanje webhookovima i odgovaranje na događaje s vanjskih servisa. To vam omogućuje integraciju vaše Next.js aplikacije s drugim platformama i automatizaciju zadataka.

Primjer: Rukovanje Stripe Webhookom


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

Ovaj primjer obrađuje Stripe webhook provjerom potpisa i obradom podataka događaja. Onemogućuje zadani parser tijela i koristi prilagođenu funkciju međuspremnika za čitanje sirovog tijela zahtjeva. Ključno je onemogućiti zadani parser tijela jer Stripe zahtijeva sirovo tijelo za provjeru potpisa. Ne zaboravite konfigurirati svoju Stripe webhook endpoint u svojoj Stripe nadzornoj ploči i postaviti varijablu okruženja STRIPE_WEBHOOK_SECRET.

Najbolje Prakse za API Rute

Da biste osigurali kvalitetu i održivost svojih API Ruta, slijedite ove najbolje prakse:

1. Modularizirajte Svoj Kod

Izbjegavajte pisanje velikih, monolitnih API ruta. Umjesto toga, razdvojite svoj kod na manje, višekratne module. To čini vaš kod lakšim za razumijevanje, testiranje i održavanje.

2. Implementirajte Rukovanje Pogreškama

Pravilno rukujte pogreškama u svojim API rutama. Koristite try...catch blokove za hvatanje iznimki i vraćanje odgovarajućih odgovora o pogreškama klijentu. Zabilježite pogreške kako biste lakše otklonili poteškoće i nadzirali.

3. Validirajte Ulazne Podatke

Uvijek validirajte ulazne podatke od klijenta kako biste spriječili sigurnosne ranjivosti i osigurali integritet podataka. Koristite biblioteke za validaciju kao što su Joi ili Yup za definiranje shema validacije i provođenje ograničenja podataka.

4. Zaštitite Osjetljive Podatke

Pohranite osjetljive podatke, kao što su API ključevi i vjerodajnice baze podataka, u varijable okruženja. Nikada nemojte spremati osjetljive podatke u svoje spremište koda.

5. Implementirajte Ograničenje Stope

Zaštitite svoje API rute od zlouporabe implementacijom ograničenja stope. Ovo ograničava broj zahtjeva koje klijent može uputiti u danom vremenskom razdoblju. Koristite biblioteke za ograničenje stope kao što su express-rate-limit ili limiter.

6. Osigurajte API Ključeve

Nemojte izlagati API ključeve izravno u klijentskom kodu. Uvijek posredujte zahtjeve putem svojih API ruta kako biste zaštitili svoje API ključeve od neovlaštenog pristupa. Sigurno pohranite API ključeve u varijable okruženja na svom serveru.

7. Koristite Varijable Okruženja

Izbjegavajte hardkodiranje konfiguracijskih vrijednosti u svom kodu. Umjesto toga, koristite varijable okruženja za pohranu konfiguracijskih postavki. To olakšava upravljanje vašom aplikacijom u različitim okruženjima (razvoj, staging, produkcija).

8. Zapisivanje i Nadzor

Implementirajte zapisivanje i nadzor kako biste pratili performanse svojih API ruta. Zabilježite važne događaje, kao što su pogreške, upozorenja i uspješni zahtjevi. Koristite alate za nadzor za praćenje metrika kao što su latencija zahtjeva, stope pogrešaka i korištenje resursa. Usluge poput Sentry, Datadog ili New Relic mogu biti korisne.

Razmatranja o Implementaciji

Next.js API Rute su dizajnirane za implementaciju na serverless platformama. Popularne opcije implementacije uključuju:

Prilikom implementacije svoje Next.js aplikacije s API Rutama, provjerite jesu li vaše varijable okruženja pravilno konfigurirane na platformi za implementaciju. Također, razmotrite vrijeme hladnog pokretanja serverless funkcija, što može utjecati na početno vrijeme odziva vaših API ruta. Optimizacija vašeg koda i korištenje tehnika poput osigurane konkurentnosti može pomoći u ublažavanju problema s hladnim pokretanjem.

Zaključak

Next.js API Rute pružaju snažan i praktičan način za izgradnju full-stack aplikacija s Reactom. Korištenjem serverless funkcija možete pojednostaviti razvoj, smanjiti operativne troškove i poboljšati performanse aplikacije. Slijedeći najbolje prakse navedene u ovom članku, možete stvoriti robusne i održive API Rute koje pokreću vaše Next.js aplikacije.

Bez obzira gradite li jednostavan kontakt obrazac ili složenu platformu za e-trgovinu, Next.js API Rute vam mogu pomoći da pojednostavite svoj razvojni proces i pružite iznimna korisnička iskustva.

Daljnje Učenje