reactjs - Fullstack-Projekt mit Prisma und Next.JS in TypeScript - „Component“ und „pageProps“ sind keine gültigen Props

Ich versuche derzeit, meine erste Fullstack-Anwendung zu erstellen, bei der ich Next.js als mein React-Framework und Prisma als mein ORM für den Datenbankzugriff und Migrationen verwende. Nachdem ich die Verbindung zu meiner Datenbank hergestellt habe, möchte ich mit dem Frontend-Teil beginnen, also habe ich mit der einzelnen gemeinsamen Layout-Komponente begonnen, die in der Next.js-Dokumentation gezeigt wird, aber ich erhalte den Fehler: „Component“ und „pageProps“ sind keine gültigen Seiten-Eigenschaften, ts(71005).

So sieht meine Root-Komponente aus, in der die Fehler auftreten (page.tsx):

"use client";

import type { NextPage } from "next";
import type { AppProps } from "next/app";
import { Inter } from "next/font/google";
import { ReactElement, ReactNode } from "react";

const inter = Inter({ subsets: ["latin"] });

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
  pageProps: any;
};

export default function Home({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page);

  return getLayout(<Component {...pageProps} />);
}

Und dies ist meine index.tsx:

import type { ReactElement } from "react";
import Layout from "./layout";
import { NextPageWithLayout } from "./page";

const Page: NextPageWithLayout = () => {
  return <p>hello world</p>;
};

Page.getLayout = function getLayout(page: ReactElement) {
  return <Layout>{page}</Layout>;
};

export default Page;

Und dies ist meine layout.tsx und sie enthält eine einfache NavDrawer:

import { NavDrawer } from "./components/drawer/NavDrawer";
import "./globals.css";

export const metadata = {
  title: "Braetspilsdruk",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <NavDrawer />
        {children}
      </body>
    </html>
  );
}

Und so sieht mein Projektordner aus:

Antwort #1

Der Fehler stammt von dieser Zeile:

export default function Home({ Component, pageProps }: AppPropsWithLayout) {
                               ^^^^^^^^^  ^^^^^^^^^

Da der Fehler besagt, dass Component und pageProps keine gültigen Seiten-Props, d. h. Parameter, sind.

Sie können die richtigen Props hier finden, und sie sind params und searchParams.