M

MLOG

Hrvatski

Naučite kako iskoristiti Next.js API Rute za izgradnju 'serverless' backendova izravno unutar vaše Next.js aplikacije. Vodič pokriva sve od osnova do naprednih tehnika.

Next.js API Rute: Jednostavna Izgradnja Backenda

Next.js je revolucionirao front-end razvoj svojim moćnim značajkama i intuitivnom strukturom. Ali jeste li znali da može značajno pojednostaviti i backend razvoj? Next.js API Rute omogućuju vam stvaranje 'serverless' API endpointa izravno unutar vaše Next.js aplikacije, eliminirajući u mnogim slučajevima potrebu za zasebnim backend poslužiteljem. Ovaj sveobuhvatni vodič provest će vas kroz proces izgradnje robusnog i skalabilnog backenda koristeći Next.js API Rute.

Što su Next.js API Rute?

API Rute su 'serverless' funkcije koje stvarate unutar direktorija /pages/api u vašem Next.js projektu. Ove funkcije obrađuju dolazne HTTP zahtjeve i vraćaju odgovore, baš kao i tradicionalni backend API. Ključna razlika je u tome što se implementiraju kao 'serverless' funkcije, što znači da ne morate upravljati poslužiteljima ili infrastrukturom.

Zamislite ih kao lagane, 'on-demand' backend funkcije koje su besprijekorno integrirane s vašim Next.js front-endom.

Prednosti korištenja Next.js API Ruta

Početak rada s Next.js API Rutama

Kreirajmo jednostavnu API rutu koja vraća JSON odgovor. Prvo, provjerite imate li postavljen Next.js projekt. Ako nemate, stvorite ga pomoću:

npx create-next-app my-app
cd my-app

Sada, stvorite datoteku naziva hello.js unutar direktorija /pages/api:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Ovaj kod definira jednostavnu API rutu koja odgovara s JSON objektom koji sadrži ime "John Doe". Da biste pristupili ovoj API ruti, pokrenite svoj Next.js razvojni poslužitelj:

npm run dev

Zatim, otvorite svoj preglednik i idite na http://localhost:3000/api/hello. Trebali biste vidjeti sljedeći JSON odgovor:

{"name": "John Doe"}

Razumijevanje API Route Handlera

Funkcija handler u vašoj API ruti prima dva argumenta:

Možete koristiti ove objekte za rukovanje različitim vrstama zahtjeva, čitanje podataka iz tijela zahtjeva, postavljanje zaglavlja odgovora i slanje različitih vrsta odgovora.

Rukovanje različitim HTTP metodama

Možete koristiti svojstvo req.method kako biste odredili HTTP metodu dolaznog zahtjeva i sukladno tome rukovali različitim metodama. Na primjer:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Handle GET request
    res.status(200).json({ message: 'This is a GET request' })
  } else if (req.method === 'POST') {
    // Handle POST request
    res.status(200).json({ message: 'This is a POST request' })
  } else {
    // Handle other methods
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

U ovom primjeru, API ruta obrađuje i GET i POST zahtjeve. Ako je metoda zahtjeva GET, odgovara s JSON objektom koji sadrži poruku "This is a GET request". Ako je metoda zahtjeva POST, odgovara s JSON objektom koji sadrži poruku "This is a POST request". Ako je metoda zahtjeva bilo što drugo, odgovara s greškom 405 Method Not Allowed.

Čitanje podataka iz tijela zahtjeva

Za POST, PUT i PATCH zahtjeve, često trebate čitati podatke iz tijela zahtjeva. Next.js pruža ugrađenu podršku za parsiranje JSON i URL-enkodiranih tijela zahtjeva. Za parsiranje JSON tijela zahtjeva, možete koristiti svojstvo req.body. Na primjer:

// pages/api/post.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body

    // Process the data
    console.log('Name:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Data received successfully' })
  } else {
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

Da biste testirali ovu API rutu, možete koristiti alat poput Postmana ili curl-a za slanje POST zahtjeva s JSON tijelom:

curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post

Postavljanje zaglavlja odgovora

Možete koristiti metodu res.setHeader() za postavljanje zaglavlja odgovora. Ovo je korisno za postavljanje vrste sadržaja, kontrole predmemorije (cache control) i drugih važnih informacija. Na primjer:

// pages/api/headers.js
export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.setHeader('Cache-Control', 's-maxage=3600')
  res.status(200).json({ message: 'Hello, world!' })
}

U ovom primjeru, API ruta postavlja zaglavlje Content-Type na application/json, što ukazuje da je odgovor JSON objekt. Također postavlja zaglavlje Cache-Control na s-maxage=3600, što govori pregledniku i CDN-u da predmemoriraju odgovor do 1 sat.

Rukovanje greškama

Važno je graciozno rukovati greškama u vašim API rutama. Možete koristiti try-catch blokove za hvatanje iznimaka i slanje odgovarajućih poruka o greškama klijentu. Na primjer:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simulate an error
    throw new Error('Something went wrong')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internal Server Error' })
  }
}

U ovom primjeru, API ruta simulira grešku bacanjem novog Error objekta. Catch blok hvata grešku, bilježi je u konzoli i šalje odgovor 500 Internal Server Error klijentu. Razmislite o korištenju robusnog sustava za bilježenje (logging) poput Sentryja ili Datadoga za produkcijska okruženja.

