Borte er dagene da du måtte lage en egen backend for nettstedet ditt. Med Next.js filbasert API-ruting kan du gjøre livet ditt enklere ved å skrive API-en din i et Next.js-prosjekt.
Next.js er et React-meta-rammeverk med funksjoner som forenkler prosessen med å bygge produksjonsklare nettapper. Du vil se hvordan du bygger en REST API i Next.js og bruker dataene fra den APIen på en Next.js-side.
Lag et Next.js-prosjekt ved å bruke create-next-appen
Du kan opprette et nytt Next.js-prosjekt ved å bruke CLI-verktøyet create-next-app. Den installerer de nødvendige pakkene og filene for å komme i gang med å bygge en Next.js-applikasjon.
Kjør denne kommandoen i en terminal for å opprette en ny Next.js-mappe kalt api-routes. Du kan få en melding om å installere create-next-app.
npx skape-neste-app api-ruter
Når kommandoen er ferdig, åpne api-routes-mappen for å begynne å lage API-rutene.
API-ruting i Next.js
API-ruter kjører på serveren og har mange bruksområder som å lagre brukerdata til en database eller hente data fra en API uten å øke CORS policy feil.
I Next.js må du opprette API-ruter i /pages/api-mappen. Next.js genererer API-endepunkter for hver av filene i denne mappen. Hvis du legger til user.js til /pages/api, vil Next.js opprette et endepunkt på http://localhost: 3000/api/bruker.
En grunnleggende Next.js API-rute har følgende syntaks.
eksportmisligholdefunksjonhandler(krav, res) {
res.status (200).json({ navn: 'John Doe' })
}
Du må eksportere behandlerfunksjonen for at den skal fungere.
Opprette API-ruter
Opprett en ny fil kalt todo.js i /pages/api mappe for å legge til en API-rute for gjøremål.
Håner Todo-databasen
For å få oppgavene må du opprette et GET-endepunkt. For enkelhets skyld. Denne opplæringen bruker en rekke gjøremålselementer i stedet for en database, men bruk gjerne en database som MongoDB eller MySQL.
Opprett gjøremålene i todo.js i rotmappen til programmet, og legg til følgende data.
eksportkonst gjøremål = [
{
id: 1,
å gjøre: "Gjør noe fint for noen jeg bryr meg om",
fullført: ekte,
bruker-ID: 26,
},
{
id: 2,
å gjøre: "Lær de femti statene og deres hovedsteder utenat",
fullført: falsk,
bruker-ID: 48,
},
// andre gjøremål
];
Disse gjøremålene er fra DummyJSON-nettstedet, en REST API for falske data. Du kan finne nøyaktige data fra dette DummyJSON todos-endepunkt.
Deretter oppretter du API-ruten i /pages/api/todos.js og legg til behandlerfunksjonen.
import { todos } fra "../../å gjøre";eksportfunksjonhandler(krav, res) {
konst { metode } = req;
bytte om (metode) {
sak "FÅ":
res.status(200).json(todos);
gå i stykker;
sak "POST":
konst { todo, fullført } = req.body;
todos.trykk({
id: todos.lengde + 1,
å gjøre,
fullført,
});
res.status(200).json(todos);
gå i stykker;
misligholde:
res.setHeader("Tillate", ["FÅ", "POST"]);
res.status(405).slutt(`Metode ${method} Ikke tillatt`);
gå i stykker;
}
}
Denne ruten håndterer GET- og POST-endepunktene. Den returnerer alle gjøremålene for GET-forespørselen og legger til et gjøremålselement til gjøremålsdatabasen for en POST-forespørsel. For andre metoder returnerer behandleren en feil.
Bruker API-ruter i grensesnittet
Du har opprettet et API-endepunkt som returnerer et JSON-objekt som inneholder en rekke gjøremål.
For å konsumere API, lag en funksjon kalt fetchTodos som henter data fra API-endepunktet. Funksjonen bruker hentemetoden, men du kan også bruk Axios til å lage API-forespørsler. Deretter kaller du denne funksjonen når du klikker på en knapp.
import Hode fra "neste/hode";
import { useState } fra "reagere";eksportmisligholdefunksjonHjem() {
konst [todos, settodos] = brukState([]);konst henteTodos = asynkron () => {
konst svar = avvente hente("/api/todos");
konst data = avvente response.json();
settodos (data);
};
komme tilbake (
<div className={styles.container}>
<Hode>
<tittel>Lag neste app</title>
<metanavn="beskrivelse" innhold="Generert av opprette neste app" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<hoved->
<button onClick={fetchTodos}>Få gjøremål</button>
<ul>
{todos.map((todo) => {
komme tilbake (
<li
style={{ farge: `${todo.completed? "grønn": "rød"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Listen i dette utdraget viser gjøremålene når de hentes.
For POST-endepunktet, lag en ny funksjon kalt saveTodo som sender en POST-forespørsel til APIen. Henteforespørselen lagrer det nye gjøremålselementet i brødteksten og returnerer alle gjøremålselementene inkludert det nye. SaveTodo-funksjonen lagrer dem deretter i todos-tilstanden.
konst saveTodo = asynkron () => {
konst svar = avvente hente("/api/todos", {
metode: "POST",
kropp: JSON.stringify (newTodo),
overskrifter: {
"Innholdstype": "applikasjon/json",
},
});
konst data = avvente response.json();
settodos (data);
};
Deretter oppretter du et skjema med en tekstlinje for å motta det nye gjøremålet. Sendbehandlerfunksjonen til dette skjemaet vil kalle opp saveTodo-funksjonen.
import Hode fra "neste/hode";
import { useReducer, useState } fra "reagere";
import stiler fra "../styles/Home.module.css";eksportmisligholdefunksjonHjem() {
konst [todos, settodos] = brukState([]);konst [newTodo, setnewTodo] = useState({
å gjøre: "",
fullført: falsk,
});konst henteTodos = asynkron () => {
// henteTodos
};
konst saveTodo = asynkron (e) => {
konst svar = avvente hente("/api/todos", {
metode: "POST",
kropp: JSON.stringify (newTodo),
overskrifter: {
"Innholdstype": "applikasjon/json",
},
});konst data = avvente response.json();
settodos (data);
};konst handleChange = (e) => {
setnewTodo({
å gjøre: e.mål.verdi,
});
};konst handleSubmit = (e) => {
e.preventDefault();
lagreTodo();
setnewTodo({
å gjøre: '',
});
};komme tilbake (
<div className={styles.container}>
<Hode>
<tittel>Lag neste app</title>
<metanavn="beskrivelse" innhold="Generert av opprette neste app" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<hoved->
// Henter gjøremålselementene når de klikkes
<button onClick={fetchTodos}>Få gjøremål</button>
// Lagrer et nytt gjøremål når det sendes inn
<form onSubmit={handleSubmit}>
<input type="tekst" onChange={handleChange} verdi={newTodo.todo} />
</form>
<ul>
{// liste gjøremål}
</ul>
</main>
</div>
);
}
Behandleren legger til en ny gjøremål i databasen hver gang en bruker sender inn skjemaet. Denne funksjonen oppdaterer også gjøremålsverdien ved å bruke dataene mottatt fra APIen som igjen legger til det nye gjøremålselementet til listen.
API-ruting er bare en av Next.js sine styrker
Du har sett hvordan du bygger og bruker en Next.js API-rute. Nå kan du opprette en full stack-applikasjon uten å forlate Next.js-prosjektmappen. API-ruting er en av de mange fordelene som Next.js gir.
Next.js tilbyr også ytelsesoptimaliseringer som kodedeling, lat lasting og innebygd CSS-støtte. Hvis du bygger et nettsted som må være raskt og SEO-vennlig, bør du vurdere Next.js.
