Organizing the folder structure
Organizing your new project's folder structure neatly and clearly is incredibly important in terms of keeping your code base scalable and maintainable.
As we've already seen, Next.js forces you to place some files and folders in particular locations of your code base (think of _app.js and _documents.js files, the pages/ and public/ directories, and so on), but it also provides a way to customize their placement inside your project repository.
We've already seen that, but let's do a quick recap on a default Next.js folder structure:
next-js-app - node_modules/ - package.json - pages/ - public/ - styles/
Reading from top to bottom, when we create a new Next.js app using create-next-app, we get the following folders:
node_modules/: The default folder for Node.js project dependenciespages/: The directory where we place our pages and build the routing...