Use index.js file in Next.js as homepage or only as starting point?

Question

I wonder if I should implement my homepage directly inside the index.js file, or if I should create a seperate "home-page.js" file in the pages folder. Is the index.js file merely the starting point for the application or should I use it as a page itself? Or should I just redirect from index.js to my homepage? What are the different use cases for the index.js file in next.js vs react.js? I do not have any experiences and would like to hear some best practices or things to look out for.

Answer 1

(I assume that you mean the Next.js file /pages/index.js)

You should use the Next.js /pages/index.js file as a page itself ⁽¹⁾, i.e. as the page for the route http://localhost:3000, just the same as you would use e.g. /pages/about.js for the route http://localhost:3000/about.

The index.js files in Next.Js and in pure React are actually completely different, unrelated files:

1. React index.js is the entry point for the apps javascript execution (or "starting point" how you called it).
2. Next.js pages/index.js is the default route. It corresponds to the index.html of static webages, i.e. the page that comes up if you type e.g. http://localhost:3000 (without any page name) in the browsers address bar.

Next.js doesn't have any "entry point index.js" file at all (in the folders you are editing), instead all the final .js files will only be generated inside the .next folder when you start next build.

See also:

• How does Next JS application works on browser even without .html file in folder structure?)
• Why does create-react-app creates both App.js and index.js?

⁽¹⁾ I don't have any opinion about if you should use the /index.js directly, or redirect to e.g. /home, or avoid using /index.js altogether. Here I just try to explain what the /index.js file does, because I think that is what the question was actually asking.