标题重写为：Tidak pasti jika Nextjs mengesan _app.js; Ralat: useSession mesti dibungkus dalam <SessionProvider />
P粉771233336
2023-09-04 00:10:21
<p>Saya telah mengikuti beberapa tutorial tentang Nextjs, Prisma dan Auth0. Masalah saya ialah, selepas cuba mencipta butang log masuk/log keluar pada pengepala (dengan menambahkan <kod>import { useSession,logIn,logKeluar } daripada "next-auth/react" </code> kepada <code> header .js</code>), ralat berikut berlaku dalam next.js<code>Ralat: [next-auth]: `useSession` mesti dibungkus dalam <SessionProvider /></code>. Saya cuba mencipta fail <code>_app.js</code> dalam folder root, kemudian di <code>/pages/_app.js</code> dan akhirnya di <code>/app/_app Created at .js</code>. Tiada satu pun daripada ini berfungsi. </p>
<p>Ini ialah kandungan fail<code>_app.js saya: </code></p>
<pre class="brush:php;toolbar:false;">import { SessionProvider } daripada "next-auth/react"
eksport fungsi lalai Apl({
komponen,
pageProps: { session, ...pageProps },
}) {
kembali (
<SessionProvider session={session}>
<Komponen {...pageProps} />
</SessionProvider>
)
}</pre>
<p>Bagaimanakah saya hendak memastikan Next mengesan dan menggunakannya? Saya fikir fail itu diabaikan sedikit sebanyak. </p>
<p>Saya cuba menukar lokasi fail <code>_app.js</code> daripada folder akar projek kepada <code>/pages/_app.js</code> app/_app.js</code> Saya juga cuba memadamkan folder <code>.next</code> dan menjalankan semula pelayan tetapi ia tidak berjaya. </p>
<p><strong>Kemas kini 1: </strong>
Versi Next.js yang saya gunakan: v13.4.4</p>
<p><strong>Kemas kini 2: </strong>
Saya telah menambahkan fungsi <code>console.log()</code> pada fail <code>_app.js</code> <code>_app.js</code> Adakah pengesanan normal atau ada masalah? </p>
<p><strong>Saya (semacam) membetulkannya! Semak jawapan saya di bawah. Tetapi ia tidak berfungsi apabila digunakan ke Vercel. </strong></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya rasa saya telah menyelesaikan masalah ini, saya memutuskan untuk melupakan _app.js dan meletakkan semuanya dalam fail layout.js tersuai saya. Saya masih perlu menguji sama ada pengguna akan kekal log masuk kerana header.js berada di luar layout.js.
Bagaimana saya menyelesaikannya: Saya menambah
'use client' import { SessionProvider } from "next-auth/react";kepada
layout.js(fail yang disertakan dengan Next.js secara lalai) dan lulus sesi dalam parameter fungsi yang "dieksport" (fungsi lalai RootLayout dieksport). Kemudian saya membungkus semua parameter return() dengan .Ini adalah sebahagian daripada kod:
export default function RootLayout({ children, session }) { return ( <html lang="en"> <SessionProvider session={session}> <body>{children}</body> </SessionProvider> </html> ) }BAHAGIAN PENTING: Jika anda menggunakan
'use client'选项，Next将不允许您导出元数据，因此您需要删除从代码中导出 const 元数据 = {....KEMASKINI: Atas sebab tertentu ia tidak berfungsi pada Vercel (walaupun ia dijalankan secara tempatan). Saya akan cuba membetulkannya dan mengemas kini jawapan saya. TL;DR: Penyelesaian ini berfungsi secara tempatan tetapi tidak berfungsi apabila digunakan ke Vercel.