Got an error about getStaticProps() on Next.js Project

I got this error on my Next.js project :

Error: page / getStaticProps can not be attached to a page's component and must be exported from the page. See more info here: https://nextjs.org/docs/messages/gssp-component-member

just wanna load some fake data to my main page then handle a nested page which is included more details about the clicked link with a special title

index.tsx

import fs from "fs/promises";
import path from "path";
import Link from "next/link";

export interface Product {
  id: string;
  title: string;
  description: string;
}
export interface Products {
  products: Product[];
}

export const ProductById = (props: Products) => {
  return (
    <ul>
      {props.products.map((pro) => (
        <li key={pro.id}>
          <Link href={`/${pro.id}`}>
            <a>{pro.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
};

export const getStaticProps = async () => {
  console.log("Pre Genarate ");
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const readFile = await fs.readFile(filePath);
  const { products } = JSON.parse(readFile.toString());

  return {
    props: {
      products,
    },
    // revalidate: 1,
  };
};

and [pid].tsx page which is for load more details about the product clicked on it’s title in the Index.tsx page ,

import fs from "fs/promises";
import path from "path";
import { Fragment } from "react";
import { Products, Product } from ".";
import { GetStaticProps } from "next";

export default function ProductById(props: Product) {
  return (
    <Fragment>
      <h1>{props.title}</h1>
      <h2>{props.description}</h2>
    </Fragment>
  );
}

export const getStaticProps: GetStaticProps = async (context) => {
  console.log("Pre Genarate ");
  const { params } = context;
  const productId = params?.pid;
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const readFile = await fs.readFile(filePath);
  const data = JSON.parse(readFile.toString());
  const product = data.products.find((pro: Product) => pro.id === productId);

  return {
    props: {
      product,
    },
  };
};

export const getStaticPaths = async () => {
  // const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  // const readFile = await fs.readFile(filePath);
  // const data = JSON.parse(readFile);
  return {
    paths: [
      { params: { pid: "p1" } },
      { params: { pid: "p2" } },
      { params: { pid: "p3" } },
      // data.map((product) => {
      //   params: {
      //     pid: `${product.id}`;
      //   }
      // }),
    ],
    fallback: false,
  };
};

but got the above error on localhost:3000

>Solution :

Your index.tsx has a missing default export component change this code

export const ProductById = (props: Products) => {
  return (
    <ul>
      {props.products.map((pro) => (
        <li key={pro.id}>
         <Link href={`/${pro.id}`}>
            <a>{pro.title}</a>
         </Link>
        </li>
     ))}
 </ul>
 );
};

to:

export default function Index(props: Products) {
  return (
    <ul>
      {props.products.map((pro) => (
        <li key={pro.id}>
         <Link href={`/${pro.id}`}>
            <a>{pro.title}</a>
         </Link>
        </li>
     ))}
 </ul>
 );
};