10 choses que tout développeur Next.js devrait savoir (mais personne ne vous dit)

Vous avez déjà déployé votre Hello World sur Vercel, joué avec getServerSideProps et vous vous sentez comme le maître de React. Mais derrière la façade de Next.js se cachent bien plus de nuances. Voici dix choses importantes qui vous aideront à vous améliorer et à ne pas paniquer à cause de bogues soudains 🧨

🚀 1. Chargement statique, serveur ou client : choisissez judicieusement

Next.js propose un choix d'approches pour le chargement des données :

• getStaticProps — génération statique

• getServerSideProps — rendu du serveur

• useEffect — logique client

🧠 Abordez cela comme un chef : tous les plats ne doivent pas être cuisinés à la commande (SSR), certains doivent être cuisinés à l'avance (SSG) et d'autres sont servis directement du garde-manger (CSR).

🧩 2. API Routes — ce sont des fonctions de mini-serveur

Les fichiers dans pages/api ne sont pas seulement du code. Ce sont de véritables fonctions sans serveur. Sans configuration du serveur Node, avec démarrage instantané. Mais rappelez-vous :

🔧 Ne construisez pas de monolithe. Il est préférable de placer la logique dans des modules séparés.

🧭 3. Routage basé sur des fichiers — la magie sans React Router

Vous voulez un nouvel itinéraire ? Créez simplement un fichier dans pages/, et voilà, l'itinéraire est prêt.

Pour les pages dynamiques :

pages/blog/[slug].js

✨ Et pour les cas complexes, les itinéraires de substitution seront utiles pages/blog/[...slug].js

📦 4. La taille du bundle est un tueur silencieux de performance

100 Ko ici, 50 Ko là... et la page se charge éternellement.

• Utilisez Bundlephobia avant d'installer de nouveaux paquets

• Appliquer l'importation dynamic() :

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), { ssr: false });

⚡ Cela permettra d'éviter le surpoids lors du premier rendu.

🌍 5. Vercel est le meilleur ami, mais pas le seul

Next.js et Vercel sont le couple parfait. Mais personne n'interdit d'héberger le projet sur Netlify, AWS ou même Heroku.

🔥 Cependant, si vous voulez le maximum des fonctionnalités edge et une optimisation rapide des images, Vercel est toujours hors compétition.

🖼️ 6. L'optimisation des images est intégrée, utilisez-la

Le <img> ordinaire appartient au siècle dernier. Utilisez le composant <Image> :

import Image from 'next/image';
<Image src="/cat.jpg" alt="Cat" width={500} height={300} />

🪄 Prise en charge du lazy loading, des tailles adaptatives, CDN - améliore Lighthouse en bonus.

🔐 7. Middleware — un nouveau point de contrôle

Vous pouvez maintenant exécuter la logique jusqu'à la fin de la requête :

import { NextResponse } from 'next/server';
export function middleware(req) {
  const loggedIn = checkAuth(req);
  if (!loggedIn) return NextResponse.redirect('/login');
  return NextResponse.next();
}

🛡️ Cela ressemble à Express middleware, mais sous stéroïdes.

💅 8. Modules CSS, Tailwind ou Styled Components ? Tout est pris en charge

• Modules CSS — par défaut

• Tailwind - pour un style utilitaire

• Styled Components / Emotion — pour les amateurs de composants avec des styles

🚫 Il ne faut pas abuser des styles inline.

🧪 9. Les tests ne sont pas une quête secondaire

Ne comptez plus sur la chance. Configurez les tests :

• Jest — pour les unités

• React Testing Library — pour les composants

• Cypress / Playwright — pour end-to-end

🧘 Les tests dans Next.js sont faciles à configurer et permettent de gagner beaucoup de temps à l'avenir.

🧠 10. App Router vs Pages Router

Depuis la version 13, app/ est apparu — une nouvelle façon de router avec :

• React Server Components

• Layouts imbriqués

• loading.tsx, error.tsx

• Server Actions (pour le moment en version bêta)

Mais le bon vieux pages/ est toujours stable.

📌 Choisissez une approche par projet : fiabilité ou flexibilité.

🔄 Bonus : Hot Reload fonctionne… presque toujours

Si vous êtes en panne, essayez :

rm -rf .next
npm install

🤕 Ou pleurez un peu dans le terminal si cela ne vous aide pas.

Conclusion 🧘‍♂️

Next.js est un outil puissant qui donne des super pouvoirs. Mais avec une grande puissance vient la nécessité de comprendre ce qui se passe sous le capot. Ces 10+ choses vous aideront à éviter les pièges et à construire non seulement un site, mais une expérience utilisateur à part entière.

🛠️ Que vous travailliez sur un projet pour animaux de compagnie ou sur la prochaine licorne, chaque fois que vous recrutez npx create-next-app, rappelez-vous : vous ne créez pas seulement du code. Vous créez une impression.