Next Js Boiler

Overview

The Next.js boilerplate for big and scalable projects offered by Chillicode Production Agency aims to alleviate development headaches by providing a comprehensive set of tools and functionalities. It includes Next.js 10 as the framework, Storybook for developing UI components in isolation, MobX and MobX State Tree for application state management, SCSS with CSS Modules for styling, and various linters and code formatters for maintaining code quality. The boilerplate also includes pre-configured Gitlab CI/CD configuration, example components, and a structured file organization.

Features

• Next.js 10 as the framework
• Storybook for developing UI components in isolation without conflicts with Next.js configuration
• MobX and MobX State Tree for efficient application state management
• SCSS with CSS Modules for modular and maintainable styling
• ESLint with import and jsx-a11y plugins for code linting
• Stylelint with SCSS and Prettier integration for consistent code formatting
• Prettier for code formatting without conflicts with ESLint and Stylelint rules
• Templateman for fast and easy creation of components
• Production assets optimization using CSSO and SVGO
• Webpack react-svg-loader for loading and optimizing SVG assets
• Pre-prepared basic Gitlab CI/CD configuration
• Example components and files structure for getting started quickly

Installation

To get started with the Next.js boilerplate, make sure you have the following prerequisites:

• Node.js v12.x.x or higher
• Npm v6.x.x or higher

To initialize the project, install the dependencies from the package-lock.json file by running the following command in your project directory:

npm install

To launch the development version, start the Next development server by running:

npm run dev

Then open http://localhost:3000.

To launch the Storybook development version, start the Storybook development server by running:

npm run storybook

Then open http://localhost:3001.

To launch both Next.js and Storybook in parallel, run the following command:

npm run dev:storybook

For code inspection, you can run all the linters in parallel using the following command:

npm run lint

If any issues are found, you can try to automatically fix them by running:

npm run lint:fix

Summary

The Next.js boilerplate offered by Chillicode Production Agency provides a powerful and efficient starting point for big and scalable projects. With its comprehensive set of tools, including Next.js, Storybook, MobX, SCSS, and various linters, developers can quickly set up their project and ensure code quality and maintainability from the start. The boilerplate also comes with pre-configured CI/CD setup and example components, further facilitating the development process.