Error using getStaticProps

[narrow sluice]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[glad fossil]

Here is the FormSubmission.tsx component

And here is the error:

[trim totem]

you don't have getStaticProps for individual components

you can only have it in page files

[glad fossil]

hmm ok, true

thanks

[glad fossil]

I still can't perform db operations. Not sure how to handle this getStaticProps things with the data coming from a form on a child component.

Here is the pages component:

import FormSubmission, { Lead } from "../components/FormSubmission";
import prisma from "../../lib/prisma";
import { GetStaticProps } from "next";
import LandingPageLayout from "@/components/layout/landing-page/LandingPage";

const FormSubmissionPage = () => {
  const [formData, setFormData] = useState<any>({
    name: "",
    email: "",
    company: "",
    employees: "",
  });

  const handleDataChange = (newData: Lead) => {
    setFormData(newData);
  };

  return (
    <LandingPageLayout>
      <FormSubmission onDataChange={handleDataChange} />
    </LandingPageLayout>
  );
};

export default FormSubmissionPage;

export const getStaticProps: GetStaticProps = async () => {
  const _formData = await prisma.formSubmission.create({
    data: {
      email: formData?.email,
      name: formData?.name,
      company: formData?.company,
      employees: formData?.employees,
    },
  });
  return {
    props: {
      form: _formData || null,
    },
  };
};