Next.js : Quelques fonctions essentielles

Pour bien comprendre les concepts de Next.js et React, ainsi que leurs méthodes et hooks spécifiques, voici un tableau détaillé qui explique chaque fonction et méthode, leur utilité, et où elles peuvent être utilisées (client, serveur ou les deux). En plus, nous aborderons des concepts comme Server Action, Route Handlers et Helpers.

1. Hooks et Méthodes de React/Next.js

Nom	Description	Utilisation	Client/Serveur/Both
`useSearchParams`	Permet d’accéder aux paramètres de l’URL (query params). Utile pour gérer les query strings.	Utilisé pour manipuler les paramètres d’URL dans l’interface.	Client seulement
`useDebouncedCallback`	Utilisé pour limiter la fréquence d’exécution d’une fonction (par exemple, pour éviter un trop grand nombre de requêtes API en tapant dans un champ de recherche).	Utilisation des callbacks avec un délai.	Client seulement
`useEffect`	Permet d’exécuter des effets de bord (side effects) dans un composant React, comme des appels API ou des abonnements.	Gestion des effets secondaires dans les composants.	Client uniquement, mais utilisé avec SSR et ISR pour déclencher des actions côté serveur
`useRouter`	Utilisé pour accéder à l’objet router dans Next.js, permettant de gérer la navigation et de récupérer les informations de l’URL.	Utilisation de la navigation côté client.	Client uniquement (Cependant, il existe un `useRouter` côté serveur dans Next.js avec SSR)
`usePathname`	Permet d’accéder à l’URL actuelle de la page, sans les paramètres de requête.	Utilisation de l’URL pour les rendus conditionnels.	Client uniquement
`useState`	Permet de gérer l’état local dans un composant React.	Gérer l’état au sein d’un composant React.	Client uniquement

2. Concepts et Méthodes de Next.js

Nom	Description	Utilisation	Client/Serveur/Both
`Link`	Composant utilisé pour créer des liens entre les pages dans une application Next.js, optimisant les transitions et le chargement des pages.	Création de liens entre les pages.	Client uniquement
`Suspense`	Composant qui permet d’attendre de manière asynchrone le rendu des composants ou des données. Utile pour le rendu conditionnel d’un état de chargement.	Gérer l’attente de données ou de composants avant le rendu.	Client uniquement, mais utilisé avec SSR pour synchroniser l’affichage de pages
`Server Action`	Nouvelles actions côté serveur dans Next.js 13, permettant de définir des actions exécutées côté serveur sans API route.	Manipulation des données ou des actions côté serveur sans appel API.	Serveur uniquement
`Route Handlers`	Méthodes permettant de gérer des routes personnalisées dans les API ou le routage au niveau serveur.	Manipulation des requêtes et réponses HTTP dans les APIs de Next.js.	Serveur uniquement
`Helpers`	Fonctions utilitaires pour simplifier les opérations courantes (comme la gestion des données, la transformation de l’URL, etc.).	Utilitaires pour réduire la redondance du code.	Client et Serveur

3. Explication des Concepts

Server Action

Les Server Actions sont des fonctionnalités introduites dans Next.js qui permettent d’exécuter du code côté serveur directement dans le composant React, sans passer par une API route séparée. Cela permet de rendre l’architecture plus simple, de réduire le besoin d’API supplémentaires et d’améliorer la performance. Ce mécanisme est basé sur le fait que certaines actions doivent être exécutées côté serveur (par exemple, la gestion de l’état, l’appel à une base de données).

Exemple :

'use server'

async function addItemToCart(itemId) {
  const res = await fetch('/api/cart', { method: 'POST', body: JSON.stringify({ itemId }) });
  return res.json();
}

Route Handlers

Les Route Handlers sont des fonctions ou des méthodes utilisées pour traiter des requêtes HTTP dans Next.js. Cela peut inclure la gestion des requêtes GET, POST, PUT, DELETE, etc. Ces gestionnaires permettent de créer des API à partir de la structure des routes dans Next.js.

Exemple :

// Dans un fichier de route handler de Next.js 13
export async function GET(request) {
  const data = await fetchDataFromDatabase();
  return new Response(JSON.stringify(data));
}

Helpers

Les Helpers sont de petites fonctions utilitaires qui ne sont pas directement liées au rendu ou à la gestion de l’état, mais qui aident à organiser et simplifier le code. Par exemple, cela pourrait inclure des fonctions pour formater les dates, manipuler des objets ou des tableaux, ou encore simplifier les appels API.

Exemple :

function formatDate(date) {
  return new Date(date).toLocaleDateString('fr-FR');
}

Conclusion

Client-side : Beaucoup des hooks comme useState, useEffect, et useSearchParams sont utilisés côté client dans React et Next.js.
Server-side : Les Server Actions et les Route Handlers sont principalement utilisés côté serveur dans Next.js.
Les deux (SSR/ISR) : Des techniques comme le Suspense et le useRouter (lorsqu’il est utilisé avec Server-Side Rendering) peuvent être utilisées à la fois côté client et serveur pour une expérience plus fluide.

Chaque fonction ou méthode a son propre contexte d’utilisation, donc il est essentiel de bien comprendre son rôle pour décider quand et où l’utiliser dans une application Next.js ou React.