Next.js App

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:

Tech-Stack

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

Project Setup

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

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

Set up Vercel

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

App

1.Follow the default setup for Next.js.

Storybook

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

Set up formatter

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"
	}
}

Getting started

Run the development server:

npm run dev

Run storybook:

npm run storybook

Test Driven Development

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

Commands

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