Seyma44/next-ts-storybook-boilerplate

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

Next.js boilerplate with TypeScript and Storybook integration

What’s Inside?

• Next.js 11
• Storybook 6 integrated with Next.js
• SCSS globally available variables and mixins
• SCSS variable imports from JSON files
• ESLint with predefined rules
• Stylelint with SCSS and Prettier integration
• Prettier (does not conflict with eslint and stylelint rules)
• Husky and lint-staged pre-commit hooks
• Templateman for fast components creation
• Prepared GitHub Actions and Gitlab CI/CD configurations
• Prepared example components and directory structure

Environment

• Node v14.x.x+
• Npm v6.x.x+

Installing dependencies

To initialize project you should install dependencies from package-lock.json file via:

npm ci

Launch development version

To start Next development server:

npm run app:dev

Then open http://localhost:3000.

Launch Storybook development version

To start Storybook development server:

npm run storybook:dev

Then open http://localhost:3001.

Launch both

To start Next.js and Storybook in parallel:

npm run dev

Linters

You can inspect all you code in parallel running:

npm run linters:inspect

If it's possible you can inspect and autofix issues by linters running:

npm run linters:fix