Apprenez cette technique puissante fournie par Next.js pour créer un point de terminaison d'API dans une application Next.js
En plus de créeritinéraires de page, ce qui signifie que les pages sont servies au navigateur sous forme de pages Web, Next.js peut créerRoutes API.
C'est une fonctionnalité très intéressante car cela signifie que Next.js peut être utilisé pour créer une interface pour les données qui sont stockées et récupérées par Next.js lui-même, en transférant JSON via des requêtes de récupération.
Les routes API vivent sous le/pages/api/
dossier et sont mappés au/api
point final.
Cette fonction esttrèsutile lors de la création d'applications.
Dans ces routes, nous écrivons du code Node.js (plutôt que du code React). C'est un changement de paradigme, vous passez du frontend au backend, mais de manière très transparente.
Dites que vous avez un/pages/api/comments.js
fichier, dont le but est de renvoyer les commentaires d'un article de blog au format JSON.
Supposons que vous ayez une liste de commentaires stockés dans uncomments.json
déposer:
[
{
"comment": "First"
},
{
"comment": "Nice post"
}
]
Voici un exemple de code, qui renvoie au client la liste des commentaires:
import comments from './comments.json'
export default (req, res) => {
res.status(200).json(feeds)
}
Il écoutera sur le/api/commments
URL des requêtes GET, et vous pouvez essayer de l'appeler à l'aide de votre navigateur:
Les routes API peuvent également utiliserroutage dynamiquecomme des pages, utilisez le[]
syntaxe pour créer une route API dynamique, comme/pages/api/comments/[id].js
qui récupérera les commentaires spécifiques à un identifiant de publication.
À l'intérieur de[id].js
vous pouvez récupérer leid
valeur en le recherchant dans lereq.query
objet:
import comments from '../comments.json'
export default (req, res) => {
res.status(200).json({ post: req.query.id, comments })
}
Voici, vous pouvez voir le code ci-dessus en action:
Dans les pages dynamiques, vous devez importeruseRouter
denext/router
, puis récupérez l'objet routeur en utilisantconst router = useRouter()
, et ensuite nous pourrions obtenir leid
valeur en utilisantrouter.query.id
.
Côté serveur, tout est plus simple, car la requête est attachée à l'objet de requête.
Si vous effectuez une requête POST, tout fonctionne de la même manière - tout passe par cette exportation par défaut.
Pour séparer POST de GET et d'autres méthodes HTTP (PUT, DELETE), recherchez lereq.method
évaluer:
export default (req, res) => {
switch (req.method) {
case 'GET':
//...
break
case 'POST':
//...
break
default:
res.status(405).end() //Method Not Allowed
break
}
}
En plus dereq.query
etreq.method
nous l'avons déjà vu, nous avons accès aux cookies en référençantreq.cookies
, le corps de la requête dansreq.body
.
Sous les capots, tout est propulsé parMicro, une bibliothèque qui alimente des microservices HTTP asynchrones, créée par la même équipe qui a construit Next.js.
Vous pouvez utiliser n'importe quel middleware Micro dans nos routes API pour ajouter plus de fonctionnalités.
Téléchargez mon gratuitManuel Next.js
Plus de prochains tutoriels:
- Premiers pas avec Next.js
- Next.js vs Gatsby vs create-react-app
- Comment installer Next.js
- Lier deux pages dans Next.js à l'aide de Link
- Contenu dynamique dans Next.js avec le routeur
- Flux de données vers un composant Next.js à l'aide de getInitialProps
- Styliser les composants Next.js à l'aide de CSS
- Pré-extraire du contenu dans Next.js
- Utilisation du routeur pour détecter le lien actif dans Next.js
- Afficher la source pour confirmer que SSR fonctionne dans Next.js
- Next.js: remplissez la balise head avec des balises personnalisées
- Déployer une application Next.js maintenant
- Next.js: exécutez le code uniquement côté serveur ou côté client dans Next.js
- Déployer une application Next.js en production
- Comment analyser les bundles d'applications Next.js
- Modules de chargement paresseux dans Next.js
- Ajout d'un composant wrapper à votre application Next.js
- Les icônes ajoutées par Next.js à votre application
- Les offres groupées d'applications Next.js
- Comment utiliser le routeur Next.js
- Comment utiliser les routes d'API Next.js
- Comment obtenir des cookies côté serveur dans une application Next.js
- Comment changer le port d'une application Next.js