I've got a functional component for the Signup page. I'm trying to declare props for this component so I can pass appropriate values to it from another component. This is what I'm doing:
export default function SignupPage({mode = 'patient'} : {mode: 'patient' | 'doctor'}) {
{/* CODE FOR SIGNUP PAGE HERE */}
}
As the code shows, I want the default value of mode to be patient. It should always be one of either patient or doctor.
When I'm running this code with npm run dev, everything works fine. The minute I try to build with npm run build, I get the following error:
- info Linting and checking validity of types ...Failed to compile.
app/signup/page.tsx
Type error: Page "app/signup/page.tsx" has an invalid "default" export:
Type "{ mode: "patient" | "doctor"; }" is not valid.
I've tried multiple things like declaring an interface and type with mode: 'patient' | 'doctor'; as well. It always gives the same error.
Any help and guidance will be highly appreciated 🙏🏼
As you can read on the doc, the default export of a page.tsx in the app directory can only have a type similar to:
interface PageProps {
params: { slug: string };
searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {
// ...
}
params and searchParams are the only type you can provide, and those will be passed to your component by Next.js. You shouldn't be trying to call the page yourself in another component.
If you want that, you should transform it to a normal component and maybe move it to its own file and import it from there wherever you want.
And if you are getting the error within a layout.tsx, the typing should be as follows:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return "...";
}