#53

Migrer

de Gatsby à Next.js

 

@alexisjanvier

@marmelab

Alexis Janvier

developppeur chez marmelab

depuis 2014

Atelier d'innovation digitale, développe vos projets d'innovation web et mobile avec agilité, pragmatisme et gourmandise.

à Nancy, Ils n'y connaissent rien à l'équitation.

Pourquoi ce talk ?

Site du Caen.Camp en Gatsby.js

Une API

Déroulé de cette présentation

  1. C'est quoi Next.js ?
  2. Mise en place d'un projet Next.js: le site du CaenCamp
  3. L'outillage classique autour du projet
  4. Les outils plus marginaux
  5. Conclusion

C'est quoi Next.js ?

Une appproche composant

Une transpilation et un packaging simplifiés

Le rendu côté serveur (SSR) natif

Mise en place d'un projet Next.js :

le site du CaenCamp

INSTANCIER un projet next 

❯ npx create-next-app demo-app
Creating a new Next.js app in /home/alexisjanvier/Code/CCC/demo-app.

Using npm.

Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- eslint
- eslint-config-next

Initialized a git repository.

Success! Created demo-app at /home/alexisjanvier/Code/CCC/demo-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

un routeur basé sur le système de fichiers

Du SSR sous hormones

Plusieurs modes de SSR composable par page :

  1. A la requête (SSR classique)
  2. Pré-calcule au build (SSG pour static site generation) avec possibilité de régénération.

 

Le build de production

Le déploiement

Les autres plus

  • Des routes d'API
  • Gestion de l'internationalisation
  • Composant d'optimisation des images
  • Analyse de performances live (Web Vitals, Vercel)

 

L'outillage autour du projet

Les outils plus marginaux

Conclusion

Testez !

MERCI

Migrer de Gatsby à Next.js

By Alexis Janvier

Migrer de Gatsby à Next.js

Nous sommes en train de migrer l'ancien site du CaenCamp réalisé avec Gatsby vers un nouveau site basé sur Next.js. C'est l'occasion de faire un retour d'expérience sur les grands principes de fonctionnement de Next.js, mais aussi sur les outils mis en place autour de ce projet de refonte: linters, tests, intégration continue, déploiement, budget de performance ou encore impact énergétique.

  • 61
Loading comments...

More from Alexis Janvier