{"id":13454881,"url":"https://github.com/FreakinWard/nextjs-boilerplate","last_synced_at":"2025-03-24T07:32:13.243Z","repository":{"id":44175069,"uuid":"366539398","full_name":"FreakinWard/nextjs-boilerplate","owner":"FreakinWard","description":"Start up a nextjs app quickly","archived":false,"fork":false,"pushed_at":"2024-11-05T19:18:56.000Z","size":3367,"stargazers_count":4,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-05T19:38:03.497Z","etag":null,"topics":["azure-devops","azure-pipelines","nextjs","nextjs-boilerplate","nextjs-starter"],"latest_commit_sha":null,"homepage":"","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/FreakinWard.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-11T23:40:08.000Z","updated_at":"2024-10-23T04:06:17.000Z","dependencies_parsed_at":"2024-01-21T05:20:08.474Z","dependency_job_id":"0d8b762b-b7f0-4149-898d-4e4e48354b29","html_url":"https://github.com/FreakinWard/nextjs-boilerplate","commit_stats":null,"previous_names":[],"tags_count":15,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FreakinWard%2Fnextjs-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FreakinWard%2Fnextjs-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FreakinWard%2Fnextjs-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FreakinWard%2Fnextjs-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FreakinWard","download_url":"https://codeload.github.com/FreakinWard/nextjs-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245227546,"owners_count":20580896,"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":["azure-devops","azure-pipelines","nextjs","nextjs-boilerplate","nextjs-starter"],"created_at":"2024-07-31T08:00:58.895Z","updated_at":"2025-03-24T07:32:12.798Z","avatar_url":"https://github.com/FreakinWard.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![Build Status](https://dev.azure.com/aaronward/nextjs-boilerplate/_apis/build/status%2Fnextjs-boilerplate-release?branchName=main)](https://dev.azure.com/aaronward/nextjs-boilerplate/_build/latest?definitionId=27\u0026branchName=main)\n[![codecov](https://codecov.io/gh/FreakinWard/nextjs-boilerplate/branch/main/graph/badge.svg?token=XL8EYC1YZP)](https://codecov.io/gh/FreakinWard/nextjs-boilerplate)\n[![CodeFactor](https://www.codefactor.io/repository/github/freakinward/nextjs-boilerplate/badge)](https://www.codefactor.io/repository/github/freakinward/nextjs-boilerplate)\n[![Maintainability](https://api.codeclimate.com/v1/badges/25a53970d9a620abcaf8/maintainability)](https://codeclimate.com/github/FreakinWard/nextjs-boilerplate/maintainability)\n[![Test Coverage](https://api.codeclimate.com/v1/badges/25a53970d9a620abcaf8/test_coverage)](https://codeclimate.com/github/FreakinWard/nextjs-boilerplate/test_coverage)\n[![Code Climate technical debt](https://img.shields.io/codeclimate/tech-debt/FreakinWard/nextjs-boilerplate?color=F1CE0C\u0026style=plastic)](https://codeclimate.com/github/FreakinWard/nextjs-boilerplate/issues)\n\n# NextJs Boilerplate\n\nThe purpose of this repo is to accelerate startup time when creating a new [NextJs](https://nextjs.org/docs) app.\n\n## Contents\n\n- [Getting Started](#getting-started)\n- [Directory Structure](#directory-structure)\n- [Features](#features)\n- [Libraries](#libraries)\n- [Scripts](#scripts)\n- [IDE Configurations](#ide-configuration)\n- [Committing Changes](#committing-changes)\n\n# Getting Started\n\n\u003e NOTE: this project locks node to a specific version in support of [azure static web apps](https://learn.microsoft.com/en-us/azure/static-web-apps/languages-runtimes#api).\n\u003e\n\u003e Consider using [nvm](https://collabnix.com/how-to-install-and-configure-nvm-on-mac-os/) to help manage multiple versions of node.\n\nFirst, create an `.env` file with the following:\n\n```dotenv\n#APPLICATIONINSIGHTS_CONNECTION_STRING=visit-azure-portal\n#NEXT_PUBLIC_API_MOCKING=enabled\nNEXT_PUBLIC_API_MOCKING=disabled\n\n# setup NextAuth - https://next-auth.js.org/configuration/options#secret\nNEXTAUTH_URL=http://localhost:3000\nNEXTAUTH_SECRET=hUZffSRxfqTsXF/08mFxO/T1p0pq2c5pXuZQ82CkSAU=\n\nGITHUB_ID=visit-https://github.com/settings/applications/1778388\nGITHUB_SECRET=visit-https://github.com/settings/applications/1778388\n```\n\nNext, install packages:\n\n```bash\nnpm install\n```\n\nFinally, run the development server:\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to start.\n\n# Directory Structure\n\n```\n📦 src\n┣ 📂 __tests__               # tests for pages\n┃ ┗ 📜 index.test.tsx\n┣ 📂 components              # components used within the app\n┃ ┗ 📜 Posts.tsx\n┣ 📂 Features                # feature components\n┃ ┗ 📂 Home\n┃   ┣ 📜 Home.tsx\n┃   ┗ 📜 index.tsx\n┣ 📂 context                 # application context providers\n┃ ┗ 📜 AppState.tsx\n┣ 📂 core                    # non-feature related core services\n┃ ┣ 📂 msw                   # msw used for mocking http requests\n┃ ┃ ┣ 📂 seed\n┃ ┃ ┃ ┣ 📜 seedHealth.js\n┃ ┃ ┃ ┣ 📜 seedPosts.js\n┃ ┃ ┃ ┗ 📜 seedStyleMedia.js\n┃ ┃ ┣ 📜 handlers.js\n┃ ┃ ┗ 📜 browser.js\n┃ ┃ ┗ 📜 server.js\n┃ ┗ 📜 test.utils.tsx\n┣ 📂 hooks                   # hooks used within the app\n┃ ┣ 📂 __tests__\n┃ ┃ ┗ 📜 usePosts.test.ts\n┃ ┗ 📜 usePosts.ts\n┣ 📂 pages                   # pages directory - drives navigation\n┃ ┣ 📂 api\n┃ ┃ ┗ 📜 posts.ts\n┃ ┣ 📜 _app.tsx\n┃ ┗ 📜 index.tsx\n┗ 📂 services                # feature-related services\n┃ ┣ 📂 __tests__\n┃ ┃ ┗ 📜 postsService.test.ts\n┃ ┗ 📜 postsService.ts\n```\n\n# Features\n\nThe setup and configuration includes a number of opinionated best-practices in attempt to keep the code clean, safe, and free of bugs.\n\nCode is formatted and linted with each save, if [configured](#ide-configuration), or at least before each commit with the help of husky.\n\nTests are configured for both unit and integration tests. Unit tests are performed with jest where msw helps avoid mocking http requests, both server and client, which allows for easier integration tests.\n\n# Libraries\n\n| Application                                                   | Description           |\n| ------------------------------------------------------------- | --------------------- |\n| [react](https://reactjs.org/docs/getting-started.html)        | react framework       |\n| [nextJs](https://nextjs.org/docs)                             | nextjs framework      |\n| [typescript](https://github.com/typescript-cheatsheets/react) | Enabling typescript   |\n| [react-query](https://react-query.tanstack.com/overview)      | Data-fetching library |\n\n| Static-code Analysis                               | Description                |\n| -------------------------------------------------- | -------------------------- |\n| [eslint](https://www.npmjs.com/package/eslint)     | Helps identify code issues |\n| [prettier](https://www.npmjs.com/package/prettier) | code formatting tool       |\n\n| Testing                                                                       | Description                              |\n| ----------------------------------------------------------------------------- | ---------------------------------------- |\n| [jest-junit](https://www.npmjs.com/package/jest-junit)                        | Testing Library                          |\n| [msw](https://www.npmjs.com/package/msw)                                      | Used to intercept and mock http requests |\n| [testing-library-react](https://www.npmjs.com/package/@testing-library/react) | Helper for UI component tests            |\n| [jest-html-reporters](https://www.npmjs.com/package/jest-html-reporters)      | Test reporter for visualizing tests      |\n\n| Git Hooks                                                                  | Description                                                  |\n| -------------------------------------------------------------------------- | ------------------------------------------------------------ |\n| [husky](https://www.npmjs.com/package/husky)                               | Creates sharable git-commit hooks                            |\n| [lint-staged](https://www.npmjs.com/package/lint-staged)                   | Ensure code is linted before committing to branch            |\n| [validate-branch-name](https://www.npmjs.com/package/validate-branch-name) | Ensures a branch is created before committing to master/main |\n\n## Library updates\n\nTo more-easily update packages, use:\n\n```bash\n# first, install\nnpm install -g npm-check-updates\n\n# use ncu\nncu --interactive --format group\n```\n\n# Scripts\n\n## Unit tests\n\n```bash\nnpm run test    # runs all tests, creating test report\n```\n\n```bash\nnpm run test:open    # opens the test report\n```\n\n```bash\nnpm run test:cover    # runs all tests, creating coverage report\n```\n\n```bash\nnpm run test:cover:open    # opens the coverage report\n```\n\n## End-to-end (e2e)\n\n```bash\nnpm run test:e2e    # within the cli, runs end-to-end (e2e) tests\n```\n\n```bash\nnpm run test:e2e:open    # visualize end-to-end (e2e) tests\n```\n\n```bash\nnpm run test:e2e:verify    # validates end-to-end (e2e) tests ability to run\n```\n\n```bash\nnpm run test:e2e:ci    # runs end-to-end (e2e) tests for continuous integration (ci) pipeline\n```\n\n```bash\nnpm run test:e2e:report    # opens html report from end-to-end (e2e) test results\n```\n\n## Static code analysis\n\n```bash\nnpm run lint    # runs lint check, produces report\n```\n\n```bash\nnpm run lint:fix    # runs lint and fixes, produces report\n```\n\n## Utility scripts\n\n```bash\nnpm run prepare   # installs husky hook - this lints the app before each commit\n```\n\n```bash\nnpm run format   # run code format check\n```\n\n```bash\nnpm run format:fix   # run fix code formatting\n```\n\n```bash\nnpm run pre-commit   # this is ran prior to a git commit - runs lint and checks branch name\n```\n\n# IDE-configuration\n\n## VS Code\n\nThe `.vscode` directory is checked into this repo and serves to share common settings and defaults.\n\n[Recommended Extensions](https://code.visualstudio.com/docs/editor/extension-marketplace#_recommended-extensions) are configured, be sure to install.\n\n| Setting                  | Description                                                       |\n| ------------------------ | ----------------------------------------------------------------- |\n| eslint.validate          | Validate and fixes eslint errors. This also fixes prettier issues |\n| typescript.suggest.paths | Turned off to enable correct usage within auto-rename-tag         |\n\n| Extension          | Description                             |\n| ------------------ | --------------------------------------- |\n| code-spell-checker | checks spelling errors withing the code |\n| vscode-icons       | Directory icons                         |\n| vscode-jest        | Helps renaming tags                     |\n| auto-rename-tag    | Helps renaming tags                     |\n| vscode-eslint      | Integrate with lint rules               |\n\n### Snippets\n\n```javascript\n// entering: desc\ndescribe('', () =\u003e {});\n```\n\n```javascript\n// entering: it\nit('should ', () =\u003e {\n  // arrange\n  // act\n  // assert\n});\n```\n\n```javascript\n// entering: ita\nit('should ', async () =\u003e {\n  // arrange\n  // act\n  // assert\n});\n```\n\n```javascript\n// entering: func\nexport default function () {}\n```\n\n```javascript\n// entering: hook\nexport default function use() {}\n```\n\n## Webstorm\n\nThe `.idea` directory is checked into this repo and serves to share common [run configurations](https://www.jetbrains.com/help/webstorm/run-debug-configuration.html)\n\n| Setting   | Description                 |\n| --------- | --------------------------- |\n| All Tests | Execute and watch all tests |\n| Dev       | Run application             |\n\n# Committing Changes\n\n[Husky](https://typicode.github.io/husky/) makes [git hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) sharable within a project while also ensuring code conventions are enforced. The hook is installed during `npm install` and should require no further setup.\n\nHusky pre-commit is configured to run the npm task `pre-commit` which does the following:\n\n- Avoid commits to master/main\n- Format staged code\n- Lint staged code\n\nShould the need arise to ignore the hook, manually commit using `--no-verify`\n\n```shell\n# Example\ngit commit -m \"commit message\" --no-verify\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFreakinWard%2Fnextjs-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFreakinWard%2Fnextjs-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFreakinWard%2Fnextjs-boilerplate/lists"}