## The Idea

The team recently switched from Normal Create React App to Next JS. After that choice, I was given the assignment to make a Template for the Backstage. Not simply a template but also one that will scale effectively in the future. Since it is common knowledge that as applications get bigger, their folder and code structures get more complicated over time, and eventually, it all starts to look intimidating, therefore, the objective was to develop a Directory structure that can grow over time while remaining manageable. 

After performing much research, I developed a Next JS Structure, and we are now using it in all of our projects. Making our application as scalable as possible is the goal. This lesson will put a lot of emphasis on the front-end portion of our program, keeping in mind that the backend of our application is primarily built using Spring boot.

#### Structure :

The folder structure looks a bit like the one below.

```
- Connectors
- Pages
- Containers
- Components
- Redux
- Services
- Themes
- Translations
- Utils
- Assets
```

##### Connector

Connectors are levels of communication with the backend, such as Apollo. The Apollo clients and Basic Rest Connectors can be stored in the Connector folder and exported using the index file. So, the interior of the Connectors will appear as follows:

```
- Connector
  - index.ts 
  - cmsClient.ts
  - backendClient.ts
 ```

The benefit is having all of your primary external connectors in one location, making contacting them much more straightforward.

##### Pages

As a result of Next js's directory-based routing, the page folder will immediately export the default from containers, which we will cover in more detail later. Server-side and build-time data fetching logic code will both be included on pages.

##### Containers

I am quite proud of this strategy because it has made my life so much easier and is something I genuinely adore. The idea behind a container is to have a container that can hold future children's containers and that kids can do the same. As we all know, a page comprises several sections, essentially containers in and of themselves. A sample of the containers is shown below.

```
- Container
  - HomeContainer
    - IntroductionContainer
    - AboutContainer
       - AnotherChildContaine
 ```

Because of this structure, this method makes things relatively simple, and the separation of concerns endures. And because they are being reused, containers like FooterContainer and HeaderContainer can persist on the top layer.

##### Components

There isn't much to explain here because components are essentially re-usable components, as we all know and love.

#### Redux

A folder to store all the ReduxToolKit-based global state logic. The concept is to create a module-based structure, save all module-related states in a single file, and set store export as the default.

```
- Redux
  - Index.ts
  - User
    - Index.ts
```

##### Services

We must also comprehend the services folder's folder structure, modelled after the MVC framework. The folder would contain the data transformation, mapping, and fetching helpers, which would be organized by modules.

So, 

```
- Services 
   - User
    - gql.ts
    - Index.ts

```

###### Theme : 
A Folder that would contain your theme config.

###### Translations : 
It would contain your translations for different languages

###### Utils : 
Re-usable functions 

###### Assets : 
 As the name suggests, standard assets will be used in the application. 

###### Interfaces : 
Re-usable interfaces can reside here. 

## Summary : 

The suggested folder structure is highly opinionated. I chose this structure because it gives me the simplicity that even a novice developer discussing the project can grasp.

You are welcome to share any suggestions for improvement or things I may have overlooked in the comment box below.

### Incoming Stories : 

🚨 Next JS template based on this article.

🚨 GraphQL with Next JS.

🚨 Ultimate Themeing Support for your React Application.

🚨 Post Commit Configuration with EsLint, Husky, Type Checks and Testings.


This article will suggest a technique to build your Next.Js application so that it may scale well as the program grows in size while also not overwhelming the developers with the structure itself.


Most scalable Next Js Folder Structure

Raja Osama