# Folder Structure

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

![](/files/-M8oEgeypY0B4IbO7OlN)

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](http://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](http://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. 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-jumbo-react.g-axon.work/next-js/folder-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.