Next Ts Storybook Boilerplate

Overview:

This product is a Next.js boilerplate that comes with TypeScript and Storybook integration. It provides a set of features and configurations to help developers quickly set up their Next.js projects with a solid foundation.

Features:

• Next.js 11: The boilerplate utilizes the latest version of Next.js, bringing new features and improvements to the development experience.
• Storybook 6 integrated with Next.js: Storybook is seamlessly integrated into the Next.js project, allowing for easy component development and testing.
• SCSS globally available variables and mixins: The boilerplate provides SCSS variables and mixins that can be accessed globally throughout the application.
• SCSS variable imports from JSON files: It allows importing SCSS variables from JSON files, making it easier to manage and share variable values.
• ESLint with predefined rules: ESLint is set up with predefined rules to ensure code consistency and catch common errors.
• Stylelint with SCSS and Prettier integration: Stylelint is configured to lint SCSS files and has integration with Prettier to enforce consistent code formatting.
• Prettier: The boilerplate includes Prettier for code formatting. It is configured to not conflict with ESLint and Stylelint rules.
• Husky and lint-staged pre-commit hooks: Husky and lint-staged are used to run linters and formatting tools automatically before committing code.
• Templateman for fast components creation: Templateman is included to provide a convenient way to generate components quickly.
• Prepared GitHub Actions and Gitlab CI/CD configurations: The boilerplate comes with pre-configured workflows for GitHub Actions and Gitlab CI/CD, making it easier to set up continuous integration and deployment.
• Prepared example components and directory structure: It provides a set of example components and a well-organized directory structure to give developers a starting point for their projects.

Installation:

To initialize the project and install the required dependencies, follow these steps:

1. Run the following command to install the dependencies from the package-lock.json file:

   npm install
   

Summary:

This Next.js boilerplate with TypeScript and Storybook integration provides developers with a solid foundation for starting their Next.js projects. It includes various features such as SCSS variables, linting with ESLint and Stylelint, pre-commit hooks, and pre-configured CI/CD workflows. With the provided example components and directory structure, developers can rapidly build their applications using best practices.