{"id":20731786,"url":"https://github.com/emmanuelonah/nextjs-project-architecture-template","last_synced_at":"2025-05-11T01:31:22.264Z","repository":{"id":184507860,"uuid":"672011000","full_name":"emmanuelonah/nextjs-project-architecture-template","owner":"emmanuelonah","description":"This template provides a robust architecture for Next.js applications, addressing common challenges in configuring a Next.js boilerplate. It ensures that your production architecture remains up-to-date with the latest Next.js versions ⚛️.","archived":false,"fork":false,"pushed_at":"2024-11-11T03:00:53.000Z","size":2774,"stargazers_count":16,"open_issues_count":5,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-17T05:16:56.041Z","etag":null,"topics":["next-auth","nextjs","nextjs-architecture","nextjs-boilerplate","nextjs-example","nextjs-starter","nextjs-template","nextjs-typescript"],"latest_commit_sha":null,"homepage":"https://www.linkedin.com/in/onah/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emmanuelonah.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-28T17:21:05.000Z","updated_at":"2024-11-12T17:12:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"e53f0d58-c4ae-4484-9e32-82f2ff59b261","html_url":"https://github.com/emmanuelonah/nextjs-project-architecture-template","commit_stats":null,"previous_names":["emmanuelonah/nextjs-project-architecture-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanuelonah%2Fnextjs-project-architecture-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanuelonah%2Fnextjs-project-architecture-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanuelonah%2Fnextjs-project-architecture-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanuelonah%2Fnextjs-project-architecture-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emmanuelonah","download_url":"https://codeload.github.com/emmanuelonah/nextjs-project-architecture-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253504515,"owners_count":21918821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["next-auth","nextjs","nextjs-architecture","nextjs-boilerplate","nextjs-example","nextjs-starter","nextjs-template","nextjs-typescript"],"created_at":"2024-11-17T05:16:52.265Z","updated_at":"2025-05-11T01:31:21.916Z","avatar_url":"https://github.com/emmanuelonah.png","language":"TypeScript","funding_links":[],"categories":["NextJS"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/nextjs-architecture\"\u003e\n    \u003cimg src=\"./public/logo.png\" alt=\"logo\" width=\"300\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eYou-Project-Name-Here\u003c/h1\u003e\n\n## About\n\nThis 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.\n\n### Which configurations it comes with:\n\n1. [Http services built on top axios](./src/services/http-services/index.ts)\n2. [Design system with styled-component and RadixUI integration](./src/design-system/index.ts)\n3. [A git-action that runs the unit test on master and PR branches](/.github/dependabot.yml)\n4. [A git-hooks for local-ci that runs your linters and unit-tests](/.husky/_/husky.sh)\n5. [A global store mechanism. You don't need to bring in `redux`, `mobix`, or any external global state manager](./src/globalstore/index.tsx)\n6. [A PWA integration](/next.config.js)\n7. [A test/mock server using msw](./src/mocks/server.ts)\n\n## Technologies used\n\n1. [Next.Js](https://nextjs.org/)\n\n2. [Radix Ui](https://www.radix-ui.com/)\n\n3. [Styled components](https://styled-components.com/)\n\n4. [Jest](https://jestjs.io/)\n\n5. [React testing library](https://testing-library.com/docs/react-testing-library/intro/)\n\n6. [Eslint](https://eslint.org/)\n\n7. [Prettier](https://prettier.io/)\n\n8. [Git Husky](https://typicode.github.io/husky/)\n\n9. [Git Action](https://docs.github.com/en/actions)\n\n10. [Storybook](https://storybook.js.org/)\n\n## Host Environments\n\n1. [Production](replace-your-production-host-here)\n2. [Staging](replace-your-staging-host-here)\n3. [Development](http://localhost:3000/)\n\n## Architecture used\n\nMVP: we use the \"model view presenter\" UI flow architecture for separations of concerns\n\n- M(Model): All API communication, Data and business logic lies here\n- 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.\n- 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.\n\n__Below is an example of how MVP architecture works in real-life with respect to next.js__\n\n```ts\n/models/profile.model.ts =\u003e this is the \"M=Model\"\n\n/hooks/useProfile.presenter.ts =\u003e this is the \"P=Presenter\"\n\n/app/profile.tsx =\u003e this is the \"V=View\"\n \n```\n\n## Testing Architecture\n\nNote: ATM, all we are doing is unit-based/integration test. In the future, we plan to introduce e2e test.\n\nBecause we don't want to waste your precious time testing just everything, we encourage you to follow the [trophy-testing-pattern](https://subscription.packtpub.com/book/web-development/9781838642655/2/ch02lvl1sec08/understanding-the-testing-pyramid-and-trophy) 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\nyarn run test:coverage``` script\n\n\n## PR convention\n\nWhen creating a PR, use the below template\n\n```md\n# Ticket Title Here\n\nTicket description here\n\n## Resources below\nFor example, image 1 and give the images a title e.g Old login page\n\nFor example, image 2 and give the images a title e.g New login page\n\n```\n\n## Code convention\n\nWe 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 :)\"\n\n## Folder naming convention\n\nFor all of our folders, we use the kebab-casing convention. e.g components-folder, utils-folder, services-folder, hooks-folder.\n\n## File naming convention\n\nFor 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\n\n## Scripts\n\nThis 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\"\n\n__Ensure you are using node version latest__\nIf you have nvm, run the below command to select the latest node version:\n\n```bash\nnvm use\n```\n\n## Dependencies installation\n\n```bash\nyarn\n```\n\n## Development server\n\n```bash\nyarn run dev\n```\n\n## Production server\n\n```bash\nyarn run start\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Production build\n\n```bash\nyarn run build\n```\n\n## Run unit tests\n\n```bash\nyarn run test\n```\n\n## Run unit tests coverage\n\n```bash\nyarn run test:coverage\n```\n\n## Visualize the design system\n\n```bash\nyarn run storybook\n```\n\n## Lint errors\n\n```bash\nyarn run lint\n```\n\n## Format errors\n\n```bash\nyarn run format\n```\n\n## Design system\n\nAll our design tokens lies inside the styles folder.\n\n1. __/src/styles/assets:__ this contains our resources e.g images, gif, and videos.\n\n2. __/src/styles/colors:__ this contains our colors.\n\n3. __/src/styles/typography:__ this contains our typographies e.g font-sizes, font-weights, spacing, breakpoints, and everything related to font.\n\n## Enquiry\n\nIncase you have any question or need a suggestion on how to approach your architectural decisions, fee free to write me on [Linkediln](https://www.linkedin.com/in/onah/), i am very much active there and will do my best to assist you with the best practices.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femmanuelonah%2Fnextjs-project-architecture-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femmanuelonah%2Fnextjs-project-architecture-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femmanuelonah%2Fnextjs-project-architecture-template/lists"}