Folder Structure


  • node_modules: It contains all the npm packages that are used on this project.

  • components: Here are the React components that could be reused in multiple pages or are complex enough to move them to another file and test them individually. Each file should have a default export with a single component; inside the file, there could be multiple components.

  • Pages: Here are the pages (also known as views) of the application, each file will automatically match a route as described in the Next.js documentation.

  • static: Any static file required by the application (images, audios, etc.) could be placed here.

  • scss: The stylesheet is compiled to css. Next.JS will automatically add the CSS file to the HTML.

  • store: Used to manage the state via redux

  • package.json: This file contains dependencies and scripts required for the project.

  • next.config.js: contains extended next configurations like CSS module support, font import, image import, optimization, and env variables.

  • package-lock.json contains the exact dependency tree to be installed in /node_modules. It helps while a team is working on private apps to ensure that they are working on the same version of dependencies and sub-dependencies. It also maintains a history of changes done in package.json so that at any point in time, when required, previous changes can be looked back at in the package-lock.json file.

Last updated