A template for Next.js with PWA support and i18n.

Try the Demo: https://pwa-template.vercel.app/
User: Alex
Password: secret

• Libraries
• Personalize this template
• Set up Vercel
  • App
  • Storybook
• Setup Sentry
• Getting started
• Atomic design
• Behavior Driven Development
• Test Driven Development
• Commitlint
• Commands
• Skipping linters

• Storybook
• Cypress
• Sentry
• Jest
• Commitlint
• Eslint
• Prettier

Additional libraries:

• MUI
• i18next (via next-i18next)
• Next Auth
• React Hook Form
• Zustand

Adjust the information in pwa.config.mjs.

Adjust these files:

• LICENSE
• package.json

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

Follow the default setup for Next.js.

Adjust the "Build and Output Settings":

• BUILD COMMAND: yarn run storybook:build
• OUTPUT DIRECTORY: ./storybook-static

Please look at the guide, specially the configuration section.

Everything is already set up. You only need to add the correct environmental variables (See .env.local.example).

To test the integration you can visit the Sentry sample error page.

Run the development server:

yarn run dev

Run storybook:

yarn run storybook

We use atomic design. You can read more about our decision in the documentation.

We use behavior tests. You can read more about our decision in the documentation.

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

We use commitlint to ensure conventional commit messages. You can read more about our decision in the documentation.

Run the development server:

yarn run dev

Build:

yarn run build

Run storybook:

yarn run storybook

Build storybook:

yarn run storybook:build

Run cypress tests:

yarn run cypress # local without server
# yarn cypress:run # headless
# yarn test:cypress # with server

Run unit tests:

yarn run jest
# yarn jest:watch # watch
# yarn test:jest # same as "yarn jest"

Run all tests:

yarn run test

Run eslint

yarn run eslint

Run all linters

yarn run lint

If you need to skip a linter you can add the --no-verify flag.

⚠️ Warning

We strongly advise against skipping linters.

# Skipping pre-commit hooks
git commit README.md -m "this is a dirty commit" --no-verify