Ошибка: Невозможно прочитать свойства неопределенного (чтение 'session')

Я создаю веб-приложение, использую Next.js для фронт-энда и Django для бэк-энда. Я делаю домашнюю страницу, которая перенаправляет на ваш профиль, если вы вошли в систему, и отображает диалог входа, если вы не вошли. Я столкнулся с такой ошибкой:

Error: Cannot read properties of undefined (reading 'session')

Вот полный текст ошибки:

src\app\layout.tsx (9:53) @ session
 ⨯ TypeError: Cannot read properties of undefined (reading 'session')
    at App (./src/app/layout.tsx:17:40)
    at stringify (<anonymous>)
digest: "2784612708"
   7 | export const theme = extendTheme({});
   8 |
>  9 | export default function App({Component, pageProps: {session, ...pageProps}}: AppProps) {
     |                                                     ^
  10 |   return (
  11 |     <SessionProvider session={session}>
  12 |       <ChakraProvider theme={theme}>
 ⨯ src\app\layout.tsx (9:53) @ session
 ⨯ TypeError: Cannot read properties of undefined (reading 'session')
    at App (./src/app/layout.tsx:17:40)
    at stringify (<anonymous>)
digest: "2784612708"
   7 | export const theme = extendTheme({});
   8 |
>  9 | export default function App({Component, pageProps: {session, ...pageProps}}: AppProps) {
     |                                                     ^
  10 |   return (
  11 |     <SessionProvider session={session}>
  12 |       <ChakraProvider theme={theme}>
 GET / 404 in 1684ms

Вот моя layout.tsx

// pages/_app.tsx

import type {AppProps} from "next/app";
import {SessionProvider} from "next-auth/react";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme({});

export default function App({Component, pageProps: {session, ...pageProps}}: AppProps) {
  return (
    <SessionProvider session={session}>
      <ChakraProvider theme={theme}>
        <Component {...pageProps} />
      </ChakraProvider>
    </SessionProvider>
  );
}

Вот моя index.tsx

// pages/index.tsx

import {useRouter} from "next/router";
import {signIn, useSession} from "next-auth/react";
import {Box, Button, Spinner, Text, VStack} from "@chakra-ui/react";

export default function Home() {

  const router = useRouter();
  const {data: session, status} = useSession();

  if (status == "loading") {
    return <Spinner size="lg"/>;
  }

  // If the user is authenticated redirect to `/profile`
  if (session) {
    router.push("profile");
    return;
  }

  return (
    <Box m={8}>
      <VStack>
        <Text>You are not authenticated.</Text>
        <Button
            colorScheme="blue"
            onClick={() => signIn(undefined, {callbackUrl: "/profile"})}
        >
          Sign in
        </Button>
      </VStack>
    </Box>
  );
}

Кто-нибудь знает, что происходит?

Вернуться на верх