Πώς να δημιουργήσετε και να καταναλώσετε ένα API στο Next.js

Οι εποχές που έπρεπε να δημιουργήσετε ένα ξεχωριστό backend για τον ιστότοπό σας έχουν περάσει. Με τη δρομολόγηση API που βασίζεται σε αρχείο Next.js, μπορείτε να κάνετε τη ζωή σας πιο εύκολη γράφοντας το API σας μέσα σε ένα έργο Next.js.

Το Next.js είναι ένα μετα-πλαίσιο React με δυνατότητες που απλοποιούν τη διαδικασία δημιουργίας εφαρμογών ιστού έτοιμες για παραγωγή. Θα δείτε πώς να δημιουργήσετε ένα REST API στο Next.js και να καταναλώσετε τα δεδομένα από αυτό το API σε μια σελίδα Next.js.

Δημιουργήστε ένα έργο Next.js Χρησιμοποιώντας το create-next-app

Μπορείτε να δημιουργήσετε ένα νέο έργο Next.js χρησιμοποιώντας το εργαλείο δημιουργίας-επόμενης εφαρμογής CLI. Εγκαθιστά τα απαραίτητα πακέτα και αρχεία για να ξεκινήσετε με τη δημιουργία μιας εφαρμογής Next.js.

Εκτελέστε αυτήν την εντολή σε ένα τερματικό για να δημιουργήσετε έναν νέο φάκελο Next.js που ονομάζεται api-routes. Ενδέχεται να λάβετε μια προτροπή για εγκατάσταση δημιουργίας-επόμενης εφαρμογής.

npx δημιουργώ-Επόμενο-Διαδρομές api της εφαρμογής

Όταν ολοκληρωθεί η εντολή, ανοίξτε το φάκελο api-routes για να ξεκινήσετε τη δημιουργία των διαδρομών API.

Δρομολόγηση API στο Next.js

Οι διαδρομές API εκτελούνται στον διακομιστή και έχουν πολλές χρήσεις, όπως αποθήκευση δεδομένων χρήστη σε μια βάση δεδομένων ή ανάκτηση δεδομένων από ένα API χωρίς αύξηση του Σφάλμα πολιτικής CORS.

Στο Next.js, πρέπει να δημιουργήσετε διαδρομές API μέσα στο φάκελο /pages/api. Το Next.js δημιουργεί τελικά σημεία API για καθένα από τα αρχεία σε αυτόν τον φάκελο. Εάν προσθέσετε user.js στο /pages/api, το Next.js θα δημιουργήσει ένα τελικό σημείο στο http://localhost: 3000/api/χρήστης.

Μια βασική διαδρομή API Next.js έχει την ακόλουθη σύνταξη.

εξαγωγήΠροκαθορισμένολειτουργίαχειριστής(απαίτηση, ανάλογ) {
 res.status (200).json({ name: 'John Doe' })
}

Πρέπει να εξαγάγετε τη λειτουργία χειριστή για να λειτουργήσει.

Δημιουργία Διαδρομών API

Δημιουργήστε ένα νέο αρχείο με το όνομα todo.js στο /pages/api φάκελο για να προσθέσετε μια διαδρομή API για στοιχεία εκκρεμότητας.

Κοροϊδεύοντας τη βάση δεδομένων Todo

Για να λάβετε τα todos, πρέπει να δημιουργήσετε ένα τελικό σημείο GET. Για απλότητα. Αυτό το σεμινάριο χρησιμοποιεί μια σειρά από στοιχεία εκκρεμοτήτων αντί για βάση δεδομένων, αλλά μη διστάσετε να χρησιμοποιήσετε μια βάση δεδομένων όπως η MongoDB ή η MySQL.

Δημιουργήστε τα στοιχεία todo στο todo.js στον ριζικό φάκελο της εφαρμογής σας και, στη συνέχεια, προσθέστε τα ακόλουθα δεδομένα.

εξαγωγήσυνθ todos = [
 {
 id: 1,
 να κάνω: "Κάνε κάτι ωραίο για κάποιον που νοιάζομαι",
 ολοκληρώθηκε το: αληθής,
 ID χρήστη: 26,
 },
 {
 id: 2,
 να κάνω: "Απομνημονεύστε τις πενήντα πολιτείες και τις πρωτεύουσές τους",
 ολοκληρώθηκε το: ψευδής,
 ID χρήστη: 48,
 },
// άλλα todos
];

