Ultimate template for Next.js with a pack of incredible tools

This 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.

• 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.

• Next – A complete React framework for hybrid and server rendering

• next-i18next – The easiest way to translate your NextJs apps

• effector – A lightweight and performant state manager that is UI frameworks agnostic, predictable and easy to use

• farfetched – The advanced data fetching tool for web applications
• axios – Promise based HTTP client for the browser and Node.js
• orval – Generate, valid, cache and mock in your frontend applications all with your OpenAPI specification.
• msw – Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.

• Storybook – A frontend workshop for building UI components and pages in isolation.
• Radix – An open-source UI component library for building high-quality, accessible design systems and web apps.
• emotion – a library designed for writing css styles with JavaScript
• framer-motion – A production-ready motion library for React

• Zod – TypeScript-first schema declaration and validation library

• Jest – A delightful JavaScript Testing Framework with a focus on simplicity
• Testing Library – Simple and complete testing utilities that encourage good testing practices

• ESLint – Find and fix problems in your JavaScript code
• Prettier – An opinionated code formatter, supporting multiple languages and code editors
• Husky – Modern native Git hooks made easy
• lint-staged – Run linters against staged git files and don't let 💩 slip into your code base
• commitlint – Helps your team adhering to a commit convention
• Standard Version – A utility for versioning using semver and CHANGELOG generation powered by Conventional Commits

• Sentry - A crash reporting platform that provides you with "real-time insight into production deployments with info to reproduce and fix crashes"

• why-did-you-render – Notify you about potentially avoidable re-renders
• @next/bundle-analyzer - Visualize size of webpack output files with an interactive zoomable treemap.

• next-sitemap – Sitemap generator for Next.js
• pathpida – TypeScript friendly internal link client for Next.js and Nuxt.js.

1. Click on "Use this template" button

2. Configure your new repository and click on "Create repository from template" button

3. Now you can clone the generated repository to your local machine:

   git clone https://github.com/<YOUR-GITHUB-LOGIN>/<NAME-OF-YOUR-GENERATED-REPOSITORY>.git

4. install dependencies:

   yarn install

Run the local development server:

yarn start:dev

You can generate a build to test and/or deploy to your production environment.

yarn build

And then run the build:

yarn start:prod

You can run tests with this commands:

yarn test

Run in watch mode:

yarn test:watch

Run to see the coverage:

yarn test:coverage

You can run linting with this commands:

yarn lint

Run to automatically fix problems:

yarn lint:fix

Run to check type errors:

yarn typecheck

You can run storybook with this commands:

yarn sb # alias to yarn storybook

Run to analyse production bundle:

yarn analyse:bundle

Run to check for circular dependencies:

yarn analyse:circular

Run to check for unused dependencies:

yarn analyse:deps

Code 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.

When 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.

See Feature-Sliced Design overview to understand how project is structured and organized.

Although 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!

This project is licensed under the MIT License - see the LICENSE.md file for details