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

[opensea712]

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

How to Read and Display Data from a JSON 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.

[neerajkumar61]

@opensea712 Welcome to Vercel community.

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

How to Load Loacl Json Data from a File in Next.js

Reading Local Json Data With Next.js - part 5

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,
    },
  };
}

[opensea712]

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?