Amanda. As of Nextjs 13 and beyond, the implementation of the app router was introduced, offering a different routing approach compared to the traditional pages router.
Developers now have the flexibility to choose between the app router, the pages router, or utilize both simultaneously. While the app router is newer, it does not render the pages router obsolete or inferior.
To start integrating the app router into your project, create a folder named app/ at the project root or within the src/ directory.
If you opt for the traditional method using the pages router, establish a directory labeled pages/ either in the project root or inside the src/ directory.
Based on the screenshot provided, it seems that your Nextjs application relies on the app router since your code resides within the app/ directory.
In the context of the app router, only specific files are exposed to the browsing experience, unlike the pages router where any content placed within automatically becomes accessible through the browser's URL address bar.
Given that you are currently attempting to fetch a JSON file from a client component, this action will not yield results due to the aforementioned regulations regarding the app directory.Only designated files (specifically those titled: page.tsx) are served for this purpose.
To successfully access the JSON file, relocate it from the app directory to the public/ directory.
After making this adjustment, the file can be reached via:
http://localhost:3000/products.json
Therefore, modify your code snippet from:
fetch("/products/products.json")
.then((response) => response.json())
.then((data) => console.log(data));
to:
fetch("/products.json")
.then((response) => response.json())
.then((data) => console.log(data));