next.jsfile-structure

Different file-structure is created in my project than my tutor's , is that fine?


I have just begun to learn Next.js and the video I was learning from shows a different file structure after creating a Next.js project from mine. In my tutor's video, in src folder there are separate folders for pages and styles that contains files like _app.js, _document.js, and index.js whereas if I create a new project I get a different file structure with a single folder in src named app with files global.css, layout.js, page.js only.

I am confused about why it's different & will there be any problems in my project if I move ahead with such file structure also I think _app.js is a really important file but its different in mine.

This is my tutor's project

And this is how it is created in mine


Solution

  • You are using nextjs's new app router, and your tutor is using the older pages directory. There are some pretty big differences, so you might want to remake your project using npx create-next-app@latest and when you are prompted on whether you want to use the app router, select no.

    Info on differences between the two