use something other than index.js as the main page in a directory in next.js

Question

In next js, a typical path to a page is:

/pages/blog/index.js

In Visual Studio Code, this means when I am editing a bunch of pages, they all show up as index.js in the tabs making it difficult to keep files sorted out.

I prefer to name my pages like so:

/pages/blog/blog.js

for the the page that you go to when you go to example.com/blog

Is there a way to configure this behavior in Next.js?

Answer 1

you can move your content from index.js to blog.js

then in index.js you put this code:

import blog from "./blog.js";

export default blog;