Sono finiti i giorni in cui dovevi creare un back-end separato per il tuo sito web. Con il routing API basato su file Next.js, puoi semplificarti la vita scrivendo la tua API all'interno di un progetto Next.js.
Next.js è un meta-framework React con funzionalità che semplificano il processo di creazione di app Web pronte per la produzione. Vedrai come creare un'API REST in Next.js e utilizzare i dati da quell'API su una pagina Next.js.
Crea un progetto Next.js utilizzando create-next-app
Puoi creare un nuovo progetto Next.js utilizzando lo strumento CLI create-next-app. Installa i pacchetti e i file necessari per iniziare a creare un'applicazione Next.js.
Esegui questo comando in un terminale per creare una nuova cartella Next.js denominata api-routes. Potresti ricevere una richiesta di installazione di create-next-app.
npx creare-Prossimo-app api-route
Al termine del comando, apri la cartella api-routes per iniziare a creare le route API.
Instradamento API in Next.js
Le rotte API vengono eseguite sul server e hanno molti usi come il salvataggio dei dati utente in un database o il recupero dei dati da un'API senza aumentare il valore
Errore criterio CORS.In Next.js, devi creare percorsi API all'interno della cartella /pages/api. Next.js genera endpoint API per ciascuno dei file in questa cartella. Se aggiungi user.js a /pages/api, Next.js creerà un endpoint in http://localhost: 3000/api/utente.
Una route API Next.js di base ha la sintassi seguente.
esportarepredefinitofunzionegestore(richiesta, ris) {
res.status (200).json({ nome: 'John Doe' })
}
È necessario esportare la funzione del gestore affinché funzioni.
Creazione di percorsi API
Crea un nuovo file chiamato todo.js nel file /pages/api folder per aggiungere una route API per gli elementi todo.
Deridere il database Todo
Per ottenere le cose da fare, devi creare un endpoint GET. Per semplicità. Questo tutorial utilizza una serie di elementi todo invece di un database, ma sentiti libero di utilizzare un database come MongoDB o MySQL.
Crea gli elementi todo in todo.js nella cartella principale della tua applicazione, quindi aggiungi i seguenti dati.
esportarecost tutti = [
{
id: 1,
fare: "Fai qualcosa di carino per qualcuno a cui tengo",
completato: VERO,
ID utente: 26,
},
{
id: 2,
fare: "Memorizza i cinquanta stati e le loro capitali",
completato: falso,
ID utente: 48,
},
// altre cose
];
Questi elementi todo provengono dal sito Web DummyJSON, a API REST per dati fittizi. Puoi trovare i dati esatti da questo DummyJSON tutto l'endpoint.
Successivamente, crea la route API in /pages/api/todos.js e aggiungi la funzione gestore.
importare {tutto} da "../../fare";esportarefunzionegestore(richiesta, ris) {
cost {metodo} = req;
interruttore (metodo) {
caso "OTTENERE":
ris.stato(200).json(tutti);
rottura;
caso "INVIARE":
cost { todo, completato } = req.body;
tutti.spingere({
id: tutti.lunghezza + 1,
fare,
completato,
});
ris.stato(200).json(tutti);
rottura;
predefinito:
res.setHeader("Permettere", ["OTTENERE", "INVIARE"]);
res.stato(405).FINE(`Metodo ${metodo} Non consentito`);
rottura;
}
}
Questa route gestisce gli endpoint GET e POST. Restituisce tutte le cose da fare per la richiesta GET e aggiunge un elemento da fare al database delle cose da fare per una richiesta POST. Per altri metodi, il gestore restituisce un errore.
Consumo di route API nel front-end
Hai creato un endpoint API che restituisce un oggetto JSON contenente un array di cose da fare.
Per utilizzare l'API, crea una funzione chiamata fetchTodos che recupera i dati dall'endpoint API. La funzione utilizza il metodo fetch ma puoi anche farlo utilizzare Axios per effettuare richieste API. Quindi chiama questa funzione quando fai clic su un pulsante.
importare Testa da "successivo/testa";
importare { usaStato } da "reagire";esportarepredefinitofunzioneCasa() {
cost [todos, settodos] = useState([]);cost fetchTodos = asincrono () => {
cost risposta = aspetta andare a prendere("/api/tutto");
cost dati = aspetta risposta.json();
settodos (dati);
};
ritorno (
<div className={styles.container}>
<Testa>
<titolo>Crea app successiva</title>
<nome meta="descrizione" contenuto="Generato da crea la prossima app" />
<collegamento rel="icona" href="/favicon.ico" />
</Head>
<principale>
<pulsante onClick={fetchTodos}>Ottieni tutto</button>
<Ul>
{todos.map((todo) => {
ritorno (
<li
style={{ color: `${todo.completed? "verde": "rosso"}` }}
chiave={todo.id}
>
{todo.todo}:{todo.completato}.
</li>
);
})}
</ul>
</main>
</div>
);
}
L'elenco in questo frammento mostra le cose da fare quando vengono recuperate.
Per l'endpoint POST, crea una nuova funzione denominata saveTodo che invia una richiesta POST all'API. La richiesta di recupero memorizza il nuovo elemento todo nel corpo e restituisce tutti gli elementi todo incluso quello nuovo. La funzione saveTodo li memorizza quindi nello stato todos.
cost saveTodo = asincrono () => {
cost risposta = aspetta andare a prendere("/api/tutto", {
metodo: "INVIARE",
corpo: JSON.stringify (newTodo),
intestazioni: {
"Tipo di contenuto": "applicazione/json",
},
});
cost dati = aspetta risposta.json();
settodos (dati);
};
Quindi, crea un modulo con una barra di immissione del testo per ricevere il nuovo elemento todo. La funzione gestore di invio di questo modulo chiamerà la funzione saveTodo.
importare Testa da "successivo/testa";
importare { useReducer, useState } da "reagire";
importare stili da "../styles/Home.module.css";esportarepredefinitofunzioneCasa() {
cost [todos, settodos] = useState([]);cost [newTodo, setnewTodo] = useState({
fare: "",
completato: falso,
});cost fetchTodos = asincrono () => {
// recuperaTodos
};
cost saveTodo = asincrono (e) => {
cost risposta = aspetta andare a prendere("/api/tutto", {
metodo: "INVIARE",
corpo: JSON.stringify (newTodo),
intestazioni: {
"Tipo di contenuto": "applicazione/json",
},
});cost dati = aspetta risposta.json();
settodos (dati);
};cost handleChange = (e) => {
setnewTodo({
fare: e.bersaglio.valore,
});
};cost handleSubmit = (e) => {
e.preventPredefinito();
salvaTodo();
setnewTodo({
fare: '',
});
};ritorno (
<div className={styles.container}>
<Testa>
<titolo>Crea app successiva</title>
<nome meta="descrizione" contenuto="Generato da crea la prossima app" />
<collegamento rel="icona" href="/favicon.ico" />
</Head>
<principale>
// Recupera gli elementi da fare quando si fa clic
<pulsante onClick={fetchTodos}>Ottieni tutto</button>
// Salva un nuovo elemento todo quando viene inviato
<modulo onSubmit={handleSubmit}>
<tipo di input="testo" onChange={handleChange} value={newTodo.todo} />
</form>
<Ul>
{// elenca le cose da fare}
</ul>
</main>
</div>
);
}
Il gestore aggiunge una nuova attività al database ogni volta che un utente invia il modulo. Inoltre, questa funzione aggiorna il valore delle cose da fare utilizzando i dati ricevuti dall'API che a sua volta aggiunge il nuovo elemento delle cose da fare all'elenco.
Il routing API è solo uno dei punti di forza di Next.js
Hai visto come costruire e utilizzare un percorso API Next.js. Ora puoi creare un'applicazione full stack senza uscire dalla cartella del progetto Next.js. Il routing API è uno dei tanti vantaggi offerti da Next.js.
Next.js offre anche ottimizzazioni delle prestazioni come suddivisione del codice, caricamento lento e supporto CSS integrato. Se stai costruendo un sito web che deve essere veloce e SEO friendly, dovresti prendere in considerazione Next.js.