Αυτά τα αντικείμενα εργασίας προέρχονται από τον ιστότοπο DummyJSON, α REST API για εικονικά δεδομένα. Μπορείτε να βρείτε τα ακριβή δεδομένα από αυτό Τελικό σημείο DummyJSON todos.

Στη συνέχεια, δημιουργήστε τη διαδρομή API μέσα /pages/api/todos.js και προσθέστε τη λειτουργία χειριστή.

εισαγωγή { todos } από "../../να κάνω";
εξαγωγήλειτουργίαχειριστής(απαίτηση, ανάλογ) {
συνθ { μέθοδος } = απαίτηση;
διακόπτης (μέθοδος) {
 υπόθεση "ΠΑΙΡΝΩ":
res.κατάσταση(200).json(todos);
Διακοπή;
 υπόθεση "ΘΕΣΗ":
συνθ { todo, ολοκληρωμένο } = req.body;
todos.Σπρώξτε({
ταυτότητα: todos.μήκος + 1,
 να κάνω,
 ολοκληρώθηκε το,
 });
res.κατάσταση(200).json(todos);
Διακοπή;
Προκαθορισμένο:
 res.setHeader("Επιτρέπω", ["ΠΑΙΡΝΩ", "ΘΕΣΗ"]);
 res.status(405).τέλος(`Μέθοδος ${μέθοδος} Δεν επιτρέπεται`);
Διακοπή;
 }
}

Αυτή η διαδρομή χειρίζεται τα τελικά σημεία GET και POST. Επιστρέφει όλες τις εκκρεμότητες για το αίτημα GET και προσθέτει ένα αντικείμενο εκκρεμοτήτων στη βάση δεδομένων εκκρεμοτήτων για ένα αίτημα POST. Για άλλες μεθόδους, ο χειριστής επιστρέφει ένα σφάλμα.

Κατανάλωση διαδρομών API στο Frontend

Έχετε δημιουργήσει ένα τελικό σημείο API που επιστρέφει ένα αντικείμενο JSON που περιέχει έναν πίνακα εργασιών.

Για να καταναλώσετε το API, δημιουργήστε μια συνάρτηση που ονομάζεται fetchTodos που ανακτά δεδομένα από το τελικό σημείο του API. Η συνάρτηση χρησιμοποιεί τη μέθοδο ανάκτησης, αλλά μπορείτε επίσης χρησιμοποιήστε το Axios για να κάνετε αιτήματα API. Στη συνέχεια, καλέστε αυτήν τη λειτουργία όταν κάνετε κλικ σε ένα κουμπί.

εισαγωγή Κεφάλι από "επόμενο/κεφάλι";
εισαγωγή { useState } από "αντιδρώ"; 
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
συνθ [todos, settodos] = useState([]);
συνθ fetchTodos = ασυγχρονισμός () => {
συνθ ανταπόκριση = αναμένω φέρω("/api/todos");
συνθ δεδομένα = αναμένω answer.json();
 settodos (δεδομένα);
 };
ΕΠΙΣΤΡΟΦΗ (
<div className={styles.container}>
<Κεφάλι>
<τίτλος>Δημιουργία Επόμενης Εφαρμογής</title>
<μετα όνομα="περιγραφή" περιεχόμενο="Δημιουργήθηκε από τη δημιουργία επόμενης εφαρμογής" />
<σύνδεσμος rel="εικόνισμα" href="/favicon.ico" />
</Head>
<κύριος>
<κουμπί onClick={fetchTodos}>Λάβετε εργασίες</button>
<ul>
 {todos.map((todo) => {
ΕΠΙΣΤΡΟΦΗ (
<li
 style={{ color: `${todo.completed? "πράσινος": "το κόκκινο"}` }}
 key={todo.id}
>
 {todo.todo}:{todo.completed}.
</li>
 );
 })}
</ul>
</main>
</div>
 );
}

Η λίστα σε αυτό το απόσπασμα εμφανίζει τα στοιχεία εργασίας κατά την ανάκτησή τους.

Για το τελικό σημείο POST, δημιουργήστε μια νέα συνάρτηση που ονομάζεται saveTodo που κάνει ένα αίτημα POST στο API. Το αίτημα ανάκτησης αποθηκεύει το νέο αντικείμενο εργασίας στο σώμα και επιστρέφει όλα τα αντικείμενα εργασίας, συμπεριλαμβανομένου του νέου. Στη συνέχεια, η συνάρτηση saveTodo τα αποθηκεύει στην κατάσταση εκκρεμοτήτων.

