Redux enabled Next template

This template is for Next based web applications using Redux store and App Router configuration. This template has tests for React components, reducers, hooks. There is a basic Promise resolver middleware example.

Static html deployment: Github pages

Full-featured deployment: Vercel

Features

• Written Typescript.
• Powered by Nextjs.
• Configured to use App router.
• Redux with DevTools support.
• Promise resolving Redux middleware example.
• Generate components and features from CLI.
• pnpm for fast package management.
• Husky for git hooks.
• Eslint and stylelint.
• Jest and react-testing-library for testing.
• Supports CSS Modules and Styled components.

Quickstart

Prerequisites

1. Install Node >= 20.x.
2. Install pnpm. E.g. corepack prepare pnpm@latest --activate.

Installation

Manually clone repo or use degit.

# With CSS Modules config
npx degit github:morewings/ts-redux-next my-app
# With Styled Components config
npx degit github:morewings/ts-redux-next#styled-components my-app
cd ./my-app
pnpm i

Generate components and features

Template uses generate-react-cli. Templates are located at ./templates folder.

pnpm run generate:component Foo

Creates all necessary React component files in ./src/components/Foo.

pnpm run generate:component-loading Foo

Creates React component files for component with dynamically loading content in ./src/components/Foo.

pnpm run generate:feature Foo

Creates reducer, React hooks accessing global state and selectors inside in ./src/features/Foo.

pnpm run generate:page Foo

Creates Next App router compatible page in ./app/Foo folder.

Enable Styled components

You can find all changes inside this PR and styled-components branch.

Previous implementations

cra-template-quickstart-redux

react-template