React TypeScript: Resolving Type Error with Props

Question

I've been working on a Next.js project with TypeScript for a portfolio website. Inside my Home functional component, I'm trying to initialize the state using the useState hook and setting initial values from the component's props. The component signature looks like:

type Props = {

  pageInfo: PageInfo;
  experiences: Experience[];
  skills: Skill[];
  projects: Project[];
  socials: Social[];

};


export default function Home(props: Props){

const [pageInfo, setPageInfo] = useState<PageInfo>(props.pageInfo);
const [experiences, setExperiences] = useState<Experience[]>(props.experiences);
const [skills, setSkills] = useState<Skill[]>(props.skills);
const [projects, setProjects] = useState<Project[]>(props.projects);
const [socials, setSocials] = useState<Social[]>(props.socials);

  useEffect(() => {
    async function fetchData() {
      if (!projects || projects.length === 0) setProjects(await fetchProjects());
      if (!socials || socials.length === 0) setSocials(await fetchSocials());
      if (!skills || skills.length === 0) setSkills(await fetchSkills());
      if (!experiences || experiences.length === 0) setExperiences(await fetchExperiences());
      if (!pageInfo || Object.keys(pageInfo).length === 0) setPageInfo(await fetchPageInfo());
      
    }
    
    fetchData();

  }, []); 

When trying to compile and deploy using vercel, I'm encountering a TypeScript error related to the props' types.

Here is the error

Type error: Page "src/app/page.tsx" has an invalid "default" export: Type "Props" is not valid.

What are some of the different ways i can intialize those props in home and have them passed to the differnt functional components.

For now the code, is compiling when running 'npm run dev' but with vercel the build is run using 'npm run build' for which I'm getting the type error.

Ideally I would like to use GetStaticProps or GetServerSideProps, however, the page.tsx file for next.js is located in the src/app router directory. If i move it out of the src directory and into a separate pages directory I get the 404 page not found error (even after rebuild).

Answer 1

Easy peasy.

---

Edit: To explain my answer a bit, TypeScript allows for modular use of types. This allows a developer to define a type or interface and export it. As far as I am aware, there isn't a way of "defaultly" exporting a type so always use named imports/exports with types. I've personally and professionally exported my type or interface from the file I initially used it in. It's often the case that a type is not so general that it deserves to be in a separate types.ts file, but some people prefer modularity in this way. So if a type, like Props, is used in multiple files, you can define it either in anyone of the files you use (while still exporting it for use in other files), or define and export the type in a src/types.ts file and reuse it everywhere. In my opinion, I'd go with the former if the project is small enough.

---

Export the type.

export type Props = {
  pageInfo: PageInfo;
  experiences: Experience[];
  skills: Skill[];
  projects: Project[];
  socials: Social[];
};

After correctly exporting, you can import into other functional components with the following line:

import type { Page } from "PATH_TO_THE_FILE_THE_TYPE_IS_EXPORTED_FROM";

Answer 2

Can you please modify your function like this?

export default function Home(props: Props){ ... }

instead

export const Home:React.FC<Props> = (props) > { ... }