When I make new page called as AboutPage.js inside pages folder then I get some error in terminal and on my UI on my NEXT JS app when I try to access that page.

The ERROR is:

error - Error: ENOTDIR: not a directory, access '/mnt/BEAA30A3AA305A5B/KevalActivity/Skills/Programming/Builds/JavaScript/Next JS/instagram-clone/pages/AboutPage.js/index.tsx'

and I am attaching the error image.

When I make new page called as AboutPage.js inside pages folder then I get some error in terminal and on my UI on my NEXT JS app when I try to access that page.

The ERROR is:

error - Error: ENOTDIR: not a directory, access '/mnt/BEAA30A3AA305A5B/KevalActivity/Skills/Programming/Builds/JavaScript/Next JS/instagram-clone/pages/AboutPage.js/index.tsx'

and I am attaching the error image.

• javascript
• reactjs
• next.js

3 Answers 3

this is not how you are supposed to declare new pages with Nextjs.

I refer you to this documentation about the routing system : https://nextjs/docs/routing/introduction

You should only have an AboutPage.js file in your pages directory, and then access it with url localhost:3000/aboutpage .

You are fetch or query or ... to a file in a wrong way. In React, Next and ... you have to remove .js from fetch address.

As "Bloodbee" said: about.js => /about

And

const response = await fetch("/api/upload.js", { ... });

=>

const response = await fetch("/api/upload", { ... });

I got the same error when i was learning next js. My mistake was I used <Link href="/posts/first-post.js">this page!</Link> instead of <Link href="/posts/first-post">this page!</Link>. I used the file extension ".js" in href which is not the way to do it.