How to reuse functions in Next.js with TypeScript

July 14, 2022

apparently, it is considered a best practice if you can split all the data fetching functions to a separate folder called services and put all the functions there then use them in the project
However, I couldn’t make it happen with Next.js
The function works when I put it inside the same component I want to render the data inside it, but doesn’t work when I put the function in a separate folder and export it.
I get this error:

 TypeError: Cannot read properties of undefined (reading 'map')

I think it is because the data props are not being passed to the component correctly.

below are the working and none working examples :

the Working example:

inside index.tsx file :

export async function getStaticProps() {
  const response = await fetch(
    `https://api.github.com/users/abdurrahmanseyidoglu/repos`
  );
  const data = await response.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data,
    }, // will be passed to the page component as props
  };
}

const Home = ({ data }) => {
  return (
    <>
      <ul>
        {data.map((repo) => (
          <li key={repo.id}>{repo.name}</li>
        ))}
      </ul>
      <p className="max-w-5xl m-auto text-justify mt-2 border rounded p-3 shadow-lg">
       Working Example
      </p>
    </>
  );
};

export default Home;

Not Working example:

inside services/getUserRepos.ts :

export async function getStaticProps() {
  const response = await fetch(
    `https://api.github.com/users/abdurrahmanseyidoglu/repos`
  );
  const data = await response.json();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data,
    }, 
  };
}

inside index.tsx file :

import { getStaticProps } from "../services/getUserRepos";
const Home = ({ data }) => {
  return (
    <>
      <ul>
        {data.map((repo) => (
          <li key={repo.id}>{repo.name}</li>
        ))}
      </ul>
      <p className="max-w-5xl m-auto text-justify mt-2 border rounded p-3 shadow-lg">
       None Working Example
      </p>
    </>
  );
};

export default Home;

How can I make it so I can pass the fetched data from a separate folder to my index.tsx file

>Solution :

You are not using getStaticProps after importing it, your code should look like this

import {getStaticProps} from "../services/getUserRepos";
import {useState} from "react";

const Home = () => {
    const [userRepos, setUserRepos] = useState([]);

    getStaticProps().then((data) => setUserRepos(data));

    return (
        <>
            <ul>
                {userRepos.map((repo) => (
                    <li key={repo.id}>{repo.name}</li>
                ))}
            </ul>
            <p className="max-w-5xl m-auto text-justify mt-2 border rounded p-3 shadow-lg">
                None Working Example
            </p>
        </>
    );
};

export default Home;