标题重写为：Je ne sais pas si Nextjs détecte _app.js ; Erreur : useSession doit être encapsulé dans un <SessionProvider />-Questions et réponses sur le réseau chinois PHP

J'ai suivi quelques tutoriels sur Nextjs, Prisma et Auth0. Mon problème est qu'après avoir essayé de créer un bouton de connexion/déconnexion sur l'en-tête (en ajoutant import { useSession,signIn,signOut } de "next-auth/react" à l'en-tête .js), l'erreur suivante se produit dans next.jsErreur : [next-auth] : `useSession` doit être encapsulé dans . J'ai essayé de créer le fichier _app.js dans le dossier racine, puis dans /pages/_app.js .js. Aucun de ceux-ci ne fonctionne.

Voici le contenu de mon fichier_app.js :

importer {SessionProvider} depuis "next-auth/react" exporter la fonction par défaut App({ Composant, pageProps : { session, ...pageProps }, }) { retour (    ) } Comment puis-je m'assurer que Next le détecte et l'utilise ? Je pense que le dossier est ignoré dans une certaine mesure. 
 J'ai essayé de changer l'emplacement du fichier _app.js du dossier racine du projet vers /pages/_app.js app/_app.js J'ai également essayé de supprimer le dossier .next et de réexécuter le serveur, mais cela n'a pas fonctionné. 
 Mise à jour 1 :  Version Next.js que j'utilise : v13.4.4
 Mise à jour 2 :  J'ai ajouté la fonction console.log() au fichier _app.js et elle s'imprime sur le terminal, mais pas sur Firefox. _app.js La détection est-elle normale ou y a-t-il un problème ? 
 Je l'ai (en quelque sorte) réparé ! Vérifiez ma réponse ci-dessous. Mais cela ne fonctionne pas une fois déployé sur Vercel.

répondre à tous (1)

P粉9669797652023-09-04 23:19:18 1 plancher

Je pense avoir résolu ce problème, j'ai décidé d'oublier _app.js et de tout mettre dans mon fichier layout.js personnalisé. Je dois encore tester si l'utilisateur restera connecté puisque header.js est en dehors de layout.js.

Comment je l'ai résolu: j'ai ajouté

'use client' import { SessionProvider } from "next-auth/react";

àlayout.js(le fichier fourni par défaut avec Next.js) et passez la session dans le paramètre de la fonction en cours d'exportation (la fonction par défaut RootLayout est exportée). Ensuite, j'ai enveloppé tous les paramètres return() avec .

Ceci fait partie du code :

export default function RootLayout({ children, session }) { return (   {children}   ) }

PARTIE IMPORTANTE: Si vous utilisez'use client'选项，Next将不允许您导出元数据，因此您需要删除从代码中导出 const 元数据 = {....

MISE À JOUR: Pour une raison quelconque, cela ne fonctionne pas sur Vercel (même s'il fonctionne localement). Je vais essayer de le réparer et mettre à jour ma réponse.TL;DR :Cette solution fonctionne localement mais ne fonctionne pas lorsqu'elle est déployée sur Vercel.