How to Load Data from a JSON File in Next.js

(edited)

I want to load data from a JSON file in Next.js (app router).

https://vercel.com/guides/loading-static-file-nextjs-api-route#how-to-load-data-from-a-file-in-next.js I already checked and follow this guide, so it is working in dev environment (local).

The problem is I can't read that file in production (deployed on Vercel). I checked the log, it says there's no that JSON file. "Error: ENOENT: no such file or directory"

I tried to put the file inside 'app' or in root folder but not workin in any case.

The project file structure is (app router):

src
- actions
- app
  - pages ...
- components ...

Please help me.

Vercel Staff

Welcome to Vercel community.

There are multiple ways of reading data from Json in next js. Please check the below guides.

https://medium.com/@musheerk799/how-to-load-loacl-json-data-from-a-file-in-next-js-9c90d8234a9a https://dev.to/this-is-learning/reading-local-json-data-with-nextjs-part-5-59le

I have tried it this way

export async function getStaticProps() {
  const filePath = path.join(process.cwd(), 'app', 'tasks.json');
  const fileContents = fs.readFileSync(filePath, 'utf8');
  const data = JSON.parse(fileContents);

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

Screenshot 2024-11-08 at 10.51.20 PM

Thanks for your reply and I will try this but as I told I am using app router, not pages router.

Do you have other solution for app router?

This topic is closed. It no longer accepts new replies.