emmanuelonah / nextjs-project-architecture-template

This is a NextJs project architecture template 👨‍💻.

You-Project-Name-Here

About

This is a Production sample of how a NextJs project should be architected brought to you by "Emmanuel Onah". Feel free to clone it and use it as a base of your next.js projects. Note: Search through the project for "You-Project-Name-Here" and substitute them with your project name.

Which configurations it comes with:

1. Http services built ontop axios
2. Design system with styled-component and RadixUI integration
3. A git-action that runs the unit test on master and PR branches
4. A git-hooks for local-ci that runs your linters and unit-tests

Technologies used

1. Next.Js

2. Radix Ui

3. Styled components

4. Jest

5. React testing library

6. Eslint

7. Prettier

8. Git Husky

9. Git Action

10. Storybook

Architecture used

MVP: we use the "model view presenter" UI flow architecture for separations of concerns

• M(Model): All API communication, Data and business logic lies here
• V(View): All the UI structures that makes up the beautiful UI that the end-users sees lies here. In the case of Next.JS, the whole "DUMMY" UI structures are brought together under the app folder.
• P(Presenter): This is the middle-layer between the Model and the View i.e there is no direct interaction between the Model and the View. So, if the model needs a user input(lets say age-input) to make a http-request, the model will communicate with the Presenter, the presenter will ask the View for the age-input, the View will give the age-input to the presenter, then the presenter will give it to the model, then the model will make the request and give the response(if any exist) to the presenter, and finally the presenter will give the response to the view. Note, the presenter can be a hook, util or even a helper it doesn't matter, it just depends on the context.

Below is an example of how MVP architecture works in real-life with respect to next.js

/models/profile.model.ts => this is the "M=Model"

/hooks/useProfile.presenter.ts => this is the "P=Presenter"

/app/profile.tsx => this is the "V=View"
 

Testing Architecture

Note: ATM, all we are doing is unit-based/integration test. In the future, we plan to introduce e2e test.

Because we don't want to waste your precious time testing just everything, we encourage you to follow the trophy-testing-pattern where realistic testing is done in the integrated-phase which implicitly tests the units(parts that makes up the integrated phase). By the end of your test, ensure that your test has a minimum of 80% coverage by running the bash yarn run test:coverage script

PR convention

When creating a PR, use the below template

# Ticket Title Here

Ticket description here

## Resources below
For example, image 1 and give the images a title e.g Old login page

For example, image 2 and give the images a title e.g New login page

Code convention

We use the "next/core-web-vitals" coding standard which is enforced by an eslint-extension we use. So, ensure to go through at least each file within the folders to get an overview of our coding standards like "imports patterns", "export patterns", "named regular functions", "arrow function", "anonymous function, please don't do this one, we want all our functions to be named at least a-named-function-expression :)"

Folder naming convention

For all of our folders, we use the kebab-casing convention. e.g components-folder, utils-folder, services-folder, hooks-folder.

File naming convention

For all file types, we use kebab naming convention only "hooks file we use camelCasing" we . e.g component-file.tsx, useProfile.ts, profile-util.ts

Scripts

This project uses yarn by default as you can see from the "yarn.lock file", and we recommend it remain so to avoid "multiple lock-files"

Ensure you are using node version latest If you have nvm, run the below command to select the latest node version:

nvm use

Dependencies installation

yarn

Development server

yarn run dev

Production server

yarn run start

Open http://localhost:3000 with your browser to see the result.

Production build

yarn run build

Run unit tests

yarn run test

Run unit tests coverage

yarn run test:coverage

Visualize the design system

yarn run storybook

Lint errors

yarn run lint

Format errors

yarn run format

Design system

All our design tokens lies inside the styles folder.

1. /src/styles/assets: this contains our resources e.g images, gif, and videos.

2. /src/styles/colors: this contains our colors.

3. /src/styles/typography: this contains our typographies e.g font-sizes, font-weights, spacing, breakpoints, and everything related to font.