Dawno minęły czasy, kiedy trzeba było stworzyć oddzielny backend dla swojej strony internetowej. Dzięki routingowi API opartemu na plikach Next.js możesz ułatwić sobie życie, pisząc swój interfejs API w projekcie Next.js.
Next.js to meta-framework React z funkcjami, które upraszczają proces tworzenia aplikacji internetowych gotowych do produkcji. Zobaczysz, jak zbudować interfejs API REST w Next.js i wykorzystywać dane z tego interfejsu API na stronie Next.js.
Utwórz projekt Next.js za pomocą aplikacji create-next
Możesz utworzyć nowy projekt Next.js za pomocą narzędzia interfejsu wiersza polecenia Create-next-app. Instaluje niezbędne pakiety i pliki, aby rozpocząć tworzenie aplikacji Next.js.
Uruchom to polecenie w terminalu, aby utworzyć nowy folder Next.js o nazwie api-routes. Możesz otrzymać monit o zainstalowanie aplikacji create-next-app.
npx tworzyć-Następny-app trasy API
Po zakończeniu wykonywania polecenia otwórz folder api-routes, aby rozpocząć tworzenie tras interfejsu API.
Routing API w Next.js
Trasy API działają na serwerze i mają wiele zastosowań, takich jak zapisywanie danych użytkownika w bazie danych lub pobieranie danych z interfejsu API bez podnoszenia Błąd zasad CORS.
W Next.js musisz utworzyć trasy API w folderze /pages/api. Next.js generuje punkty końcowe interfejsu API dla każdego pliku w tym folderze. Jeśli dodasz user.js do /pages/api, Next.js utworzy punkt końcowy w http://localhost: 3000/api/użytkownik.
Podstawowa trasa API Next.js ma następującą składnię.
eksportdomyślnyfunkcjonowaćtreser(żądanie, rez) {
res.status (200).json({nazwa: 'nieznany z nazwiska' })
}
Musisz wyeksportować funkcję obsługi, aby działała.
Tworzenie tras API
Utwórz nowy plik o nazwie todo.js w /pages/api folder, aby dodać trasę API dla elementów do zrobienia.
Wyśmiewanie bazy danych Todo
Aby uzyskać todo, musisz utworzyć punkt końcowy GET. Dla prostoty. Ten samouczek używa tablicy elementów do zrobienia zamiast bazy danych, ale możesz swobodnie korzystać z bazy danych, takiej jak MongoDB lub MySQL.
Utwórz elementy do zrobienia w pliku todo.js w folderze głównym aplikacji, a następnie dodaj następujące dane.
eksportkonst todo = [
{
identyfikator: 1,
do zrobienia: "Zrób coś miłego dla kogoś, na kim mi zależy",
zakończony: PRAWDA,
identyfikator użytkownika: 26,
},
{
identyfikator: 2,
do zrobienia: "Zapamiętaj pięćdziesiąt stanów i ich stolice",
zakończony: FAŁSZ,
identyfikator użytkownika: 48,
},
// inne zadania
];
Te elementy do zrobienia pochodzą ze strony internetowej DummyJSON, a REST API dla fałszywych danych. Możesz znaleźć dokładne dane z tego Punkt końcowy DummyJSON todos.
Następnie utwórz trasę interfejsu API w /pages/api/todos.js i dodaj funkcję obsługi.
import { todo } z "../../do zrobienia";eksportfunkcjonowaćtreser(żądanie, rez) {
konst { metoda } = wymaganie;
przełącznik (metoda) {
sprawa "DOSTAWAĆ":
rez.status(200).json(todos);
przerwa;
sprawa "POST":
konst { do zrobienia, zakończone } = req.body;
todos.naciskać({
ID: todos.długość + 1,
do zrobienia,
zakończony,
});
rez.status(200).json(todos);
przerwa;
domyślny:
res.setHeader("Umożliwić", ["DOSTAWAĆ", "POST"]);
res.status(405).koniec(`Metoda ${metoda} Niedozwolone`);
przerwa;
}
}
Ta trasa obsługuje punkty końcowe GET i POST. Zwraca wszystkie todo dla żądania GET i dodaje element todo do bazy danych todo dla żądania POST. W przypadku innych metod program obsługi zwraca błąd.
Używanie tras API w interfejsie użytkownika
Utworzyłeś punkt końcowy API, który zwraca obiekt JSON zawierający tablicę todo.
Aby korzystać z interfejsu API, utwórz funkcję o nazwie fetchTodos, która pobiera dane z punktu końcowego interfejsu API. Funkcja używa metody pobierania, ale możesz też używaj Axios do wysyłania żądań API. Następnie wywołaj tę funkcję po kliknięciu przycisku.
import Głowa z „następny / głowa”;
import { stan użycia } z "reagować";eksportdomyślnyfunkcjonowaćDom() {
konst [todos, settodos] = useState([]);konst pobierz todos = asynchroniczny () => {
konst odpowiedź = czekać na aportować("/api/todo");
konst dane = czekać na odpowiedź.json();
settodos (dane);
};
powrót (
<div className={styles.container}>
<Głowa>
<tytuł>Utwórz następną aplikację</title>
<metanazwa="opis" zawartość="Wygenerowane przez utworzenie następnej aplikacji" />
<link rel="Ikona" href="/favicon.ico" />
</Head>
<główny>
<button onClick={fetchTodos}>Zdobądź todo</button>
<ul>
{todos.map((todo) => {
powrót (
<li
style={{ kolor: `${todo.completed? "zielony": "czerwony"}` }}
klucz={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Lista w tym fragmencie wyświetla elementy do wykonania po ich pobraniu.
Dla punktu końcowego POST utwórz nową funkcję o nazwie saveTodo, która wysyła żądanie POST do interfejsu API. Żądanie pobrania przechowuje nowy element do wykonania w treści i zwraca wszystkie elementy do wykonania, w tym nowy. Następnie funkcja saveTodo przechowuje je w stanie todos.
konst zapiszTodo = asynchroniczny () => {
konst odpowiedź = czekać na aportować("/api/todo", {
metoda: "POST",
ciało: JSON.stringify (nowe zadanie),
nagłówki: {
"Typ zawartości": "aplikacja/json",
},
});
konst dane = czekać na odpowiedź.json();
settodos (dane);
};
Następnie utwórz formularz z paskiem wprowadzania tekstu, aby otrzymać nowy element do wykonania. Funkcja obsługi przesyłania w tym formularzu wywoła funkcję saveTodo.
import Głowa z „następny / głowa”;
import { useReducer, useState } z "reagować";
import style z "../styles/Home.module.css";eksportdomyślnyfunkcjonowaćDom() {
konst [todos, settodos] = useState([]);konst [newTodo, setnewTodo] = useState({
do zrobienia: "",
zakończony: FAŁSZ,
});konst pobierz todos = asynchroniczny () => {
// pobierz Todos
};
konst zapiszTodo = asynchroniczny (e) => {
konst odpowiedź = czekać na aportować("/api/todo", {
metoda: "POST",
ciało: JSON.stringify (nowe zadanie),
nagłówki: {
"Typ zawartości": "aplikacja/json",
},
});konst dane = czekać na odpowiedź.json();
settodos (dane);
};konst handleChange = (e) => {
setnewTodo({
do zrobienia: mi.cel.wartość,
});
};konst uchwytWyślij = (e) => {
mi.preventDefault();
zapiszTodo();
setnewTodo({
do zrobienia: '',
});
};powrót (
<div className={styles.container}>
<Głowa>
<tytuł>Utwórz następną aplikację</title>
<metanazwa="opis" zawartość="Wygenerowane przez utworzenie następnej aplikacji" />
<link rel="Ikona" href="/favicon.ico" />
</Head>
<główny>
// Po kliknięciu pobiera elementy do wykonania
<button onClick={fetchTodos}>Zdobądź todo</button>
// Zapisuje nowy element do wykonania po przesłaniu
<formularz onSubmit={uchwytPrześlij}>
<typ wejścia="tekst" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{// lista rzeczy do zrobienia}
</ul>
</main>
</div>
);
}
Moduł obsługi dodaje nowe zadanie do bazy danych za każdym razem, gdy użytkownik przesyła formularz. Ponadto ta funkcja aktualizuje wartość todos na podstawie danych otrzymanych z interfejsu API, co z kolei dodaje nowy element todo do listy.
Routing API to tylko jedna z mocnych stron Next.js
Widziałeś, jak budujesz i używasz trasy API Next.js. Teraz możesz utworzyć aplikację z pełnym stosem bez opuszczania folderu projektu Next.js. Routing API to jedna z wielu korzyści, jakie zapewnia Next.js.
Next.js oferuje również optymalizacje wydajności, takie jak dzielenie kodu, leniwe ładowanie i wbudowana obsługa CSS. Jeśli budujesz stronę internetową, która musi być szybka i przyjazna dla SEO, powinieneś rozważyć Next.js.