I just created a Next app to read a JSON file within the /public dir, and statically render out a few dynamic routes based on a some iterable data within that JSON.

When running the Dev build, no errors occur, but during Production (after running $ build and $ start), the console logs out a Error: ENOENT: no such file or directory, open error. The individual dynamic routes are successfully built out as static HTML, so I'm guessing this is because the Next framework is looking for a static asset at Prod runtime for some reason, as there is no corresponding .json file within the .next build file.

The only thing I changed about the default Next installation is changed tsconfig.json moduleResolution: node from bundler, as the default latter value caused TS errors across my entire project - everything else is a default @latest Next installation. OS is Windows 10.

Build output:

├ ○ /youtube-static                      176 B            94 kB
└ ● /youtube-static/[title]              137 B          87.2 kB

fs helper function (followed https://vercel.com/guides/loading-static-file-nextjs-api-route)

export async function getYoutubeData(): Promise<YoutubeData> {
  const jsonFile = path.join(process.cwd(), "/public/json/youtube.json");

  const val = await fs.readFile(jsonFile, "utf-8");

  return JSON.parse(val);
}

Dynamic Statically Rendered Child Route

export default function YoutubeChildStatDynamic({ params, }: { params: { title: string }; }) {
  return <h3>{params.title}</h3>;
}

export async function generateStaticParams() {
  const data = await getYoutubeData();

  return data.items.map((vid) => vid.snippet.title);
}