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.
- Http services built ontop axios
- Design system with styled-component and RadixUI integration
- A git-action that runs the unit test on master and PR branches
- A git-hooks for local-ci that runs your linters and unit-tests
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"
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
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
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 :)"
For all of our folders, we use the kebab-casing convention. e.g components-folder, utils-folder, services-folder, hooks-folder.
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
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 useyarnyarn run devyarn run startOpen http://localhost:3000 with your browser to see the result.
yarn run buildyarn run testyarn run test:coverageyarn run storybookyarn run lintyarn run formatAll our design tokens lies inside the styles folder.
-
/src/styles/assets: this contains our resources e.g images, gif, and videos.
-
/src/styles/colors: this contains our colors.
-
/src/styles/typography: this contains our typographies e.g font-sizes, font-weights, spacing, breakpoints, and everything related to font.