Folder Structure

This chapter gives the overview of folder structure and content in the next.js version of the Jumbo React.

1. app

   1. components

      This folder although seems to be a common folder but it is as important as the app folder. In this folder, we define all the re-usable components like general input box, buttons, cards etc and use them throughout the template. We say it the most important folder because after declaring the component here, if we need to change something in that component in the future, we just have to apply that change in this folder and it will be reflected throughout the whole template/app saving a lot of time for us.

   2. core

      This folder contains all the stateful files related to the structure of the template. It contains the files related to layouts, headers and sidebar of the template. If something needs to be updated in the layout, header, sidebar or customizer of the template, this folder should be looked upon to. This folder can also be called as entry point of the app.

   3. hoc

      This folder contains HOCs which are used at different places.

2. IngProvider

   It contains the files related to languages used in the template. This folder is important for multi-lingual templates. When we use multiple languages, we don't render a text directly on the screen, instead we define a unique key for that text and then render it on the screen and in this folder we define that unique ids and its corresponding text according to the different languages.

3. pages

   This folder is special folder of next.js. This folder must be present in all the next.js based projects. The file names in this folder are the url paths and the content in the file is the content that renders on that path.

   For example, you are running the project on the base path : -

   www.xyz.example.

   Now, if there is a file name "signin" in the pages folder, then you can access the path - www.xyz.example/signin and the content that will load on this path will be the code that is written in the signin file.

4. redux, constants

   As the name suggests, these folders are related to Redux. In these folders, we define the global states that we will be using in different files throughout the templates and the functions to update the global states.

5. routes

   All the code related to the content of the template lies in this folder. This is the folder where we define the corresponding components as per the paths declared in the pages folder.

6. static

   It contains the images, media and other raw material used in the template.

7. styles

   It contains all the CSS related files of the template. Since Jumbo React uses Sass for the beautification of the template so this folder contains all the Sass related files.

8. utils

   This folder contains files that contain global helper functions.

9. package.json

   This file contains the information of dependencies installed in the template. Information includes the name and version of the dependency.