More Premium Hugo Themes Premium Nextjs Themes

Next Ts Storybook Boilerplate

The cure for headaches in development projects on Next.js with TypeScript and Storybook

Next Ts Storybook Boilerplate

The cure for headaches in development projects on Next.js with TypeScript and Storybook

Author Avatar Theme by adlite
Github Stars Github Stars: 11
Last Commit Last Commit: Sep 28, 2021 -
First Commit Created: Apr 29, 2023 -
Next Ts Storybook Boilerplate screenshot

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.