tm nextjs starter
1.0.0
Il s'agit de mon kit de démarrage et de mon application de démonstration React minimaux mais fonctionnels en date d'août 2018.
Si vous en avez assez de la lassitude de Javascript et que vous souhaitez commencer rapidement et facilement, jetez un œil à ceci. Développer une application SPA React moderne n’est pas beaucoup plus simple que cela.
L'application de démonstration est un site statique, une application de base d'une seule page qui comporte quelques pages adressables chargées paresseusement à la demande. Il démontre les opérations CRUD de base : 1) lister les films, 2) afficher les détails du film, 3) créer/modifier et 4) supprimer un film.
La démo utilise le navigateur localStorage pour le stockage des données, ce qui signifie qu'elle fonctionne sans backend. Les sources contiennent un module qui effectue de vrais appels AJAX vers un backend REST - il vous suffit d'activer le module et d'écrire un serveur, et vous êtes sur la bonne voie pour avoir une véritable application Web. J'ai développé le serveur API REST Python RESTPie3 qui implémente cette API de film simple à titre d'exemple.
L'application de démonstration consiste en une pile technologique simple mais puissante qui fournit les fonctionnalités essentielles à la création d'applications Web modernes. Il repose sur quelques grandes bibliothèques :
├── /components/ # React components used by pages
│ └── /MyHeader.js # Site header component, just as an example
├── /pages/ # pages
│ ├── /_app.jsx # top level layout of the app, loaded once
│ ├── /about.jsx # about page
│ ├── /index.jsx # home page, lists movies
│ ├── /moviedetails.jsx # details page, views a movie
│ └── /movieedit.jsx # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /styles/ # global SASS files
│ └── /layout.sass # main layout
├── config.js # app config, select ajax or localstorage
├── next.config.js # nextjs configuration, almost empty
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
├── serverapi_localstorage.js # API, talks to localStorage
└── store.js # data store, managed by MobX
Voici comment exécuter le démarreur sur votre ordinateur local :
$ git clone https://github.com/tomimick/tm-nextjs-starter
$ cd tm-nextjs-starter
$ npm install
$ npm run devPointez ensuite votre navigateur sur http://localhost:3000.
Lorsque l'un des fichiers dépendants est modifié, les modifications sont chargées à chaud et deviennent visibles instantanément. Profitez du développement !
Nextjs est un excellent framework qui apporte la bonne dose d'ordre dans le domaine chaotique du développement Javascript. Il facilite le démarrage du développement de React en prenant soin des configurations et des outils, vous permettant ainsi de vous concentrer sur l'application principale dès le début. Il fournit une fonctionnalité de base minimale bien conçue qui est pratiquement nécessaire à toutes les applications Web.
Les avantages de Next.js en un mot :
Nextjs est suffisamment mature, a été publié il y a environ 2 ans et dispose d'un écosystème de plugins sain. Webpack est utilisé pour le travail de base.
Il est parfaitement possible et probable que Nextjs soit remplacé ou fusionné avec quelque chose d'encore meilleur à l'avenir, mais il résume maintenant quelques bonnes pratiques qui valent la peine d'être essayées.
Redux est généralement la première solution de gestion d'état pour les applications React. C'était l'une des premières bibliothèques disponibles, on en parle dans de nombreux blogs et elle a ainsi acquis presque un statut standard.
J'ai eu des sentiments mitigés à propos de Redux dès la première rencontre. J'aime toujours penser et faire des recherches par moi-même et après avoir lu de nombreuses bases de code React+Redux et évalué d'autres options, je pense que Redux avec son paradigme fonctionnel et pur me semble un peu abstrait et trop conçu. (Plus Redux est également utilisé dans des endroits où il n'est tout simplement pas nécessaire. Trop facile d'aller par-dessus bord.)
À mon avis, MobX offre une solution de gestion d'état plus simple et plus pratique que Redux. C’est plus facile à comprendre et à comprendre. Cela nécessite moins de code passe-partout. Vous avez votre état que vous déclarez observable, puis faites simplement muter votre état et tous les observateurs sont automatiquement mis à jour. MobX fonctionne et reste à l'écart.
Les ingénieurs se demandent si Redux est meilleur pour une application plus grande ou pour une « vraie » application, mais c'est une bataille sans fin. Ma stratégie consiste généralement à garder mon code simple et efficace, sans même essayer de développer une "grosse" application en premier lieu...
Nextjs prend en charge les feuilles de style CSS globales du site et locales de la page.
style jsx (voir about.jsx par exemple).Dans cette démo, j'expérimente également la fonctionnalité de grille CSS qui est une norme de mise en page Web récente. La grille CSS est un outil de mise en page puissant qui fournit enfin un moyen robuste de définir une grille bidimensionnelle. Cela changera la façon dont nous construisons les mises en page. Si vous n'avez pas encore appris ou lu sur la grille CSS, 2018 est le bon moment pour le faire. Le support du navigateur est déjà très bon. Cela deviendra bientôt courant.
La possibilité de générer un site statique avec Nextjs est un outil important qui permet d'exécuter des applications sans serveur backend. Vous pouvez exporter le site vers les pages GitHub, Netlify ou Amazon S3. (Mais vérifiez quelques pièges avec les préfixes site+lien avec les pages Github.)
Un autre avantage de la génération statique est de pouvoir connecter l'application à n'importe quel backend REST, quelle que soit la langue du backend. Une séparation nette du frontend et du backend permet également une modularisation au niveau technique et éventuellement au niveau de l'équipe.
Une remarque sur le référencement : pour exporter des versions statiques des pages avec des données dynamiques, vous devrez scripter toutes les pages dans la configuration next.config.js, voir cet exemple.
Pour générer un site statique, exécutez simplement
$ npm run export Et les fichiers statiques seront générés dans le dossier out .
Pour tester le site statique localement via un serveur www local, je lance rapidement un script python : (python3 -m http.server)
$ npm run pyserveEt puis testez le site sur http://localhost:8000.
La taille de la page d'accueil est correcte, environ 94 Ko minifiés et gzippés .
Le navigateur charge la page d'accueil avec un total de 6 requêtes, et chaque nouvelle page chargée à la demande effectue une seule requête js une fois (rappelez-vous qu'avec React, tout tourne autour de Javascript, pas de HTML).
Page Size Inspector Report
URL: https://nextjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________6____94,159
Document________________________________________1_______916
-nextjs.tomicloud.com/ 916
Script__________________________________________4____92,836
-nextjs.tomicloud.com/_next.../index.js 1,053
-nextjs.tomicloud.com/_next/.../_app.js 2,506
-nextjs.tomicloud.com/_nex.../_error.js 2,490
-nextjs.tomicloud.com/.../main-6a4a..js 86,787
Stylesheet______________________________________1_______407
-nextjs.tomicloud.com/_nex.../style.css 407(Rapport de mon inspecteur de taille de page d'extension Chrome.)
Allez-y, prenez ce démarreur React et peut-être aussi mon serveur API REST Python RESTPie3 et créez votre excellent service.
Vous pouvez également me contacter pour me demander si je suis disponible pour travailler en freelance.
Si vous préférez Vue à React, j'ai également codé ce même starter avec Vue Nuxtjs.
Licence MIT
