简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

标题重写为：Je ne sais pas si Nextjs détecte _app.js ; Erreur : useSession doit être encapsulé dans un <SessionProvider />

<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粉771233336P粉771233336434 Il y a quelques jours607

répondre à tous(1)je répondrai

  • P粉966979765

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

    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将不允许您导出元数据，因此您需要删除< code>从代码中导出 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.

    répondre
    0
  • Annulerrépondre