Next.js Template
Want a template application with all 100's on Lighthouse? Look no further, this is a simple template application with the following stack:
- Next.js
- Emotion
- TypeScript
- twin.macro
- TailwindCSS
- DaisyUI
- React
- Cypress
- Storybook - Deployed storybook example
- Chromatic - Deployed library example
- GitHub
- Kodiak
- Dependabot
- Yarn
- ESLint
- Prettier
- Husky
Installation
You must have yarn
and node>=12.22.7
installed first. To install the dependencies run:
yarn install
To start the application in development mode run:
yarn dev
To run a static version of the site locally run:
yarn static
Testing
Run unit tests:
yarn test
Run e2e tests:
yarn cypress run
Scripts provided
install
install dependenciesdev
run in dev mode with hot-module replacement @ http://localhost:3000/build
build next.js applicationexport
export next.js static application to./out
static
build/export/serve a static next.js application @ http://localhost:3000/validate
run tests/linter/type-checks/format-checks and build the application (the build checks for transpiler errors)test
run jest testscypress
run cypresslint
run linter with--fix
lint:test
run linterformat
format code w/ prettierformat:test
check for code formatting w/ prettier (won't modify code)storybook
runs storybook @ http://localhost:6006storybook:build
builds storybook output for static deployment (necessary for Chromatic)
Husky Hooks
pre-commit
lints the staged files and formats them automaticallypre-push
runs the validate script
Setup
Chromatic & Github
To enable Chromatic, set the CHROMATIC_PROJECT_TOKEN
secret: