Dans ce chapitre, nous allons aborder l'intégration de la librairie Zustand dans notre application Next.js 13 avec l'architecture app directory. Zustand est une librairie de gestion d'état simple et efficace, idéale pour les applications React.

Pour une introduction plus détaillée de Zustand, vous pouvez consulter le chapitre dédié dans la partie Gestion d'état.

Prérequis

Avant de commencer, assurez-vous d'avoir un projet Next.js 13 opérationnel. Si ce n'est pas le cas, vous pouvez créer un nouveau projet en utilisant la commande suivante :

npx create-next-app@latest my-zustand-app

Installation de Zustand

Pour installer Zustand, utilisez la commande suivante dans votre projet :

npm install zustand

Création d'un Store Zustand

Créez un fichier store.js (ou store.ts si vous utilisez TypeScript) dans votre dossier app (ou un sous-dossier store pour une meilleure organisation). Voici un exemple de store simple :

// app/store/store.js
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

Dans cet exemple, nous avons un store avec un état count et deux actions pour incrémenter et décrémenter cette valeur.

Utilisation du Store dans un Composant

Vous pouvez maintenant utiliser ce store dans n'importe quel composant de votre application. Voici un exemple d'utilisation dans une page Next.js :

// app/page.js
'use client';

import useStore from './store/store';

export default function HomePage() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
  const decrement = useStore((state) => state.decrement);

  return (
    

      
Zustand Example
      
Count: {count}
      Increment
      Decrement
    
  );
}

Notez l'utilisation de 'use client'; pour indiquer que ce composant est un composant client, nécessaire pour utiliser Zustand dans l'architecture app directory de Next.js 13.

Avantages de Zustand

• Simplicité : Zustand est facile à apprendre et à utiliser, avec une API minimaliste.

• Performance : Zustand est optimisé pour les performances, en évitant les re-renders inutiles.

• Flexibilité : Zustand peut être utilisé avec ou sans React, ce qui le rend idéal pour une variété de projets.

Conclusion

Dans ce chapitre, nous avons vu comment intégrer Zustand dans un projet Next.js 13 avec l'architecture app directory. Zustand est une excellente option pour la gestion d'état, offrant simplicité, performance et flexibilité.

Pour des exemples plus avancés et des cas d'utilisation spécifiques, consultez la documentation officielle de Zustand.