Deku NextJS Boilerplate

This project uses the followings:

• React framework: NextJS
• React UI library: MUI, Emotion
• Component driven development: Storybook
• Calling API: Axios, React Query
• State management: Recoil

Contents

• Development
  • Node Version Manager
  • Lefthook
  • Linters
    • ESLint
    • Stylelint
    • remark-lint
    • Prettier
    • CSpell
    • Test
  • Storybook

Development

Node Version Manager

This project is based on NodeJS, so you need the NodeJS environment. The nvm is a Node Version Manager. you can manage the NodeJS environment with nvm.

First, install nvm on your system.

• macOS: brew install nvm
• windows: https://github.com/coreybutler/nvm-windows

And, execute the following command to install NodeJS.

nvm install

The version written in the .nvmrc file of NodeJS will be installed.

env file

You can copy the .env.development to .env.local for local development.

cp .env.development .env.local

Lefthook

There are some linters to check the code style. And they will be executed when the pull request is created.

So, if you want to pass CI/CD faster, it's better to use Lefthook to execute the linters on the local machine.

Execute the following command to configure Lefthook.

lefthook install

After it, the linters will be executed every time you commit on the local.

Linters

We use many linters to check the code style and make the clean code. If you want to check them on your machine, try to the following instructions.

ESLint

You can execute the ESLint by the following command to check JavaScript or TypeScript.

npm run lint

Stylelint

You can execute the Stylelint by the following command to check CSS or CSS-in-JS.

npm run lint:css

remark-lint

You can execute the remark-lint by the following command to check Markdown.

npm run lint:md

Prettier

You can execute Prettier to check and format the code by executing the following command.

npm run format
npm run format:fix

CSpell

You can execute the CSpell by the following command to check Typo.

npm run check:spell

Test

You can run the test code by the following command.

npm test

Storybook

This project uses Storybook for the component-driven development.

You can see Storybook by the following command.

npm run storybook

And, open http://localhost:6006/ in your browser.

Sample component

There is a sample component for the project.

• Sample Button: components/SampleButton.

The component has three files.

• index.tsx: this file is the implementation of the component.
• index.test.tsx: this file is the test file for the component.
• index.stories.tsx: this file is the storybook file for the component.

And, there is the __snapshots__ folder that is the result of the Jest snapshot test. So, you don't need to modify it manually.