Next et Nuxt js:

Nuxt :
1) A propos :
 Framework qui est combinée par la puissance de Vue.js avec les fonctionnalités
de rendu cote serveur pour le rendre plus puissant
 Permet de nous fournir une application complète de rendu cote client Vue.js
 Livrer avec une architecture de développement frontale prête pour l’entreprise
qui nous permet de résoudre le problème de structure.
2) Pourquoi ?
 Etant base sur vue.je et node.js pas besoin d’apprendre de nouveau langage de
programmation
 Permet de développer des applications qui peuvent s’executer cote client comme
cote serveur avec le même code grâce au plugin SSR(serveur Side Rendered)
 System des routes automatiques

Next : Framework javascript léger

1. A propos :
 Construit pour offrir des solutions aux problèmes de structure de code et de
stratégie d’organisation de code. Il combine des approches modernes et
modulaires aux principe du génie logiciel.

2. Pourquoi ?
 Facile à apprendre et à maitriser
 Connu pour avoir une excellente structure architecturale pour les applications
d’entreprise qui permet de créer des applications hautement évolutives et
maintenable facilement.
 Nous permettons de créer facilement des services backend tels que des API
RESTful, des applications GraphQL, des applications MVC, des sockets web, des
CLI et des taches cron avec react.
 Utilise des technologies modernes telles que TypeScript, des models
architecturaux à toute épreuve, une excellente documentation et des tests
unitaires faciles.
 Nous pouvons créer des applications d’entreprise évolutives et faciles à
maintenir.
 Nest.js a été créé pour construire des applications monolithes et micro-services à
grande échelle dans lesquelles l’architecture est déjà prise en charge.
---------------------------------------------------------------------------------------------------------------
 Installations :
Les prérequis :
 WSL
 Installer nvm, node.js et npm

Nuxt.js:
Installations :
 Install nuxt.js via npm(npm create nuxt-app nuxt-app-name)
Next.js:
Installations:
 Install nuxt.js via npm $ npm create next-app next-app-name
 Via yarn $ yarn create next app-next/ npm $ npm create next app-next

-------------------------------------------------------------------------------------------------------------
Structure de projet:
Nuxt.js :

 Tous les dossiers nécessaires sont sur un même niveau :

- “pages” qui contient toutes les vues de notre application ainsi que toutes les
routes
- “components” regroupant toute nos components.
- “assets” contient nos fichier styles
- “static” servie à la racine et contient des fichiers qui doivent conserver leur nom
(Ex: les favicon).
- “nuxt.config.js” est le point de configurations pour nuxt
- “package.json” contient les dépendances et les scripts
Next.js :

 Tous les scripts son classée dans une même dossier “script” à la racine de
l’application
 Toutes les dépendances ainsi que les packages nécessaire sont stocker dans le fichier
packages
  Les API ainsi sont visibles dans le fichier docs a la racine du projet(routing, migration
…)
----------------------------------------------------------------------------------------------------------------
Cycle de vie:
Les étapes suivantes seront exécutées pour chaque requête sur notre application
Nuxt.js :
1. Serveur :
 Le processus de génération(nuxt generate)
 Hooks Nuxt
 ServerMiddleware
 Les plugins de Nuxt cote serveur
 NuxtServerInit
 Middliware(globale middeware, Layout and Route)
 AsyncData
 BeforeCreate(cycle de vie de vue.js)
 Created(cycle de vie de vue.js)
 Le nouveau fetch(du haut vers le bas, en parallèle si ce sont des voisins)
 Serialisation du state(render:route de Nuxt)
 Le rendu HTML(render:routes)
 Generate:before hooks de nuxt
 Generate:done quand tous les fichiers HTML ont été générés.
2. Client :
 Reçoit le HTML
 Charge les ressources (ex. Js)
 Hydratation de Vue
 Middleware (global, layout and route)
 AsyncData
 Plugins clients de nuxt
 BeforeCreate (methode de cycle de vie de Vue)
 Created (methode de cycle de vie de Vue)
 Le nouveau fetch
 BeforeMount (methode de cycle de vie de Vue)
 Mounted (methode de cycle de vie de Vue)

Next.js :
Toutes les parties du développement sur nextjs se ferras en deux exécutions :
 Le client side (execution classique de javascript)
 Le serveur side (execution NodeJS)