Générer des pages dynamiques avec le routeur App de Next.js (SSG)

Introduction

Avec la version 13.4 de Next.js, une nouvelle fonctionnalité appelée App Router a été introduite.
Il s'agit d'un routeur basé sur le système de fichiers, compatible avec les nouveaux composants serveur (Server Components).

Dans App Router, tous les composants sont considérés comme des Server Components par défaut.
Pour utiliser un composant en tant que Client Component, il faut ajouter "use client" en haut du fichier.

Auparavant, le rendu dans Next.js utilisait généralement le SSR (Server-Side Rendering) et le SSG (Static Site Generation).
Avec cette mise à jour, Next.js devient encore plus axé sur le SSR.

Si vous développez en pensant au SSR mais que vous construisez l'application comme un SSG, des erreurs apparaîtront sur les pages dynamiques.
Avant cette mise à jour également, les pages dynamiques utilisaient getServerSideProps ou getStaticProps.
Ces fonctions sont désormais obsolètes.

Si vous essayez de les utiliser, vous verrez cette erreur :

"getStaticProps" is not supported in app/

Une nouvelle fonction appelée generateStaticParams a été introduite.
Elle est maintenant utilisée pour générer des pages dynamiques.

Voici comment l'implémenter avec generateStaticParams.

Environnement

Next.js : 14.0.4

Créer une page dynamique avec generateStaticParams

Création des données

Fichier : src/constant/item.ts

type ItemsType = {
id: number,
name: string
}

export const Items: ItemsType[] = [
{
id: 1,
name: "Bonbon"
},
{
id: 2,
name: "Poisson riz (Medaka)"
}
];

Création de la page dynamique

Fichier : src/app/item/[id]/page.tsx

import { NextPage } from 'next';
import { Items } from '@/constant/items';

type Props = {
params: {
id: number;
};
};

const DynamicView: NextPage<Props> = (props) => {
const item = Items.filter(item => item.id == props.params.id)[0];
return (
<>
{item.name}
</>
);
};

export default DynamicView;

export const generateStaticParams = async () => {
const paths = Items.map((item) => ({
params: { id: item.id.toString() }
}));
return paths.map((post) => post.params);
};

Avec generateStaticParams, les routes dynamiques sont générées statiquement lors du build.
localhost:3000/item/1 et item/2 sont générés, et chaque URL affiche respectivement "Bonbon" et "Poisson riz".

Conclusion

Tout comme Remix, les frameworks qui utilisent principalement le SSR et permettent un développement fluide du front au back-end deviennent la norme.

Un autre avantage est que les performances ne dépendent pas des spécifications du client, mais de la scalabilité du serveur.

Même si d'autres langages permettent le SSR côté backend, Node.js reste le choix dominant.
Sur un hébergement mutualisé, il est encore difficile de faire tourner Node.js, donc le SSG est encore largement utilisé.

J'ai principalement utilisé le SSG, mais j'aimerais créer des services en temps réel, donc je compte essayer le SSR prochainement.