Next.js starter project with typescript, hooks, eslint, prettier, immer, emotion, jest, cypress and storybook

• Recommended defaults for typing and linting
• Store without a library by using react hooks and context api
• Immer integration for easy updates of immutable data
• CSS-in-JS with native CSS syntax powered by Emotion
• Unit tests with Jest and TypeScript
• Integration tests with Cypress and TypeScript
• Nice UI's for both test frameworks with real-time watchers via native Cypress and Majestic
• Storybook with Typescript, React and Hook support
• Git hooks to prevent committing and pushing bad code

• Clone this repository and cd into it
• yarn install
• yarn run dev

Runs development server on http://localhost:3000. Page is hot reloading on code changes.

Build application for production use.

Start built application. You need to run build first.

Run all tests.

Run all unit tests with jest.

Run all unit tests with jest and generate coverage reports. This will fail if constraints coverageThreshold in jest.config.js are violated.

Run all unit tests with jest and update all outdated snapshots.

Run majestic server to control jest via its UI.

Run all integration tests with headless cypress.

Run all integration tests with cypress UI.

Run all linters and autofix issues on staged files.

Perform type analysis on all source files.

Run Storybook server.

Build Storybook documentation for production use.

This starter pack has solutions for Rendering, Styling, Routing, Server-Side-Rendering, Type checking, Linting, Testing, Documentation and Building

A great starting point that provides awesome features out-of-the-box. Hightlights are server-side-rendering, seo-readiness, code splitting, routing and prefetching support.

The addition of types to JavaScript allows code-completion and better static code analysis.

Rendering library that makes component-based development easy and fun. Functional components in combination with hooks and context API allow flexible adjustments to many application needs.

In this starter project, hooks and context are used to create a simple and versatile store.

Implicitly used by Next.js

Very easy to use immutable state. Used for custom store implementation.

Full fledged CSS-in-JS solution with native CSS syntax.

Testing framework with many built-in features like code coverage or snaptshot testing.

react-testing-library is included to provide a lightweight toolset for testing react components. It's a great alternative to enzyme.

Additionally, Majestic is used as a UI for Jest.

For Browser-based integration tests. Watches source code and automatically executes all tests on every change. With time-travel and real debugging, also records videos for failing tests.

cypress-testing-library is another lightweight toolset to query dom elements.

Visualize isolated components for development and testing. Also for creating style guides. Addons provide additional benefits like switching between mobile viewports or automatic a11y profiling.

Parse source code and find unwanted patterns. Great way to establish best practices and a common code style.

Complements ESLint to support a consistent and aesthetic code style. Most formatting issues can be automatically fixed.

Handy git hooks to prevent bad git commit or git push.

Foundation of every modern JavaScript application stack. Compiles next-generation code into natively supported code.

Implicitly used by Next.js