Next.js boilerplate for big and scalable projects

The cure for headaches in development projects on Next.js in Chillicode Production Agency.

What’s Inside?

• Next.js 10 as a framework
• Storybook for developing UI components in isolation (configuration does not conflict with Next.js)
• MobX and MobX State Tree for application state management
• SCSS with CSS Modules
• ESLint with import and jsx-a11y plugins
• Stylelint with SCSS and Prettier integration
• Prettier (does not conflict with eslint and stylelint rules)
• Templateman for fast components creation
• Production assets optimization: CSSO and SVGO
• Webpack react-svg-loader
• Prepared basic Gitlab CI/CD configuration
• Prepared example components and files structure

Getting Started

Environment

Prerequisites:

• Node.js v12.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