Cum să construiți și să consumați un API în Next.js

Au trecut vremurile în care trebuia să creați un backend separat pentru site-ul dvs. web. Cu rutarea API bazată pe fișiere Next.js, vă puteți ușura viața scriindu-vă API-ul într-un proiect Next.js.

Next.js este un meta-cadru React cu funcții care simplifică procesul de construire a aplicațiilor web pregătite pentru producție. Veți vedea cum să creați un API REST în Next.js și să consumați datele din acel API pe o pagină Next.js.

Creați un proiect Next.js folosind create-next-app

Puteți crea un nou proiect Next.js folosind instrumentul CLI create-next-app. Instalează pachetele și fișierele necesare pentru a începe să construiți o aplicație Next.js.

Rulați această comandă într-un terminal pentru a crea un nou folder Next.js numit api-routes. Este posibil să primiți o solicitare pentru a instala create-next-app.

npx crea-Următorul-aplicație api-rute

Când comanda se termină, deschideți folderul api-routes pentru a începe crearea rutelor API.

Rutarea API în Next.js

Rutele API rulează pe server și au multe utilizări, cum ar fi salvarea datelor utilizatorului într-o bază de date sau preluarea datelor dintr-un API fără a ridica

Eroare de politică CORS.

În Next.js, trebuie să creați rute API în folderul /pages/api. Next.js generează puncte finale API pentru fiecare dintre fișierele din acest folder. Dacă adăugați user.js la /pages/api, Next.js va crea un punct final la http://localhost: 3000/api/utilizator.

O rută API de bază Next.js are următoarea sintaxă.

exportMod implicitfuncţiemanipulator(cerere, res) {
 res.status (200).json({ nume: 'John Doe' })
}

Trebuie să exportați funcția de gestionare pentru ca aceasta să funcționeze.

Crearea rutelor API

Creați un fișier nou numit todo.js în fișierul /pages/api folder pentru a adăuga o rută API pentru articolele de tot.

Batjocorirea bazei de date Todo

Pentru a obține toate, trebuie să creați un punct final GET. Pentru simplitate. Acest tutorial folosește o serie de articole de toaletă în loc de o bază de date, dar nu ezitați să utilizați o bază de date precum MongoDB sau MySQL.

Creați elementele todo în todo.js în folderul rădăcină al aplicației dvs., apoi adăugați următoarele date.

exportconst toți = [
 {
 id: 1,
 a face: "Fă ceva frumos pentru cineva la care țin",
 efectuat: Adevărat,
 ID utilizator: 26,
 },
 {
 id: 2,
 a face: "Memorează cele cincizeci de state și capitalele lor",
 efectuat: fals,
 ID utilizator: 48,
 },
// alte toate
];

Aceste articole sunt de pe site-ul DummyJSON, a API-ul REST pentru date simulate. Puteți găsi datele exacte din aceasta Punct final DummyJSON todos.

Apoi, creați ruta API în /pages/api/todos.js și adăugați funcția de gestionare.

import { toate } din "../../a face";
exportfuncţiemanipulator(cerere, res) {
const { metoda } = solicitat;
intrerupator (metoda) {
 caz "OBȚINE":
res.stare(200).json(toate);
pauză;
 caz "POST":
const { tot, completat } = req.body;
toate.Apăsaţi({
id: toate.lungime + 1,
 a face,
 efectuat,
 });
res.stare(200).json(toate);
pauză;
Mod implicit:
 res.setHeader("Permite", ["OBȚINE", "POST"]);
 starea res.(405).Sfârşit(`Metoda ${method} Nu este permis`);
pauză;
 }
}

Această rută se ocupă de punctele finale GET și POST. Returnează toate toate pentru cererea GET și adaugă un element de tot în baza de date todo pentru o solicitare POST. Pentru alte metode, handlerul returnează o eroare.

Consumul de rute API în front-end

Ați creat un punct final API care returnează un obiect JSON care conține o matrice de todos.

Pentru a consuma API-ul, creați o funcție numită fetchTodos care preia date de la punctul final API. Funcția folosește metoda fetch, dar poți și tu utilizați Axios pentru a face solicitări API. Apoi apelați această funcție când faceți clic pe un buton.

