This is a template for Next.js with additional tools.

• Tech-Stack
• Project Setup
  • Set up Vercel
    • App
    • Storybook
  • Set up formatter
• Getting started
• Test Driven Development
• Commands

It uses the following tools/libraries:

• Next.js
• Storybook
• Jest
• Testing Library
• Stylelint
• Eslint
• Prettier
• Husky
• Zustand

This project uses multiple Vercel deployments to make design/code reviews easier:

• App Production
• App Preview
• Storybook Production
• Storybook Preview

Please follow this guide: https://vercel.com/docs/concepts/git

1.Follow the default setup for Next.js.

1. Adjust the "Build and Output Settings"
   • BUILD COMMAND: npm run storybook:build
   • OUTPUT DIRECTORY: ./storybook-static

Please adjust your formatter for this project. We enabled several eslint rules, therefore we need to use eslint as the default formatter.

Add these lines to your settings.json. We already added some settings in .vscode/settings.json.

{
	"[javascript]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	},
	"[javascriptreact]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	}
}

Run the development server:

npm run dev

Run storybook:

npm run storybook

We use jest to write unit tests. Please look at the Documentation for Jest and testing-library.

Run the development server:

npm run dev

Build:

npm run build

Run storybook:

npm run storybook

Build storybook:

npm run storybook:build

Run all tests:

npm run test

Run stylelint

npm run stylelint

Run eslint

npm run eslint

Run all linters

npm run lint