AdamManuel-dev/next-emotion

Template repo with Next.js, Emotion styling, Storybook, and TypeScript

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
• 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.16.1 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 dependencies
• dev run in dev mode with hot-module replacement @ http://localhost:3000/
• build build next.js application
• export 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 tests
• cypress run cypress
• lint run linter with --fix
• lint:test run linter
• format format code w/ prettier
• format:test check for code formatting w/ prettier (won't modify code)
• storybook runs storybook @ http://localhost:6006
• storybook:build builds storybook output for static deployment (necessary for Chromatic)

Husky Hooks

• pre-commit lints the staged files and formats them automatically
• pre-push runs the validate script

Setup

Chromatic & Github

To enable Chromatic, set the CHROMATIC_PROJECT_TOKEN secret:

Screenshots

Chromatic - Storybook

Chromatic - Library