Javascript – Request API with next js 14

Moaz. Starting from Nextjs 13 going onward, the app router was introduced. It uses a different routing strategy compared to the older router (the pages router).

Of course the developer have the option to use the app router or the pages router or both at the same time. Even though the app router is newer that does not mean the pages router was deprecated or is not good.

To start using the app router, in your project root, or in the src/ directory, create a folder called app/.

And in case you want to use the pages router, you’ll create a folder called pages/ instead. also either in the project root, or in the src/ directory.

Anyway – now based on the screenshot you provided, your nextjs application is based on the app router. This is because your code is placed inside the app/ directory.

In the app router, only certain files are served to the browser. Unlike the pages router where anything you place inside of it becomes a page accessible through the browser URL address bar.

now, you’re placing your JSON file inside the app directory, and – you’re trying to fetch it from a client component (right?). That will not work, this is because the rule I mentioned earlier. Files inside the app directory are not served, only certain files. (only the files called: page.tsx).

Now, in order to fetch this JSON file – move this file from the app directory to the public/ directory.

Now, this file will be accessible through

http://localhost:3000/porducts.json

thus, change your code 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));