Spajanje na bazu podataka

Jedan od najčešćih slučajeva upotrebe API ruta je spajanje na bazu podataka. Next.js API Rute se besprijekorno integriraju s različitim bazama podataka, uključujući:

Evo primjera kako se spojiti na MongoDB bazu podataka u Next.js API ruti:

// pages/api/mongodb.js
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('Please add your Mongo URI to .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // U razvojnom načinu, koristite globalnu varijablu kako bi se vrijednost
  // sačuvala između ponovnih učitavanja modula uzrokovanih HMR-om (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // U produkcijskom načinu, najbolje je ne koristiti globalnu varijablu.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Izvezite MongoClient promise s dosegom modula. Radeći ovo u
// odvojenom modulu, klijent se može sigurno ponovno koristiti u više
// funkcija.  Pogledajte: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
  try {
    const client = await clientPromise
    const db = client.db(process.env.MONGODB_DB)
    const collection = db.collection('users')

    const users = await collection.find({}).toArray()

    res.status(200).json({ users })
  } catch (e) {
    console.error(e)
    res.status(500).json({ message: 'Failed to fetch users' })
  }
}

Prije pokretanja ovog koda, provjerite imate li instaliran paket mongodb:

npm install mongodb

Također trebate postaviti varijable okruženja MONGODB_URI i MONGODB_DB. Ove varijable trebaju biti definirane u vašoj datoteci .env.local (ili u postavkama varijabli okruženja vašeg hosting providera za produkciju). MONGODB_URI sadrži connection string za vašu MongoDB bazu podataka, a MONGODB_DB specificira naziv baze podataka.

Autentifikacija i autorizacija

Zaštita vaših API ruta ključna je za sigurnost. Next.js API Rute mogu se osigurati pomoću različitih tehnika autentifikacije i autorizacije, uključujući:

Evo primjera kako zaštititi API rutu koristeći JWT autentifikaciju:

// pages/api/protected.js
import jwt from 'jsonwebtoken'

const secret = process.env.JWT_SECRET

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1]

  if (!token) {
    return res.status(401).json({ message: 'Unauthorized' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded" objekt sadrži korisničke informacije ugrađene u token
    // Na primjer: const userId = decoded.userId;

    // Nastavite s obradom zahtjeva
    res.status(200).json({ message: 'Protected resource accessed successfully' })
  } catch (error) {
    return res.status(401).json({ message: 'Invalid token' })
  }
}

Prije pokretanja ovog koda, provjerite imate li instaliran paket jsonwebtoken:

npm install jsonwebtoken

Također trebate postaviti varijablu okruženja JWT_SECRET. To bi trebao biti snažan, nasumično generiran tajni ključ koji se koristi za potpisivanje i provjeru JWT-ova. Pohranite ga sigurno i nikada ga ne izlažite u svom kodu na strani klijenta.

Middleware

Iako Next.js ne nudi tradicionalni middleware za API rute na isti način kao Express.js, možete postići sličnu funkcionalnost omotavanjem vaših handlera API ruta s ponovno iskoristivim funkcijama. To vam omogućuje izvršavanje zadataka kao što su:

Evo primjera kako stvoriti jednostavan middleware za bilježenje:

// utils/middleware.js
export function withLogging(handler) {
  return async function(req, res) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    return handler(req, res)
  }
}

Da biste koristili ovaj middleware, jednostavno omotajte svoj handler API rute s funkcijom withLogging:

// pages/api/logged.js
import { withLogging } from '../../utils/middleware'

async function handler(req, res) {
  res.status(200).json({ message: 'This request was logged' })
}

export default withLogging(handler)

Najbolje prakse za izgradnju Next.js API Ruta

Napredne tehnike

Pozadinski poslovi (Background Jobs)

Za dugotrajne zadatke koji ne bi trebali blokirati odgovor API-ja, razmislite o korištenju pozadinskih poslova. Možete koristiti biblioteke poput BullMQ ili Bree za upravljanje vašim pozadinskim poslovima i njihovu asinkronu obradu.

WebSockets

Za aplikacije u stvarnom vremenu, možete koristiti WebSockets u svojim Next.js API rutama. Biblioteke poput Socket.IO i ws olakšavaju uspostavljanje trajnih veza između klijenta i poslužitelja.

GraphQL

Ako trebate fleksibilniji i učinkovitiji način dohvaćanja podataka, razmislite o korištenju GraphQL-a. Možete koristiti biblioteke poput Apollo Servera ili Yoge za stvaranje GraphQL API endpointa u vašoj Next.js aplikaciji.

Zaključak

Next.js API Rute pružaju moćan i prikladan način za izgradnju 'serverless' backendova izravno unutar vaše Next.js aplikacije. Korištenjem prednosti 'serverless' arhitekture, možete pojednostaviti razvoj, poboljšati performanse i smanjiti troškove. Bilo da gradite jednostavan kontakt obrazac ili složenu platformu za e-trgovinu, Next.js API Rute mogu vam pomoći stvoriti robustan i skalabilan backend s lakoćom. S čvrstim razumijevanjem osnova i primjenom najboljih praksi, možete iskoristiti ovaj moćan alat za stvaranje učinkovitih, sigurnih i globalno dostupnih aplikacija.