reactjs - Forstå SessionProvider-feilmeldingen (useSession er ikke en funksjon)

Jeg er ganske ny på React og NextJS, men jeg klarer å lime sammen biter av ting med kunnskapen jeg har.

Så jeg har implementert sosial pålogging ved bruk av Lucia auth, og jeg ønsker å implementere en øktleverandør for å kunne få tilgang til økten gjennom hele nettapplikasjonen.

Dette er min SessionContext.tsx-fil:

"use client";

import { createContext, useContext } from "react";
import { validateRequest } from "@/lib/lucia";

type ContextType = Awaited<ReturnType<typeof validateRequest>>;

const SessionContext = createContext<ContextType>({
    session: null,
    user: null,
});

export const useSession = () => {
    console.log("useSession function called");
    useContext(SessionContext);
};

export const SessionProvider = ({
    children,
    value,
}: React.PropsWithChildren<{ value: ContextType }>) => {
    return (
        <SessionContext.Provider value={value}>
            {children}
        </SessionContext.Provider>
    );
};

layout.tsx
import { SessionProvider } from "./SessionContext";
import { validateRequest } from "@/lib/lucia";

export default async function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    const session = await validateRequest();

    return (
        <html lang="en">
            <body>
                <SessionProvider value={session}>{children}</SessionProvider>
            </body>
        </html>
    );
}

Og så har jeg testet dette på en enkel testside:

page.tsx
import { useSession } from "../SessionContext";

export default function UserPage() {
    const { session } = useSession();

    return <pre>{JSON.stringify(session, null, 2)}</pre>;
}

Men denne siden gir en feil på useSession()-deklarasjonen:

Error: (0 , _SessionContext__WEBPACK_IMPORTED_MODULE_1__.useSession) is not a function

Jeg er ikke sikker på hvorfor dette skjer. Jeg fulgte denne veiledningen for å implementere kontekstleverandøren.

Svar #1

Ikke gjør dette; det vil gjøre hver eneste side dynamisk, noe som gjør at du mister fordelene med statisk rendering. Bruk i stedet en API-rute for å sjekke autentisering.

Å bruke cookie-funksjonen gjør siden dynamisk. Du kan se dette hvis du bruker next build command, da sidene alle rendres dynamisk på grunn av cookie-forespørselen i rotoppsettet. Next.js vil rendre sidene på nytt ved hver forespørsel.

Derfor er det best å bruke en API-rute hvis du trenger brukerinformasjon i elementer som en header, samtidig som resten av siden holdes som statisk innhold, for eksempel en forside. Denne tilnærmingen er akseptabel for et dashbord. Next.js dynamiske rendering vil fortsatt skje på serversiden, men ved hver forespørsel, hvis det gir mening.

Svar #2

Det finnes to typer komponenter i NextJS13: klientkomponent, serverkomponent. Du kan bruke hvilken som helst av dem avhengig av dine preferanser. Som jeg kan se, har du brukt useSession i en serverkomponent "simple test side". Du bør bruke validateRequest() for å hente brukerdata og sesjon på serversiden og bruke useSession() for å hente informasjon på klientsiden.

for å eksplisitt erklære en komponent som en klientkomponent, bruk "use client" øverst i komponenten og "use server" øverst i en serverkomponent.

Relaterte artikler