συνθ saveTodo = ασυγχρονισμός () => {
συνθ ανταπόκριση = αναμένω φέρω("/api/todos", {
 μέθοδος: "ΘΕΣΗ",
 σώμα: JSON.stringify (newTodo),
 κεφαλίδες: {
"Τύπος περιεχομένου": "εφαρμογή/json",
 },
 });
συνθ δεδομένα = αναμένω answer.json();
 settodos (δεδομένα);
};

Στη συνέχεια, δημιουργήστε μια φόρμα με μια γραμμή εισαγωγής κειμένου για να λάβετε το νέο αντικείμενο εργασίας. Η συνάρτηση χειριστή υποβολής αυτής της φόρμας θα καλέσει τη συνάρτηση saveTodo.

εισαγωγή Κεφάλι από "επόμενο/κεφάλι";
εισαγωγή { useReducer, useState } από "αντιδρώ";
εισαγωγή στυλ από "../styles/Home.module.css";
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
συνθ [todos, settodos] = useState([]);
συνθ [newTodo, setnewTodo] = useState({
 να κάνω: "",
 ολοκληρώθηκε το: ψευδής,
 });
συνθ fetchTodos = ασυγχρονισμός () => {
// fetchTodos
 };
συνθ saveTodo = ασυγχρονισμός (ε) => {
συνθ ανταπόκριση = αναμένω φέρω("/api/todos", {
 μέθοδος: "ΘΕΣΗ",
 σώμα: JSON.stringify (newTodo),
 κεφαλίδες: {
"Τύπος περιεχομένου": "εφαρμογή/json",
 },
 });
συνθ δεδομένα = αναμένω answer.json();
 settodos (δεδομένα);
 };
συνθ handleChange = (e) => {
 setnewTodo({
να κάνω: μι.στόχος.αξία,
 });
 };
συνθ handleSubmit = (e) => {
μι.preventDefault();
 saveTodo();
 setnewTodo({
 να κάνω: '',
 });
 };
ΕΠΙΣΤΡΟΦΗ (
<div className={styles.container}>
<Κεφάλι>
<τίτλος>Δημιουργία Επόμενης Εφαρμογής</title>
<μετα όνομα="περιγραφή" περιεχόμενο="Δημιουργήθηκε από τη δημιουργία επόμενης εφαρμογής" />
<σύνδεσμος rel="εικόνισμα" href="/favicon.ico" />
</Head>
<κύριος>
// Ανακτά τα στοιχεία εργασίας όταν γίνεται κλικ
<κουμπί onClick={fetchTodos}>Λάβετε εργασίες</button>
// Αποθηκεύει ένα νέο αντικείμενο εργασίας όταν υποβάλλεται
<φόρμα onSubmit={handleSubmit}>
<τύπος εισόδου="κείμενο" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
 {// λίστα εργασιών}
</ul>
</main>
</div>
 );
}

Ο χειριστής προσθέτει μια νέα εργασία στη βάση δεδομένων κάθε φορά που ένας χρήστης υποβάλλει τη φόρμα. Επίσης, αυτή η συνάρτηση ενημερώνει την τιμή todos χρησιμοποιώντας τα δεδομένα που λαμβάνονται από το API, το οποίο με τη σειρά του προσθέτει το νέο αντικείμενο εργασίας στη λίστα.

Η δρομολόγηση API είναι μόνο ένα από τα δυνατά σημεία του Next.js

Έχετε δει πώς δημιουργείτε και χρησιμοποιείτε μια διαδρομή API Next.js. Τώρα μπορείτε να δημιουργήσετε μια εφαρμογή πλήρους στοίβας χωρίς να φύγετε από το φάκελο του έργου Next.js. Η δρομολόγηση API είναι ένα από τα πολλά οφέλη που παρέχει το Next.js.

Το Next.js προσφέρει επίσης βελτιστοποιήσεις απόδοσης, όπως διαχωρισμό κώδικα, αργή φόρτωση και ενσωματωμένη υποστήριξη CSS. Εάν δημιουργείτε έναν ιστότοπο που πρέπει να είναι γρήγορος και φιλικός προς το SEO, θα πρέπει να εξετάσετε το Next.js.