Next.js est un framework de développement web open-source créé par la société privée Vercel qui fournit des applications web basées sur React avec un rendu côté serveur et une génération de site web statique. La documentation de React mentionne Next.js parmi les "chaînes d'outils recommandées" et le conseille aux développeurs lors de la "construction d'un site web rendu côté serveur avec Node.js" Alors que les applications React traditionnelles ne peuvent rendre leur contenu que dans le navigateur côté client, Next.js étend cette fonctionnalité pour inclure des applications rendues côté serveur.Comme annoncé à la Next.js Conf, Next.js 14 est la version la plus ciblée avec :
- Turbopack : 5 000 tests réussis pour App & Pages Router
- Démarrage du serveur local 53% plus rapide
- 94% de mises à jour de code plus rapides avec Fast Refresh
- Actions serveur (Stable) : Mutations progressivement améliorées
- Intégration de la mise en cache et de la revalidation
- Appels de fonctions simples, ou fonctionnement natif avec les formulaires
- Pré-rendus partiels (aperçu) : Réponse statique initiale rapide + contenu dynamique en continu
- Next.js Learn (Nouveau) : Cours gratuit sur l'App Router, l'authentification, les bases de données, et plus encore.
Mettez à niveau dès aujourd'hui ou démarrez avec :
Terminal
| Code : | Sélectionner tout |
npx create-next-app@latest
Compilateur Next.js : Turbopack
Depuis Next.js 13, l'équipe de Next.js a travaillé pour améliorer la performance du développement local dans Next.js, à la fois dans les Pages et dans l'App Router.
Auparavant, ils avaient réécrient next dev et d'autres parties de Next.js pour soutenir cet effort. Ils ont depuis changé leur approche pour être plus incrémental. Cela signifie que le compilateur basé sur Rust atteindra bientôt la stabilité, car ils se sont recentrés sur le support de toutes les fonctionnalités de Next.js en premier.
5 000 tests d'intégration pour next dev passent maintenant avec Turbopack, le moteur Rust sous-jacent. Ces tests incluent 7 ans de corrections de bugs et de reproductions.
En testant vercel.com, une grande application Next.js, ils ont vu :
- Un démarrage du serveur local jusqu'à 53,3 % plus rapide
- Jusqu'à 94,7 % de mises à jour de code plus rapides avec Fast Refresh
Ce benchmark est un résultat pratique des améliorations de performance auxquelles vous pouvez vous attendre avec une grande application (et un grand graphique de modules). Avec 90% de tests réussis pour next dev, vous devriez voir des performances plus rapides et plus fiables lorsque vous utilisez next dev --turbo.
Une fois qu'ils auront atteint 100% des tests réussis, ils passeront Turbopack à la version stable dans une prochaine version mineure. Ils continueront également à supporter l'utilisation de webpack pour les configurations personnalisées et les plugins de l'écosystème.
Formes et mutations
Next.js 9 a introduit les API Routes, un moyen de construire rapidement des points d'accès au backend en même temps que le code du frontend.
Par exemple, vous pouvez créer un nouveau fichier dans le répertoire api/ :
pages/api/submit.ts
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 | import type { NextApiRequest, NextApiResponse } from 'next';
export default async function handler(
req: NextApiRequest,
res: NextApiResponse,
) {
const data = req.body;
const id = await createItem(data);
res.status(200).json({ id });
} |
pages/index.tsx
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | import { FormEvent } from 'react';
export default function Page() {
async function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const response = await fetch('/api/submit', {
method: 'POST',
body: formData,
});
// Handle response if necessary
const data = await response.json();
// ...
}
return (
<form onSubmit={onSubmit}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
);
} |
Actions serveur (stable)
Et si vous n'aviez pas besoin de créer manuellement une route API ? Au lieu de cela, vous pourriez définir une fonction qui s'exécute en toute sécurité sur le serveur, appelée directement à partir de vos composants React.
L'App Router est construit sur le canal React canary, qui est stable pour les frameworks afin d'adopter de nouvelles fonctionnalités. Depuis la v14, Next.js est passé à la dernière version de React canary, qui inclut des actions serveurs stables.
L'exemple précédent du Pages Router peut être simplifié en un seul fichier :
app/page.tsx...
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.