What is the best practice to fetch non-api data in Next.js(deploying through Vercel)

Question

I am trying to fetch my own data before rendering my application. Fortunately, Next.js provides getStaticProps() for fetching data.

I am currently using fs module to fetch my data from json file in local directory.

export async function getStaticProps() {
  const rawData = fs.readFileSync('./dataset/test.json');
  const data = modifyData(JSON.parse(rawData));
  return {
    props: {
      data
    }
  }
}

But the problem is, for securing my raw data, I didn't push them to the GitHub remote repository. Forgetting this, when I tried to deploy my app through vercel, it couldn't read any data from my GitHub repository as the repository does not contain any data to fetch from...

I don't want to push my raw data to GitHub.

I would like to know

• the best practice to fetch raw data without pushing any of them to the remote repository

If there are some fundamentals of Next.js or any other I missed, please let me know and correct me.

Answer 1

Being "serverless", you've got to host your data somewhere, in a database or as a file.