Qu’est-ce que Next.js ?

Next.js est un framework open-source qui s’appuie sur React, développé par Vercel. Il rend la création d’applications web et de sites statiques beaucoup plus simple et efficace. Next.js aide les développeurs à améliorer les performances de leurs applications et à mieux les référencer sur les moteurs de recherche.

Rendu côté serveur et génération statique

Une des grandes forces de Next.js est sa capacité à rendre des pages côté serveur (ce qui signifie que le serveur prépare la page avant de l’envoyer au navigateur) et à générer des sites statiques (où les pages sont créées à l’avance). Cela permet d’obtenir des temps de chargement très rapides et d’améliorer le référencement.

Exemple : Si vous avez un blog, Next.js peut générer chaque article en HTML statique lors de la construction du site, ce qui permet aux visiteurs de charger les pages presque instantanément.

Principes de base

  1. Pages : Dans Next.js, chaque fichier que vous créez dans le dossier pages correspond à une route de votre application. Par exemple, pages/index.js est la page d’accueil accessible à l’adresse /. Exemple de page d’accueil : 
javascript
// pages/index.js
import React from 'react';

const HomePage = () => {
    return <h1>Bienvenue sur ma page d'accueil !</h1>;
};

export default HomePage;

Routage automatique : Next.js s’occupe du routage pour vous, en se basant sur la structure de vos fichiers. Vous n’avez pas besoin de configurer manuellement chaque route, ce qui simplifie le développement.

Exemple de structure de fichiers :






Code





/pages
  ├── index.js       // Correspond à la route "/"
  ├── about.js       // Correspond à la route "/about"






API Routes : Vous pouvez également créer des API directement dans votre application en utilisant le dossier pages/api. Cela vous permet de gérer des requêtes HTTP sans avoir besoin d’un serveur séparé.





Exemple d’API :










javascript





// pages/api/hello.js
export default function handler(req, res) {
    res.status(200).json({ message: 'Bonjour, monde !' });
}






Support TypeScript : Si vous aimez TypeScript, Next.js le prend en charge, ce qui vous permet d’écrire du code avec des types, rendant votre développement plus sûr et plus organisé.





Exemple d’utilisation de TypeScript :










typescript





// pages/index.tsx
import React from 'react';

const HomePage: React.FC = () => {
    return <h1>Bienvenue sur ma page d'accueil !</h1>;
};

export default HomePage;






Optimisation des performances : Next.js inclut des optimisations automatiques, comme le chargement différé des images, ce qui rend vos applications plus rapides et réactives.





Exemple d’optimisation des images :





javascript





import Image from 'next/image';

const MonImage = () => {
    return <Image src="/image.jpg" alt="Description" width={500} height={300} />;
};










Conclusion





Next.js est un outil puissant qui complète React avec des fonctionnalités comme le rendu côté serveur et la génération de sites statiques. 
Cela permet de créer des applications web performantes et bien référencées.