M

MLOG

Slovenščina

Naučite se, kako uporabiti API poti v Next.js za gradnjo strežniških zaledij neposredno v vaši Next.js aplikaciji. Priročnik pokriva vse od osnovne postavitve do naprednih tehnik za avtentikacijo, shranjevanje podatkov in več.

API poti v Next.js: Enostavna gradnja vašega zaledja

Next.js je revolucioniral razvoj sprednjega dela (front-end) s svojimi zmogljivimi funkcijami in intuitivno strukturo. Ampak ali ste vedeli, da lahko znatno poenostavi tudi razvoj zaledja (backend)? API poti v Next.js vam omogočajo ustvarjanje brezstrežniških API končnih točk neposredno v vaši Next.js aplikaciji, kar v mnogih primerih odpravi potrebo po ločenem zalednem strežniku. Ta celovit vodnik vas bo popeljal skozi postopek gradnje robustnega in prilagodljivega zaledja z uporabo API poti v Next.js.

Kaj so API poti v Next.js?

API poti so brezstrežniške funkcije, ki jih ustvarite znotraj mape /pages/api v vašem Next.js projektu. Te funkcije obravnavajo dohodne HTTP zahteve in vračajo odgovore, tako kot tradicionalni zaledni API. Ključna razlika je v tem, da so nameščene kot brezstrežniške funkcije, kar pomeni, da vam ni treba upravljati strežnikov ali infrastrukture.

Predstavljajte si jih kot lahke zaledne funkcije na zahtevo, ki so brezhibno integrirane z vašim sprednjim delom v Next.js.

Prednosti uporabe API poti v Next.js

Kako začeti z API potmi v Next.js

Ustvarimo preprosto API pot, ki vrača JSON odgovor. Najprej se prepričajte, da imate nastavljen Next.js projekt. Če ga nimate, ga ustvarite z:

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

Sedaj ustvarite datoteko z imenom hello.js znotraj mape /pages/api:

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

Ta koda definira preprosto API pot, ki odgovori z JSON objektom, ki vsebuje ime "Janez Novak". Za dostop do te API poti zaženite vaš Next.js razvojni strežnik:

npm run dev

Nato odprite brskalnik in pojdite na http://localhost:3000/api/hello. Morali bi videti naslednji JSON odgovor:

{"name": "Janez Novak"}

Razumevanje obdelovalca API poti

Funkcija handler v vaši API poti prejme dva argumenta:

Te objekte lahko uporabite za obravnavo različnih vrst zahtev, branje podatkov iz telesa zahteve, nastavitev glav odgovora in pošiljanje različnih vrst odgovorov.

Obravnava različnih HTTP metod

Lastnost req.method lahko uporabite za določitev HTTP metode dohodne zahteve in ustrezno obravnavo različnih metod. Na primer:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Obravnava zahteve GET
    res.status(200).json({ message: 'To je GET zahteva' })
  } else if (req.method === 'POST') {
    // Obravnava zahteve POST
    res.status(200).json({ message: 'To je POST zahteva' })
  } else {
    // Obravnava drugih metod
    res.status(405).json({ message: 'Metoda ni dovoljena' })
  }
}

V tem primeru API pot obravnava tako zahteve GET kot POST. Če je metoda zahteve GET, odgovori z JSON objektom, ki vsebuje sporočilo "To je GET zahteva". Če je metoda zahteve POST, odgovori z JSON objektom, ki vsebuje sporočilo "To je POST zahteva". Če je metoda zahteve karkoli drugega, odgovori z napako 405 Metoda ni dovoljena.

Branje podatkov iz telesa zahteve

Za zahteve POST, PUT in PATCH pogosto potrebujete branje podatkov iz telesa zahteve. Next.js ponuja vgrajeno podporo za razčlenjevanje JSON in URL-kodiranih teles zahtev. Za razčlenjevanje JSON telesa zahteve lahko uporabite lastnost req.body. Na primer:

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

    // Obdelaj podatke
    console.log('Ime:', name)
    console.log('E-pošta:', email)

    res.status(200).json({ message: 'Podatki uspešno prejeti' })
  } else {
    res.status(405).json({ message: 'Metoda ni dovoljena' })
  }
}

Za testiranje te API poti lahko uporabite orodje, kot je Postman ali curl, za pošiljanje zahteve POST z JSON telesom:

curl -X POST -H "Content-Type: application/json" -d '{"name": "Jana Novak", "email": "jana.novak@example.com"}' http://localhost:3000/api/post

Nastavitev glav odgovora

Metodo res.setHeader() lahko uporabite za nastavitev glav odgovora. To je uporabno za nastavitev vrste vsebine, nadzora predpomnjenja in drugih pomembnih informacij. Na primer:

// 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: 'Pozdravljen, svet!' })
}

V tem primeru API pot nastavi glavo Content-Type na application/json, kar pomeni, da je odgovor JSON objekt. Prav tako nastavi glavo Cache-Control na s-maxage=3600, kar brskalniku in CDN-ju pove, naj odgovor predpomni za do 1 uro.

Obravnavanje napak

Pomembno je, da napake v svojih API poteh obravnavate elegantno. Uporabite lahko bloke try-catch za lovljenje izjem in pošiljanje ustreznih odgovorov o napakah odjemalcu. Na primer:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simuliraj napako
    throw new Error('Nekaj je šlo narobe')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Notranja napaka strežnika' })
  }
}

