{"id":20930339,"url":"https://github.com/jmlweb/tsnextstarter","last_synced_at":"2025-05-13T19:32:06.379Z","repository":{"id":49351372,"uuid":"517446374","full_name":"jmlweb/tsnextstarter","owner":"jmlweb","description":"A clean and lightweight TypeScript Next.js Starter powered by the tools (nearly) everybody use","archived":false,"fork":false,"pushed_at":"2023-02-20T14:30:31.000Z","size":3278,"stargazers_count":12,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-03-23T03:36:08.609Z","etag":null,"topics":["cypress","eslint","jest","nextjs","prettier","react","starter","storybook","template","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jmlweb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-24T22:01:17.000Z","updated_at":"2023-03-05T01:05:25.000Z","dependencies_parsed_at":"2023-02-16T08:01:54.028Z","dependency_job_id":null,"html_url":"https://github.com/jmlweb/tsnextstarter","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmlweb%2Ftsnextstarter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmlweb%2Ftsnextstarter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmlweb%2Ftsnextstarter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmlweb%2Ftsnextstarter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmlweb","download_url":"https://codeload.github.com/jmlweb/tsnextstarter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225254368,"owners_count":17445171,"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":["cypress","eslint","jest","nextjs","prettier","react","starter","storybook","template","typescript"],"created_at":"2024-11-18T21:32:04.407Z","updated_at":"2024-11-18T21:32:05.253Z","avatar_url":"https://github.com/jmlweb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Stargazers](https://img.shields.io/github/stars/jmlweb/tsnextstarter.svg?style=for-the-badge)](https://github.com/jmlweb/tsnextstarter/stargazers)\n[![GitHub followers](https://img.shields.io/github/followers/jmlweb?style=for-the-badge)](https://github.com/jmlweb?tab=followers)\n[![License](https://img.shields.io/github/license/jmlweb/tsnextstarter.svg?style=for-the-badge)](https://github.com/jmlweb/tsnextstarter/blob/master/LICENSE.txt)\n[![GitHub last commit](https://img.shields.io/github/last-commit/jmlweb/tsnextstarter?style=for-the-badge)](https://github.com/jmlweb/tsnextstarter/commits/main)\n[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/jmlweb/tsnextstarter?style=for-the-badge)](https://github.com/jmlweb/tsnextstarter/tags)\n[![GitHub Workflow Status: cicd](https://img.shields.io/github/workflow/status/jmlweb/tsnextstarter/cicd?label=CI/CD\u0026style=for-the-badge)](https://github.com/jmlweb/tsnextstarter/actions/workflows/cicd.yml)\n[![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://linkedin.com/in/josemanuel.lucas)\n[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge\u0026logo=Twitter\u0026logoColor=white)](https://twitter.com/jmlweb)\n\n\u003ch1 align=\"center\"\u003e\n\n![TS Next Starter](https://repository-images.githubusercontent.com/517446374/3f7edb66-baed-443f-8341-ab34e9191c2f)\n\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  This is a template for a \u003ca href=\"https://nextjs.org/\"\u003eNext.js\u003c/a\u003e project based on \u003ca href=\"https://github.com/vercel/next.js/tree/canary/packages/create-next-app\"\u003ecreate-next-app\u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://github.com/jmlweb/tsnextstarter/issues\"\u003eReport Bug\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/jmlweb/tsnextstarter/issues\"\u003eRequest Feature\u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr /\u003e\n\n## ⚡ Quickstart\n\nYou can click on the button **Use this template** or start a new project with create-next-app\n\n```bash\nnpx create-next-app -e https://github.com/jmlweb/tsnextstarter\n#or\nyarn create next-app -e https://github.com/jmlweb/tsnextstarter\n#or\npnpm create next-app -e https://github.com/jmlweb/tsnextstarter\n```\n\n## 🧠 Philosophy\n\n- To be opinionated on the tools, but not on the code\n- To help implementing a scalable, module-based directory organization\n\n### What's included\n\n[![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge\u0026logo=next.js\u0026logoColor=white)](https://nextjs.org/)\n[![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Jest](https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge\u0026logo=jest\u0026logoColor=white)](https://jestjs.io/)\n[![Testing-Library](https://img.shields.io/badge/-TestingLibrary-%23E33332?style=for-the-badge\u0026logo=testing-library\u0026logoColor=white)](https://testing-library.com/)\n[![cypress](https://img.shields.io/badge/-cypress-%23E5E5E5?style=for-the-badge\u0026logo=cypress\u0026logoColor=058a5e)](https://www.cypress.io/)\n[![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge\u0026logo=storybook\u0026logoColor=white)](https://storybook.js.org/)\n[![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge\u0026logo=eslint\u0026logoColor=white)](https://eslint.org/)\n[![GitHub Actions](https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge\u0026logo=githubactions\u0026logoColor=white)](https://github.com/features/actions)\n\n- The basic Next.js template with [TypeScript](https://www.typescriptlang.org/) support\n- [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/docs/react-testing-library/intro/) (provided by [@swc/jest](https://swc.rs/docs/usage/jest) for better performance)\n- [Mocking for http req and res](https://github.com/howardabrams/node-mocks-http) (useful for API handlers)\n- Two [layouts](https://nextjs.org/docs/basic-features/layouts) are ready to be used: A \"common\" one (intended to be used as default) and an \"empty\" one (just in case you need a completely different look \u0026 feel for some pages)\n- [Storybook](https://storybook.js.org/) configured and integrated with Next.js\n- [Cypress](https://www.cypress.io/) is already configured for Next.js and integrated with GitHub actions\n- [prettier](https://prettier.io/)\n- [eslint](https://eslint.org/)\n  - prettier integration\n  - [automatic import sorting](https://github.com/lydell/eslint-plugin-simple-import-sort)\n  - [Testing library integration](https://github.com/testing-library/eslint-plugin-testing-library)\n- [conventional commits](https://www.conventionalcommits.org/) integration:\n  - [linting](https://github.com/conventional-changelog/commitlint)\n  - [commitizen](https://github.com/commitizen/cz-cli) integration\n  - [changelog generation](https://github.com/absolute-version/commit-and-tag-version)\n- runs linting for code and commit message [on each commit](https://github.com/typicode/husky)\n- [GitHub actions](https://github.com/features/actions):\n  - linting\n  - testing \u0026 building\n  - package.json \u0026 tag version bumping (based on semantic commits)\n\n### What's not included?\n\n- Any styling solution\n- Any library for state management, nor for graphql/rest handling\n- Visual changes to the standard create-next-app template\n\n## 🎛️ Scripts\n\n- `dev`: Start server on dev mode\n- `build`: Build code for production\n- `start`: Start production server\n- `lint`: Lint code\n- `test`: Run Jest\n- `test:watch`: Run Jest on watch mode for the file provided as argument\n- `test:watchAll`: Run Jest on watch mode for all the files\n- `test:coverage`: Run Jest on coverage mode\n- `prepare`: Install husky hooks\n- `commit`: Run commitizen\n- `release`: Run changelog generation and version bumping\n- `storybook`: Run Storybook in development mode\n- `build-storybook`: Run Storybook in build mode\n\n## 🔪 Directories organization\n\n### src\n\nFor a better organization, the code is organized inside the `src` folder, while the configuration files and the `public` directory are located at the root level.\n\n[This is supported by Next.js by default](https://nextjs.org/docs/advanced-features/src-directory).\n\n#### src/pages\n\nThis folder is used only for routing purposes. Every file inside the `pages` folder should not have any logic attached but to re-export the modules (default for the Component, named for server-side data fetching functions) from the `scenes` folder.\n\n#### src/scenes\n\nA `scene` represents a logical set of screens (or just one) from the application and is formed by:\n\n- One or more [\"page\" components](https://nextjs.org/docs/basic-features/pages).\n- If they are needed, one or more [data-fetching functions](https://nextjs.org/docs/basic-features/data-fetching/overview) (`getStaticProps`, `getStaticPaths`, `getServerSideProps`)\n- Other files or folders which are used by the scene(s) component(s).\n  - `components`\n  - `utils`\n  - `*.stories.tsx`\n  - ...\n\nEach `scene` can serve to different `pages`, by using different combinations of `page components` and `data-fetching functions`:\n\n- A `scene` could export two different components (or \"sub-scenes\"), along with the same `getStaticProps` function.\n- The two components represent the same information and use internally most of the same sub-components while maintaining a completely different layout (including subtle variations on the sub-components).\n- The route \"/items/layout-a\" could point to one of the components, while \"/items/layout-b\" could point to the other one.\n\nIf needed, a `scene` can contain also other folders like `components`, and `data`... with modules shared across the scene.\n\nIf you want, you can place your unit tests and stories at the same level as your code.\n\n#### src/apiHandlers\n\nEach subfolder inside the `apiHandlers` folder contains one or more handlers (which will be later imported by the [api routes](https://nextjs.org/docs/api-routes/introduction)) and optionally the tests, utilities, or any other type of auxiliary file.\n\n#### src/layouts\n\nThe layout is formed by a component, along with a function called `getLayout` which will be imported by the scene and placed in the special `getLayout` property of the scene component.\n\n[Refer to the Next.js documentation for more info about the layouts](https://nextjs.org/docs/basic-features/layouts)\n\n#### src/components, src/data, src/helpers, src/utils...\n\nJust use a folder at the `src` level for any kind of file which is shared by two or more `scenes`.\n\n### **test**\n\nYou can use this directory for your integration tests with Jest\n\n### cypress\n\ne2e (and/or integration) tests and fixtures for Cypress\n\n### .storybook\n\nConfiguration files for Storybook\n\n### .github/workflows\n\nCI/CD and bumping workflows for GitHub Actions\n\n## 🤷 F.A.Q.\n\n### Shall I use the version bumping manually or with the action provided\n\n#### If you are using already GitHub actions\n\n- If are comfortable with the workflow, just remember not to run the `release` command manually\n- If you prefer to bump manually, delete the `bumping.yml` file inside `.github/workflows` folder. Whenever you want to do the bumping, run the `release` script and push your files and tags.\n\n#### If you are not using GitHub actions\n\nYou can safely delete the `.github` folder or just forget about its existence as it won't harm your project.\n\n### How to integrate X feature/technology into my project?\n\nPlease, refer to the official [Next.js documentation](https://nextjs.org/docs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmlweb%2Ftsnextstarter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmlweb%2Ftsnextstarter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmlweb%2Ftsnextstarter/lists"}