import Cap din „următorul/cap”;
import { useState } din "reacţiona"; 
exportMod implicitfuncţieAcasă() {
const [todos, settodos] = useState([]);
const fetchTodos = asincron () => {
const răspuns = așteaptă aduce("/api/toți");
const date = așteaptă răspuns.json();
 settodos (date);
 };
întoarcere (
<div className={styles.container}>
<Cap>
<titlu>Creați următoarea aplicație</title>
<meta nume="Descriere" continut="Generat de crearea următoarei aplicații" />
<link rel="pictograma" href="/favicon.ico" />
</Head>
<principal>
<butonul onClick={fetchTodos}>Obțineți toate</button>
<ul>
 {todos.map((todo) => {
întoarcere (
<li
 stil={{ culoare: `${todo.completed? "verde": "roșu"}` }}
 cheie={todo.id}
>
 {todo.todo}:{todo.completed}.
</li>
 );
 })}
</ul>
</main>
</div>
 );
}

Lista din acest fragment afișează elementele de tot atunci când sunt preluate.

Pentru punctul final POST, creați o nouă funcție numită saveTodo care face o solicitare POST către API. Solicitarea de preluare stochează noul articol de toaletă în corpul său și returnează toate elementele de tot, inclusiv pe cel nou. Funcția saveTodo le stochează apoi în starea todos.

const saveTodo = asincron () => {
const răspuns = așteaptă aduce("/api/toți", {
 metodă: "POST",
 corp: JSON.stringify (newTodo),
 antete: {
"Tipul de conținut": "aplicație/json",
 },
 });
const date = așteaptă răspuns.json();
 settodos (date);
};

Apoi, creați un formular cu o bară de introducere a textului pentru a primi noul articol de făcut. Funcția de gestionare a trimiterii din acest formular va apela funcția saveTodo.

import Cap din „următorul/cap”;
import { useReducer, useState } din "reacţiona";
import stiluri din „../styles/Home.module.css”;
exportMod implicitfuncţieAcasă() {
const [todos, settodos] = useState([]);
const [newTodo, setnewTodo] = useState({
 a face: "",
 efectuat: fals,
 });
const fetchTodos = asincron () => {
// fetchTodos
 };
const saveTodo = asincron (e) => {
const răspuns = așteaptă aduce("/api/toți", {
 metodă: "POST",
 corp: JSON.stringify (newTodo),
 antete: {
"Tipul de conținut": "aplicație/json",
 },
 });
const date = așteaptă răspuns.json();
 settodos (date);
 };
const handleChange = (e) => {
 setnewTodo({
a face: e.ţintă.valoare,
 });
 };
const handleSubmit = (e) => {
e.preventDefault();
 saveTodo();
 setnewTodo({
 a face: '',
 });
 };
întoarcere (
<div className={styles.container}>
<Cap>
<titlu>Creați următoarea aplicație</title>
<meta nume="Descriere" continut="Generat de crearea următoarei aplicații" />
<link rel="pictograma" href="/favicon.ico" />
</Head>
<principal>
// Preia elementele de tot când se face clic
<butonul onClick={fetchTodos}>Obțineți toate</button>
// Salvează un nou articol de făcut când este trimis
<form onSubmit={handleSubmit}>
<tip de intrare="text" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
 {// listează articole de tot}
</ul>
</main>
</div>
 );
}

Handler-ul adaugă un nou toto la baza de date de fiecare dată când un utilizator trimite formularul. De asemenea, această funcție actualizează valoarea todos folosind datele primite de la API, care, la rândul său, adaugă noul element de toate în listă.

Rutarea API este doar unul dintre punctele forte ale Next.js

Ați văzut cum construiți și utilizați o rută API Next.js. Acum puteți crea o aplicație full stack fără a părăsi folderul proiectului Next.js. Rutarea API este unul dintre numeroasele beneficii pe care Next.js le oferă.

Next.js oferă, de asemenea, optimizări de performanță, cum ar fi împărțirea codului, încărcare leneră și suport CSS încorporat. Dacă construiți un site web care trebuie să fie rapid și prietenos cu SEO, ar trebui să luați în considerare Next.js.