V tem primeru API pot simulira napako tako, da vrže nov objekt Error. Blok catch ujame napako, jo zapiše v konzolo in odjemalcu pošlje odgovor 500 Notranja napaka strežnika. Za produkcijska okolja razmislite o uporabi robustnega sistema za beleženje, kot sta Sentry ali Datadog.

Povezovanje s podatkovno bazo

Eden najpogostejših primerov uporabe API poti je povezovanje s podatkovno bazo. API poti v Next.js se brezhibno integrirajo z različnimi podatkovnimi bazami, vključno z:

Tukaj je primer, kako se povezati s podatkovno bazo MongoDB v API poti Next.js:

// 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('Prosimo, dodajte svoj Mongo URI v .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // V razvojnem načinu uporabite globalno spremenljivko, da se vrednost
  // ohrani med ponovnimi nalaganji modulov, ki jih povzroči HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // V produkcijskem načinu je bolje ne uporabljati globalne spremenljivke.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Izvozite obljubo MongoClient, ki je omejena na modul. S tem v
// ločenem modulu lahko odjemalca varno ponovno uporabite v več
// funkcijah. Glejte: 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: 'Pridobivanje uporabnikov ni uspelo' })
  }
}

Preden zaženete to kodo, se prepričajte, da imate nameščen paket mongodb:

npm install mongodb

Prav tako morate nastaviti okoljski spremenljivki MONGODB_URI in MONGODB_DB. Ti spremenljivki naj bosta definirani v vaši datoteki .env.local (ali v nastavitvah okoljskih spremenljivk vašega ponudnika gostovanja za produkcijo). MONGODB_URI vsebuje povezovalni niz do vaše podatkovne baze MongoDB, MONGODB_DB pa določa ime podatkovne baze.

Avtentikacija in avtorizacija

Zaščita vaših API poti je ključnega pomena za varnost. API poti v Next.js je mogoče zavarovati z različnimi tehnikami avtentikacije in avtorizacije, vključno z:

Tukaj je primer, kako zaščititi API pot z uporabo avtentikacije JWT:

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

  try {
    const decoded = jwt.verify(token, secret)
    // Objekt "decoded" vsebuje informacije o uporabniku, vdelane v žeton
    // Na primer: const userId = decoded.userId;

    // Nadaljuj z obdelavo zahteve
    res.status(200).json({ message: 'Zaščiten vir uspešno dostopen' })
  } catch (error) {
    return res.status(401).json({ message: 'Neveljaven žeton' })
  }
}

Preden zaženete to kodo, se prepričajte, da imate nameščen paket jsonwebtoken:

npm install jsonwebtoken

Prav tako morate nastaviti okoljsko spremenljivko JWT_SECRET. To mora biti močan, naključno generiran skrivni ključ, ki se uporablja za podpisovanje in preverjanje JWT-jev. Shranite ga varno in ga nikoli ne izpostavljajte v kodi na strani odjemalca.

Vmesna programska oprema (Middleware)

Čeprav Next.js ne ponuja tradicionalne vmesne programske opreme za API poti na enak način kot Express.js, lahko podobno funkcionalnost dosežete z ovijanjem obdelovalcev API poti v ponovno uporabne funkcije. To vam omogoča izvajanje nalog, kot so:

Tukaj je primer, kako ustvariti preprosto vmesno programsko opremo za belež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)
  }
}

Za uporabo te vmesne programske opreme preprosto ovijte obdelovalec vaše API poti s funkcijo withLogging:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Ta zahteva je bila zabeležena' })
}

export default withLogging(handler)

Najboljše prakse za gradnjo API poti v Next.js

Napredne tehnike

Ozadna opravila

Za dolgotrajna opravila, ki ne smejo blokirati odgovora API-ja, razmislite o uporabi ozadnih opravil. Za upravljanje ozadnih opravil in njihovo asinhrono obdelavo lahko uporabite knjižnice, kot sta BullMQ ali Bree.

WebSockets

Za aplikacije v realnem času lahko v svojih API poteh Next.js uporabite WebSockets. Knjižnice, kot sta Socket.IO in ws, olajšajo vzpostavitev trajnih povezav med odjemalcem in strežnikom.

GraphQL

Če potrebujete bolj prilagodljiv in učinkovit način za pridobivanje podatkov, razmislite o uporabi GraphQL. Za ustvarjanje GraphQL API končne točke v vaši aplikaciji Next.js lahko uporabite knjižnice, kot sta Apollo Server ali Yoga.

Zaključek

API poti v Next.js zagotavljajo zmogljiv in priročen način za gradnjo brezstrežniških zaledij neposredno v vaši aplikaciji Next.js. Z izkoriščanjem prednosti brezstrežniške arhitekture lahko poenostavite razvoj, izboljšate zmogljivost in zmanjšate stroške. Ne glede na to, ali gradite preprost kontaktni obrazec ali zapleteno e-trgovinsko platformo, vam lahko API poti v Next.js pomagajo z lahkoto ustvariti robustno in prilagodljivo zaledje. S trdnim razumevanjem osnov in uporabo najboljših praks lahko to zmogljivo orodje izkoristite za ustvarjanje učinkovitih, varnih in globalno dostopnih aplikacij.

API poti v Next.js: Enostavna gradnja vašega zaledja | MLOG