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 dependencies
• pages/: The directory where we place our pages and build the routing...