Izpētiet Next.js API maršrutus un atraisiet pilna cikla izstrādes iespējas savās React lietotnēs. Apgūstiet modeļus, labāko praksi un izvietošanas stratēģijas.
Next.js API Maršruti: Pilna cikla izstrādes modeļi
Next.js ir revolucionizējis React izstrādi, nodrošinot stabilu ietvaru veiktspējīgu un mērogojamu tīmekļa lietotņu izveidei. Viena no tā galvenajām iezīmēm ir API maršruti, kas ļauj izstrādātājiem izveidot aizmugursistēmas funkcionalitāti tieši Next.js projektos. Šī pieeja racionalizē izstrādi, vienkāršo izvietošanu un atver jaudīgas pilna cikla iespējas.
Kas ir Next.js API maršruti?
Next.js API maršruti ir serverless funkcijas, kas rakstītas tieši jūsu /pages/api
direktorijā. Katrs fails šajā direktorijā kļūst par API galapunktu, automātiski maršrutējot HTTP pieprasījumus uz atbilstošo funkciju. Tas novērš nepieciešamību pēc atsevišķa aizmugursistēmas servera, vienkāršojot jūsu lietotnes arhitektūru un samazinot darbības izmaksas.
Uztveriet tos kā miniatūras serverless funkcijas, kas atrodas jūsu Next.js lietotnē. Tās reaģē uz HTTP pieprasījumiem, piemēram, GET, POST, PUT, DELETE, un var mijiedarboties ar datubāzēm, ārējām API un citiem servera puses resursiem. Būtiski, ka tās darbojas tikai serverī, nevis lietotāja pārlūkprogrammā, nodrošinot sensitīvu datu, piemēram, API atslēgu, drošību.
API maršrutu galvenās priekšrocības
- Vienkāršota izstrāde: Rakstiet gan frontend, gan backend kodu vienā projektā.
- Serverless arhitektūra: Izmantojiet serverless funkcijas mērogojamībai un izmaksu efektivitātei.
- Vienkārša izvietošana: Izvietojiet savu frontend un backend kopā ar vienu komandu.
- Uzlabota veiktspēja: Servera puses renderēšanas un datu ielādes iespējas uzlabo lietotnes ātrumu.
- Uzlabota drošība: Sensitīvie dati paliek serverī, aizsargāti no klienta puses atklātības.
Darba sākšana ar API maršrutiem
API maršruta izveide Next.js ir vienkārša. Vienkārši izveidojiet jaunu failu /pages/api
direktorijā. Failu nosaukums noteiks maršruta ceļu. Piemēram, izveidojot failu ar nosaukumu /pages/api/hello.js
, tiks izveidots API galapunkts, kas būs pieejams vietnē /api/hello
.
Piemērs: Vienkāršs sveiciena API
Šeit ir vienkāršs API maršruta piemērs, kas atgriež JSON atbildi:
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Sveiciens no Next.js API maršruta!' });
}
Šis kods definē asinhrono funkciju handler
, kas saņem divus argumentus:
req
:http.IncomingMessage
instances, plus daži iepriekš izveidoti starpprogrammatūras.res
:http.ServerResponse
instances, plus dažas palīgfunkcijas.
Funkcija iestata HTTP statusa kodu uz 200 (OK) un atgriež JSON atbildi ar ziņojumu.
Dažādu HTTP metožu apstrāde
Jūs varat apstrādāt dažādas HTTP metodes (GET, POST, PUT, DELETE utt.) savā API maršrutā, pārbaudot rekvizītu req.method
. Tas ļauj jums viegli izveidot RESTful API.
// pages/api/todos.js
export default async function handler(req, res) {
if (req.method === 'GET') {
// Iegūt visus uzdevumus no datubāzes
const todos = await fetchTodos();
res.status(200).json(todos);
} else if (req.method === 'POST') {
// Izveidot jaunu uzdevumu
const newTodo = await createTodo(req.body);
res.status(201).json(newTodo);
} else {
// Apstrādāt neatbalstītas metodes
res.status(405).json({ message: 'Metode nav atļauta' });
}
}
Šis piemērs parāda, kā apstrādāt GET un POST pieprasījumus hipotētiskam /api/todos
galapunktam. Tas ietver arī kļūdu apstrādi neatbalstītām metodēm.
Pilna cikla izstrādes modeļi ar API maršrutiem
Next.js API maršruti nodrošina dažādus pilna cikla izstrādes modeļus. Šeit ir daži izplatīti lietošanas gadījumi:
1. Datu ielāde un manipulācija
API maršrutus var izmantot, lai ielādētu datus no datubāzēm, ārējām API vai citiem datu avotiem. Tos var izmantot arī datu manipulācijai, piemēram, ierakstu izveidei, atjaunināšanai vai dzēšanai.
Piemērs: Lietotāja datu ielāde no datubāzes
// 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: 'Lietotājs nav atrasts' });
}
res.status(200).json(results[0]);
} catch (error) {
console.error(error);
res.status(500).json({ message: 'Iekšēja servera kļūda' });
}
}
Šis piemērs ielādē lietotāja datus no datubāzes, pamatojoties uz lietotāja ID, kas norādīts URL. Tas izmanto datubāzes vaicājumu bibliotēku (pieņemts, ka tā atrodas lib/db
), lai mijiedarbotos ar datubāzi. Ievērojiet parametrizētu vaicājumu izmantošanu, lai novērstu SQL injekcijas ievainojamību.
2. Autentifikācija un autorizācija
API maršrutus var izmantot, lai ieviestu autentifikācijas un autorizācijas loģiku. Varat tos izmantot, lai pārbaudītu lietotāju akreditācijas datus, ģenerētu JWT pilnvaras un aizsargātu sensitīvus resursus.
Piemērs: Lietotāja autentifikācija
// 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: 'Nederīgi akreditācijas dati' });
}
const user = results[0];
const passwordMatch = await bcrypt.compare(password, user.password);
if (!passwordMatch) {
return res.status(401).json({ message: 'Nederīgi akreditācijas dati' });
}
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: 'Iekšēja servera kļūda' });
}
} else {
res.status(405).json({ message: 'Metode nav atļauta' });
}
}
Šis piemērs autentificē lietotājus, salīdzinot norādīto paroli ar datubāzē saglabāto jaukto paroli. Ja akreditācijas dati ir derīgi, tas ģenerē JWT pilnvaru un atgriež to klientam. Pēc tam klients var izmantot šo pilnvaru, lai autentificētu turpmākos pieprasījumus.
3. Veidlapu apstrāde un datu iesniegšana
API maršrutus var izmantot, lai apstrādātu veidlapu iesniegumus un apstrādātu no klienta nosūtītos datus. Tas ir noderīgi, lai izveidotu kontaktu veidlapas, reģistrācijas veidlapas un citus interaktīvus elementus.
Piemērs: Kontaktu veidlapas iesniegums
// 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: 'Jauns kontaktu veidlapas iesniegums',
text: `Vārds: ${name}\nE-pasts: ${email}\nZiņa: ${message}`,
});
res.status(200).json({ message: 'E-pasts veiksmīgi nosūtīts' });
} catch (error) {
console.error(error);
res.status(500).json({ message: 'Neizdevās nosūtīt e-pastu' });
}
} else {
res.status(405).json({ message: 'Metode nav atļauta' });
}
}
Šis piemērs apstrādā kontaktu veidlapas iesniegumu, nosūtot e-pastu administratoram. Tas izmanto e-pasta sūtīšanas bibliotēku (pieņemts, ka tā atrodas lib/email
), lai nosūtītu e-pastu. Jums jāaizstāj admin@example.com
ar faktisko adresāta e-pasta adresi.
4. Webhooks un notikumu apstrāde
API maršrutus var izmantot, lai apstrādātu webhooks un reaģētu uz notikumiem no ārējiem pakalpojumiem. Tas ļauj integrēt savu Next.js lietotni ar citām platformām un automatizēt uzdevumus.
Piemērs: Stripe Webhook apstrāde
// pages/api/stripe-webhook.js
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
export const config = {
api: {
bodyParser: false, // Atspējot noklusējuma 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;
}
// Apstrādāt notikumu
switch (event.type) {
case 'payment_intent.succeeded':
const paymentIntent = event.data.object;
console.log(`PaymentIntent for ${paymentIntent.amount} was successful!`);
// Pēc tam definējiet un izsauciet metodi, lai apstrādātu veiksmīgu maksājuma nodomu.
// handlePaymentIntentSucceeded(paymentIntent);
break;
case 'payment_method.attached':
const paymentMethod = event.data.object;
// Pēc tam definējiet un izsauciet metodi, lai apstrādātu veiksmīgu PaymentMethod pievienošanu.
// handlePaymentMethodAttached(paymentMethod);
break;
default:
// Neparedzēts notikuma veids
console.log(`Neapstrādāts notikuma veids ${event.type}.`);
}
// Atgriezt 200 atbildi, lai apstiprinātu notikuma saņemšanu
res.status(200).json({ received: true });
} else {
res.setHeader('Allow', 'POST');
res.status(405).end('Metode nav atļauta');
}
}
Šis piemērs apstrādā Stripe webhook, pārbaudot parakstu un apstrādājot notikuma datus. Tas atspējo noklusējuma body parser un izmanto pielāgotu buffer funkciju, lai lasītu neapstrādātu pieprasījuma body. Ir ļoti svarīgi atspējot noklusējuma body parser, jo Stripe paraksta pārbaudei ir nepieciešams neapstrādāts body. Atcerieties konfigurēt savu Stripe webhook galapunktu savā Stripe informācijas panelī un iestatīt vides mainīgo STRIPE_WEBHOOK_SECRET
.
Labākā prakse API maršrutiem
Lai nodrošinātu savu API maršrutu kvalitāti un uzturēšanas spēju, ievērojiet šo labāko praksi:
1. Modularizējiet savu kodu
Neizvairieties rakstīt lielus, monolītus API maršrutus. Tā vietā sadaliet savu kodu mazākos, atkārtoti izmantojamos moduļos. Tas atvieglo koda sapratni, testēšanu un uzturēšanu.
2. Ieviest kļūdu apstrādi
Pareizi apstrādājiet kļūdas savos API maršrutos. Izmantojiet try...catch
blokus, lai uztvertu izņēmumus un atgrieztu atbilstošas kļūdu atbildes klientam. Reģistrējiet kļūdas, lai palīdzētu atkļūdot un uzraudzīt.
3. Validējiet ievades datus
Vienmēr validējiet ievades datus no klienta, lai novērstu drošības ievainojamību un nodrošinātu datu integritāti. Izmantojiet validācijas bibliotēkas, piemēram, Joi vai Yup, lai definētu validācijas shēmas un nodrošinātu datu ierobežojumus.
4. Aizsargājiet sensitīvus datus
Glabājiet sensitīvus datus, piemēram, API atslēgas un datubāzes akreditācijas datus, vides mainīgajos. Nekad nepievienojiet sensitīvus datus savam koda repozitorijam.
5. Ieviest ātruma ierobežošanu
Aizsargājiet savus API maršrutus no ļaunprātīgas izmantošanas, ieviešot ātruma ierobežošanu. Tas ierobežo pieprasījumu skaitu, ko klients var veikt noteiktā laika periodā. Izmantojiet ātruma ierobežošanas bibliotēkas, piemēram, express-rate-limit
vai limiter
.
6. Nodrošiniet API atslēgas
Neatklājiet API atslēgas tieši klienta puses kodā. Vienmēr proxy pieprasījumus, izmantojot savus API maršrutus, lai aizsargātu savas API atslēgas no neatļautas piekļuves. Droši glabājiet API atslēgas vides mainīgajos savā serverī.
7. Izmantojiet vides mainīgos
Neizvairieties no konfigurācijas vērtību iekļaušanas kodā. Tā vietā izmantojiet vides mainīgos, lai glabātu konfigurācijas iestatījumus. Tas atvieglo lietotnes pārvaldību dažādās vidēs (izstrādes, testēšanas, ražošanas).
8. Reģistrēšana un uzraudzība
Ieviest reģistrēšanu un uzraudzību, lai izsekotu savu API maršrutu veiktspēju. Reģistrējiet svarīgus notikumus, piemēram, kļūdas, brīdinājumus un veiksmīgus pieprasījumus. Izmantojiet uzraudzības rīkus, lai izsekotu tādus rādītājus kā pieprasījuma latentums, kļūdu līmenis un resursu izmantošana. Pakalpojumi, piemēram, Sentry, Datadog vai New Relic, var būt noderīgi.
Izvietošanas apsvērumi
Next.js API maršruti ir paredzēti izvietošanai serverless platformās. Populāras izvietošanas iespējas ietver:
- Vercel: Vercel ir ieteicamā platforma Next.js lietotņu izvietošanai. Tā nodrošina netraucētu integrāciju ar Next.js un automātiski optimizē jūsu lietotni veiktspējai.
- Netlify: Netlify ir vēl viena populāra serverless platforma, kas atbalsta Next.js izvietošanu. Tā piedāvā līdzīgas funkcijas kā Vercel, piemēram, automātiskas izvietošanas un CDN integrācija.
- AWS Lambda: AWS Lambda ir serverless skaitļošanas pakalpojums, kas ļauj palaist kodu, neapgādājot vai nepārvaldot serverus. Varat izvietot savus Next.js API maršrutus kā Lambda funkcijas, izmantojot tādus rīkus kā Serverless Framework vai AWS SAM.
- Google Cloud Functions: Google Cloud Functions ir serverless izpildes vide, kas ļauj izveidot un savienot mākoņpakalpojumus. Varat izvietot savus Next.js API maršrutus kā Cloud Functions, izmantojot tādus rīkus kā Firebase CLI vai Google Cloud SDK.
- Azure Functions: Azure Functions ir serverless skaitļošanas pakalpojums, kas ļauj palaist kodu pēc pieprasījuma, nepārvaldot infrastruktūru. Varat izvietot savus Next.js API maršrutus kā Azure Functions, izmantojot tādus rīkus kā Azure Functions Core Tools vai Azure CLI.
Izvietojot savu Next.js lietotni ar API maršrutiem, pārliecinieties, vai jūsu vides mainīgie ir pareizi konfigurēti izvietošanas platformā. Apsveriet arī serverless funkciju aukstās palaišanas laiku, kas var ietekmēt jūsu API maršrutu sākotnējo atbildes laiku. Koda optimizēšana un tādu metožu izmantošana kā nodrošināta vienlaicība var palīdzēt mazināt aukstās palaišanas problēmas.
Secinājums
Next.js API maršruti nodrošina jaudīgu un ērtu veidu, kā izveidot pilna cikla lietotnes ar React. Izmantojot serverless funkcijas, varat vienkāršot izstrādi, samazināt darbības izmaksas un uzlabot lietotnes veiktspēju. Ievērojot šajā rakstā norādīto labāko praksi, varat izveidot robustus un uzturējamus API maršrutus, kas nodrošina jūsu Next.js lietotnes.
Neatkarīgi no tā, vai veidojat vienkāršu kontaktu veidlapu vai sarežģītu e-komercijas platformu, Next.js API maršruti var palīdzēt racionalizēt izstrādes procesu un nodrošināt izcilu lietotāja pieredzi.