Next.js
| Développé par | Vercel |
|---|---|
| Première version | [1] |
| Dernière version | 14 () |
| Version avancée | 14 () |
| Dépôt | github.com/vercel/next.js |
| Écrit en | JavaScript et TypeScript |
| Système d'exploitation | Multiplateforme |
| Environnement | Web |
| Type |
Framework JavaScript (en) Générateur de site statique Bibliothèque JavaScript |
| Licence | MIT License |
| Documentation | nextjs.org/docs |
| Site web | nextjs.org |
Chronologie des versions
Next.js[2] est un framework gratuit et open source s'appuyant sur la bibliothèque JavaScript React[3] et sur la technologie Node.js.
Description
[modifier | modifier le code]Le framework permet de créer des applications web universelles ou parfois appelées isomorphiques[Quoi ?].
Next.js prend en charge les techniques de rendu des pages web côté serveur (SSR : Server Side Rendering[4],[5]), le rendu statique de pages web (SSG: Static Site Generation)[4]. Il prend également en charge la génération hybride de pages web et / ou incrémentale des pages (ISR: Incremental Static Generation)[6].
Usages
[modifier | modifier le code]L'application construite avec Next.js peut être utilisée dans un navigateur comme une application web monopage mais elle peut aussi être utilisée comme un ensemble de pages générées par le serveur[7].
Style et caractéristiques
[modifier | modifier le code]Next.js supporte le stylisme avec CSS, ainsi que Scss et Sass pré-compilés, CSS-in-JS et JSX stylisé[8]. Il est également construit avec TypeScript et une prise en charge intelligente du regroupement[9]. Le transpondeur SWC open source est utilisé pour convertir et compiler le code en JavaScript qui peut être utilisé par le navigateur[10]. Webpack, un autre outil open source, est utilisé pour fusionner les modules par la suite, mais il est maintenant remplacé par TurboPack[11]. Tous ces outils sont utilisés avec npm dans le terminal[12].
La principale caractéristique de Next.js est l'utilisation du rendu côté serveur[13] pour réduire la charge sur les navigateurs web et fournir une sécurité accrue. Cela peut être fait pour n'importe quelle partie de l'application ou pour l'ensemble du système, ce qui permet d'allouer des pages à contenu riche pour un rendu côté serveur[14]. Cela peut également être fait pour les premières visites uniquement, afin de réduire la charge des navigateurs web, qui n'ont pas à charger toutes les ressources du site. La fonction de rechargement à chaud détecte les modifications au fur et à mesure qu'elles sont apportées et réaffiche les pages concernées, de sorte que le serveur n'a pas besoin d'être redémarré. Cela permet aux modifications apportées au code de l'application d'être reflétées immédiatement dans le navigateur web, bien que certains navigateurs nécessitent un rafraîchissement de la page. Le logiciel utilise le routage par page pour faciliter la tâche du développeur et prend en charge le routage dynamique. Parmi les autres fonctionnalités, citons le remplacement à chaud des modules en temps réel, la division automatique du code qui n'inclut que le code nécessaire au chargement de la page, et l'extraction préalable des pages pour réduire les temps de chargement.
Référencement
[modifier | modifier le code]L'utilisation de ce framework, présente quelques avantages[5]. La rapidité de chargement de l'application, de la construction de la page dans le navigateur, et l'intervalle de temps entre lequel l'application est chargée et le moment ou l'utilisateur peut interagir avec la page permettent à l'application générée avec Next.js de bénéficier d'un meilleur score par le moteur de recherche Google, rendant possible un meilleur classement dans les résultats de recherche, et donc une meilleure visibilité dans les résultats[15],[16],[5].
Autres fonctionnalités
[modifier | modifier le code]Le développement web est facilité par Next.js[17] entre les pages, un système de configuration pour gérer les applications multilingues[18], un éco-système de modules développé par la communauté.
Propriété
[modifier | modifier le code]Les droits d'auteur et les marques déposées de Next.js appartiennent à la société Vercel (anciennement Zeit), qui maintient et dirige également le développement open source[19].
Notes et références
[modifier | modifier le code]- « https://github.com/zeit/next.js/releases/tag/1.0.0 »
- « Next.js par Vercel - Le framework React », sur nextjs.org (consulté le )
- « React – Une bibliothèque JavaScript pour créer des interfaces utilisateurs », sur fr.reactjs.org (consulté le )
- (en) « Basic Features: Pages | Next.js », sur nextjs.org (consulté le )
- « Décidez entre client-side et server-side rendering », sur OpenClassrooms (consulté le )
- (en) « A Complete Guide To Incremental Static Regeneration (ISR) With Next.js », sur Smashing Magazine, (consulté le )
- « Building a single-page application with Next.js and React Router », sur Colin McDonnell @colinhacks (consulté le )
- (en) « Comparing Styling Methods In Next.js », sur www.smashingmagazine.com (consulté le )
- (en) « Next.js 8 now supports serverless apps », sur www.infoworld.com (consulté le )
- (en) « Next.js Compiler », sur nextjs.org (consulté le )
- (en) « Turbopack », sur nextjs.org (consulté le )
- (en) « An insider’s look at Google’s web framework contributions to Next.js and more », sur www.techrepublic.com (consulté le )
- (en) « Next.js vs Django: Choosing Between Django and Nextjs for Your Project », sur nomadicsoft.io (consulté le )
- (en) « Next.js », sur link.springer.com (consulté le )
- (en) « Rendering on the Web », sur Google Developers (consulté le )
- (en) Marc Rice, « How to ace the Google PageSpeed test (100/100) with React and Next.js », sur Medium, (consulté le )
- (en) « Routing: Introduction | Next.js », sur nextjs.org (consulté le )
- (en) « Advanced Features: Internationalized Routing | Next.js », sur nextjs.org (consulté le )
- (en) « Develop. Preview. Ship. For the best frontend teams – Vercel », sur vercel.com (consulté le )
Liens externes
[modifier | modifier le code]
- (en) Site officiel
