{"id":50840387,"url":"https://github.com/devianllert/nextplate","last_synced_at":"2026-06-14T06:08:35.569Z","repository":{"id":37032418,"uuid":"353085989","full_name":"devianllert/nextplate","owner":"devianllert","description":"Ultimate template for Next.js with a pack of incredible tools","archived":false,"fork":false,"pushed_at":"2026-06-13T15:55:52.000Z","size":11149,"stargazers_count":65,"open_issues_count":12,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-13T17:27:00.076Z","etag":null,"topics":["boilerplate","effector","emotion","eslint","feature-sliced","jest","nextjs","react","starter","storybook","template","typescript"],"latest_commit_sha":null,"homepage":"https://nextplate.dvnllrt.com","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/devianllert.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-03-30T17:29:59.000Z","updated_at":"2026-04-14T20:38:09.000Z","dependencies_parsed_at":"2024-01-16T14:48:03.708Z","dependency_job_id":"1c281b75-53a5-47c9-9434-a9814729bfba","html_url":"https://github.com/devianllert/nextplate","commit_stats":null,"previous_names":[],"tags_count":17,"template":true,"template_full_name":null,"purl":"pkg:github/devianllert/nextplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devianllert%2Fnextplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devianllert%2Fnextplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devianllert%2Fnextplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devianllert%2Fnextplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devianllert","download_url":"https://codeload.github.com/devianllert/nextplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devianllert%2Fnextplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34310844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["boilerplate","effector","emotion","eslint","feature-sliced","jest","nextjs","react","starter","storybook","template","typescript"],"created_at":"2026-06-14T06:08:34.457Z","updated_at":"2026-06-14T06:08:35.563Z","avatar_url":"https://github.com/devianllert.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nextplate\n\nUltimate template for Next.js with a pack of incredible tools\n\n![GitHub package.json version](https://img.shields.io/github/package-json/v/devianllert/nextplate?style=for-the-badge)\n![GitHub](https://img.shields.io/github/license/devianllert/nextplate?style=for-the-badge)\n![GitHub issues](https://img.shields.io/github/issues/devianllert/nextplate?style=for-the-badge)\n![Renovate](https://img.shields.io/badge/Renovate-enabled-blue?style=for-the-badge)\n\n## Introduction\nThis is a **template** with all you need for your next web application. Aims for developers who really care about code quality, architecture, security and all the best practices in frontend.\n\n---\n\n## Features\n\n#### Architecture (WIP!)\n- **[Feature-Sliced Design](https://feature-sliced.design)** – An architectural methodology for scaffolding front-end applications. The main purpose of this methodology is to make the project more understandable and structured in the face of ever-changing business requirements.\n\n#### Framework\n\n- **[Next](https://nextjs.org)** – A complete React framework for hybrid and server rendering\n\n#### Localization\n\n- **[next-i18next](https://github.com/i18next/next-i18next)** – The easiest way to translate your NextJs apps\n\n#### State Management\n\n- **[effector](https://effector.dev)** – A lightweight and performant state manager that is UI frameworks agnostic, predictable and easy to use\n\n#### Data Fetching\n\n- **[farfetched](https://farfetched.pages.dev)** – The advanced data fetching tool for web applications\n- **[axios](https://axios-http.com)** – Promise based HTTP client for the browser and Node.js\n- **[orval](https://orval.dev)** – Generate, valid, cache and mock in your frontend applications all with your OpenAPI specification.\n- **[msw](https://mswjs.io)** – Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.\n\n#### Design System \u0026 Styling\n\n- **[Storybook](https://storybook.js.org)** – A frontend workshop for building UI components and pages in isolation.\n- **[Radix](https://www.radix-ui.com)** – An open-source UI component library for building high-quality, accessible design systems and web apps.\n- **[emotion](https://emotion.sh/docs/introduction)** – a library designed for writing css styles with JavaScript\n- **[framer-motion](https://www.framer.com/motion/)** – A production-ready motion library for React\n\n#### Validation\n\n- **[Zod](https://zod.dev)** – TypeScript-first schema declaration and validation library\n\n#### Tests\n\n- **[Jest](https://jestjs.io)** – A delightful JavaScript Testing Framework with a focus on simplicity\n- **[Testing Library](https://testing-library.com)** –  Simple and complete testing utilities that encourage good testing practices\n\n#### Design Patters\n\n- **[ESLint](https://eslint.org)** – Find and fix problems in your JavaScript code\n- **[Prettier](https://prettier.io)** – An opinionated code formatter, supporting multiple languages and code editors\n- **[Husky](https://github.com/typicode/husky)** – Modern native Git hooks made easy\n- **[lint-staged](https://github.com/okonet/lint-staged)** – Run linters against staged git files and don't let 💩 slip into your code base\n- **[commitlint](https://commitlint.js.org/#/)** – Helps your team adhering to a commit convention\n- **[Standard Version](https://github.com/conventional-changelog/standard-version)** – A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits\n\n#### Monitoring\n\n- **[Sentry](https://sentry.io/)** - A crash reporting platform that provides you with \"real-time insight into production deployments with info to reproduce and fix crashes\"\n\n\n#### Analysis\n\n- **[why-did-you-render](https://github.com/welldone-software/why-did-you-render)** – Notify you about potentially avoidable re-renders\n- **[@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)** - Visualize size of webpack output files with an interactive zoomable treemap.\n\n\n#### Additional Plugins\n\n- **[next-sitemap](https://github.com/iamvishnusankar/next-sitemap)** – Sitemap generator for Next.js\n- **[pathpida](https://github.com/aspida/pathpida)** – TypeScript friendly internal link client for Next.js and Nuxt.js.\n---\n\n## Getting Started\n\n1. Click on \"**Use this template**\" button\n2. Configure your new repository and click on \"**Create repository from template**\" button\n3. Now you can clone the generated repository to your local machine:\n    ```bash\n    git clone https://github.com/\u003cYOUR-GITHUB-LOGIN\u003e/\u003cNAME-OF-YOUR-GENERATED-REPOSITORY\u003e.git\n    ```\n\n4. install dependencies:\n   ```bash\n   yarn install\n   ```\n\n### Development\n\nRun the local development server:\n\n```\nyarn start:dev\n```\n\n### Production\n\nYou can generate a build to test and/or deploy to your production environment.\n\n```bash\nyarn build\n```\n\nAnd then run the build:\n\n```bash\nyarn start:prod\n```\n\n### Running the tests\n\nYou can run tests with this commands:\n\n```bash\nyarn test\n```\n\nRun in watch mode:\n\n```bash\nyarn test:watch\n```\n\nRun to see the coverage:\n\n```bash\nyarn test:coverage\n```\n\n### Linting\n\nYou can run linting with this commands:\n\n```bash\nyarn lint\n```\n\nRun to automatically fix problems:\n\n```bash\nyarn lint:fix\n```\n\nRun to check type errors:\n\n```bash\nyarn typecheck\n```\n\n### Running storybook\n\nYou can run storybook with this commands:\n\n```bash\nyarn sb # alias to yarn storybook\n```\n\n### Misc\n\nRun to analyse production bundle:\n\n```bash\nyarn analyse:bundle\n```\n\nRun to check for circular dependencies:\n\n```bash\nyarn analyse:circular\n```\n\nRun to check for unused dependencies:\n\n```bash\nyarn analyse:deps\n```\n\n## Project structure\n\n### Why not just components, hooks, styles, constants, etc.?\n\nCode organized by kind is one of the most popular ways for JavaScript developers to build their applications, structuring files based on what they are, without considering the different relationships between the files. It's a popular practice among developers who use patterns such as MVC. That’s okay when you work on small applications, but as the application grows, it can have a significant impact on the team's velocity.\n\nWhen you work on a large project, it can be difficult to identify the origin of an issue. As a developer, you might spend a significant amount of time digging through thousands of lines of code until you understand all the relationships. In FSD, a project consists of layers (features, entities, shared, etc), each layer is made up of slices (aka modules) and each slice is made up of segments (model, ui, api, etc.). Slices cannot use other slices on the same layer, and that helps with high cohesion and low coupling. It helps maximize code sharing and reusability in different sections of your application and even in other projects.\n\n\u003cimg title=\"Feature-Sliced Design layers schema\"  src=\"./docs/fsd-schema.jpg\"\u003e\n\nSee [Feature-Sliced Design overview](https://feature-sliced.design/docs/get-started/overview) to understand how project is structured and organized.\n\n## License\nAlthough you don't have to, if you reuse this template for your projects I would appreciate it if you would credit me and provide a link to my GitHub profile in the footer of your project. Thanks!\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevianllert%2Fnextplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevianllert%2Fnextplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevianllert%2Fnextplate/lists"}