Bootstrap a developer-friendly (?) NextJS app configured with:
- Typescript
- Linting with ESLint
- Formatting with Prettier
- Linting, typechecking and formatting on by default using Husky for commit hooks
- Testing with Jest and React Testing Library
- Tailwind CSS
- Chakra, a React component library
- Emotion
- Twin.macro - Enable using babel macro with Tailwind, so PurgeCSS is not needed.
- ts-jest
- Cypress and Cypress Testing Library
- Storybook
This template is built from examples/with-tailwindcss-emotion & examples/with-typescript-eslint-jest then added some more sensible packages.
This boilerplate is carefully built to make TDD workflow in frontend development possible, as you can see a bunch of testing libraries included.
Before adding features (components, pages, etc.) you add tests in at least one level:
- Unit Tests : Jest
- Integration / e2e Tests : Cypress
- UI Tests : Storybook
You can add pending tests if the feature is difficult or cannot figure out yet how to test (eg. authentication with Firebase, which is hard to mock)
But make sure that you cleanup pending tests quickly before it goes out of control and leaves you with low test coverage.
[rant] You (and your team) will be thankful for the tests later when you decide to refactor or add/switch dependencies, like updating dependencies, switching to Preact, adopting Recoil, trying out the next Next.js, and so on. Well tested codebase will save you from Javascript Fatigue no matter how large or small your project is. [/rant]
Husky will lint & format the code before commit & push, so the code will be cleaner & easier for review (But please don't add any type everywhere)
Github Actions will run all the tests. See configuration
Deploy the example using Vercel:
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example https://github.com/narze/thank-u-nextjs my-app
# or
yarn create next-app --example https://github.com/narze/thank-u-nextjs my-appDeploy it to the cloud with Vercel (Documentation).