nextjs

nextjs.md

Plein d'exemples

Documentation

Résumé du cours

• code splitting par défaut par page
• s'il y a un Link dans une page, en production uniquement, il prefetche la page du lien en question quand on passe la souris dessus
• static generation : généré au build time (sauf en dev) et ne change jamais
  • peut être cachée par un CDN car c'est une page HTML (code source en HTML)
  • par défaut, une page est statique
  • quand on clique sur une page static, dans le network, tout est rechargé mais comme tout est en cache, c'est ok
  • getStaticProps : pour fetcher des data externes
    • Lancé seulement du côté serveur
    • Uniquement dans une "page"
• server-side rendering : généré à chaque requête et est dynamique
  • getServerSideProps
  • we recommend using Static Generation over Server-side Rendering for performance reasons
• client-side rendering
  • fetch est un polyfill des deux côtés
  • utiliser le hook SWR à la place de fetch
• pages that begin with [ and end with ] are dynamic routes in Next.js.
  • getStaticPaths
• le hook useRouter existe au besoin
• pages/404.js pour customiser la 404
• do Not Fetch an API Route from getStaticProps or getStaticPaths
• le répertoire pages est obligatoire et défini les URLs du site
• mieux vaut utiliser swr plutôt que useEffect + fetch
• [name].module.css permet d'éviter les conflits de CSS et tu l'importes où tu veux
• getLayout pour avoir un layout différent par page
• <Image ... /> à la place de <img ... />
• on peut ajouter la font au build
• fast refresh change juste le bon code qui a été modifié et garde les states en cours
• eslint est out of the box
• use .env.local to load environment variables
  • et .env.test pour les tests
• expose environment variables to the browser by prefixing with NEXT_PUBLIC_
• on peut injecter des scripts tierces grâce à <Script ... />