syuji-higa/template-nextjs-2020-december

Next.js Template

Use

• Framework: Next.js (React)
• Static typing: TypeScript
• PWA: next-pwa
• Styling: CSS Modules + SASS
• State management: Recoil
• Lint & Formatter: EditorConfig + ESLint + Prettier
• Test: Jest + React Testing Library + Cypress
• Component catalog: Stroybook (StoryShots を含む)
• Hook script: lint-staged + husky

Command

# dev
yarn dev

# build
yarn build

# start
yarn start

Storybook

yarn storybook

# build
yarn build-storybook

Lint

yarn lint

# auto fix
yarn lint --fix

# lint for git stage
yarn lint-staged

Test

yarn test

# watch
yarn test --watch

# update snapshot
yarn test -u -t="{TargetName}"

# update snapshot all
yarn test -u

# coverage
yarn test --coverage

Story Snapshot

yarn storyshots

# image snapshot (run while storybook running)
yarn puppeteer-storyshots

# update image snapshot (run while storybook running)
yarn puppeteer-storyshots -u -t="{TargetName}"

# update image snapshot all (run while storybook running)
yarn puppeteer-storyshots -u