简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
标题重写为：Je ne sais pas si Nextjs détecte _app.js ; Erreur : useSession doit être encapsulé dans un <SessionProvider />
P粉771233336
P粉771233336 2023-09-04 00:10:21
0
1
605
<p>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 <code>import { useSession,signIn,signOut } de "next-auth/react" </code> à l'en-tête <code> .js</code>), l'erreur suivante se produit dans next.js<code>Erreur : [next-auth] : `useSession` doit être encapsulé dans <SessionProvider /></code>. J'ai essayé de créer le fichier <code>_app.js</code> dans le dossier racine, puis dans <code>/pages/_app.js</code> .js</code>. Aucun de ceux-ci ne fonctionne. </p> <p>Voici le contenu de mon fichier<code>_app.js : </code></p> <pre class="brush:php;toolbar:false;">importer {SessionProvider} depuis "next-auth/react" exporter la fonction par défaut App({ Composant, pageProps : { session, ...pageProps }, }) { retour ( <SessionProvider session={session}> <Composant {...pageProps} /> </Provider de session> ) }</pré> <p>Comment puis-je m'assurer que Next le détecte et l'utilise ? Je pense que le dossier est ignoré dans une certaine mesure. </p> <p>J'ai essayé de changer l'emplacement du fichier <code>_app.js</code> du dossier racine du projet vers <code>/pages/_app.js</code> app/_app.js</code> J'ai également essayé de supprimer le dossier <code>.next</code> et de réexécuter le serveur, mais cela n'a pas fonctionné. </p> <p><strong>Mise à jour 1 : </strong> Version Next.js que j'utilise : v13.4.4</p> <p><strong>Mise à jour 2 : </strong> J'ai ajouté la fonction <code>console.log()</code> au fichier <code>_app.js</code> et elle s'imprime sur le terminal, mais pas sur Firefox. <code>_app.js</code> La détection est-elle normale ou y a-t-il un problème ? </p> <p><strong>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. </strong></p>
P粉771233336
P粉771233336

répondre à tous(1)
P粉966979765
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 (
    <html lang="en">
      <SessionProvider session={session}>
        <body>{children}</body>
      </SessionProvider>
    </html>
  )
}

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.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！