javascript - what is the difference between index.js vs page.js in next.js? - Stack Overflow

admin管理员组

文章数量:1410737

I was going through this next.js docs.

• Here it says index.js acts as root of the directory. So If I enter /blog in the URL it takes me to pages/blog/index.js file.

Now my question is I have pages/blog/subponent.js I don't want users to access /blog/subponent because it is a subponent. How can I do that?

Now I saw another documentation from next.js that we can use page.js instead of index.js and only page.js bees publicly accessible.

• so does that mean the other files cannot be accessible if it is not page.js?

I'm really confused. Any help would be appreciated

1. https://nextjs/docs/pages/building-your-application/routing/pages-and-layouts

I was going through this next.js docs.

• Here it says index.js acts as root of the directory. So If I enter /blog in the URL it takes me to pages/blog/index.js file.

Now my question is I have pages/blog/subponent.js I don't want users to access /blog/subponent because it is a subponent. How can I do that?

2. https://nextjs/docs/app/building-your-application/routing/pages-and-layouts

Now I saw another documentation from next.js that we can use page.js instead of index.js and only page.js bees publicly accessible.

• so does that mean the other files cannot be accessible if it is not page.js?

I'm really confused. Any help would be appreciated

• javascript
• next.js

Share Improve this question Follow asked Aug 2, 2023 at 4:39 Sanket hnSanket hn 7922 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

There are two types of routing in Nextjs:

1. Pages router
2. App router

Pages router (The first link you shared)

It enforces you to use index.tsx if you have the page ponent in a folder of pages directory, and if you don't want to use a folder, you can just directly create a file with page name in your pages directory. Such as:

pages/blog.js → /blog (wihtout folder)

pages/blog/index.js → /blog (within a folder)

App router (The second link you shared)

It enforces you to use pages.tsx if you have the page ponent in a folder of app directory, and if you don't want to use a folder, you can just directly create a file with page name in your app directory. Such as:

app/blog.js → /blog (wihtout folder)

app/blog/pages.js → /blog (within a folder)

As for other files in the folder, they won't be accessible as long as you have pages.tsx or index.tsx in your folder. But it is not a good practice to place ponents in pages or app folder. You should only place the page main ponent in these directory.

本文标签： javascriptwhat is the difference between indexjs vs pagejs in nextjsStack Overflow