Next.jsReactStarter

ts-redux-next — Next.js Starter Template

By morewings

A TypeScript template based on the Next.js App Router, integrating Redux state management, a Promise middleware example, component and feature generation scripts, and Jest test configuration.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-13View source

What stands out

A quick read of the recorded project description.

01

Written in TypeScript, based on Next.js with App Router configured

02

Integrates Redux with DevTools support, includes a Promise resolver middleware example

03

Includes Jest and react-testing-library tests for React components, reducers, and hooks

04

Provides CLI to generate components, dynamically loaded components, feature modules, and pages

05

Uses pnpm for dependency management, configures Husky, ESLint, and stylelint

06

Supports both CSS Modules and Styled Components styling approaches

Template Details

This template targets web application development using the Next.js App Router and Redux. The README states that it includes tests for React components, reducers, and hooks, and provides a basic Promise resolver Redux middleware example. The template is written in TypeScript, manages dependencies with pnpm, configures Husky, ESLint, and stylelint, and supports both CSS Modules and Styled Components styling approaches.

The template offers CLI generation capabilities to create components, dynamically loaded components, feature modules (including reducers, hooks, and selectors), and App Router-compatible pages. Installation supports manual cloning or using degit, and you can switch to the Styled Components configuration by specifying a branch. The README does not provide information on performance, production readiness, or specific framework version numbers.

Next.jsStarter

Is it right for your project?

Use Cases

  • Starting a new project that requires Redux state management with the Next.js App Router
  • Quickly generating components, feature modules, and page structures using the CLI
  • Setting up initial test configuration for React components, reducers, and hooks
  • Projects that need to choose between CSS Modules and Styled Components for styling

Suitable For

  • TypeScript project developers using the Next.js App Router and Redux
  • Teams looking to quickly initialize project structure via a template
  • Developers who need component and feature module generation scripts and test configuration

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Requires Node >= 20.x and pnpm.

  2. 2

    Clone the default CSS Modules configuration via npx degit github:morewings/ts-redux-next my-app, or use the #styled-components branch for the Styled Components configuration.

  3. 3

    After entering the project directory, run pnpm i to install dependencies.

  4. 4

    Use commands such as pnpm run generate:component, generate:component-loading, generate:feature, generate:page to generate the corresponding files.

  5. 5

    The README does not provide specific deployment steps.

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
  • Requires Node.js 20.x or higher before use.
  • Requires the pnpm package manager, for example activated via corepack.
  • Uses the CSS Modules configuration by default, cloned from the main branch via degit.
  • For the Styled Components configuration, clone using the styled-components branch instead.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

1. Install **Node** >= 20.x.

Original README

2. Install **pnpm**. E.g. `corepack prepare pnpm@latest --activate`.

Original README

npx degit github:morewings/ts-redux-next my-app

Original README

npx degit github:morewings/ts-redux-next#styled-components my-app

Original README
https://github.com/morewings/ts-redux-next/blob/master/LICENSEhttps://github.com/morewings/ts-redux-next/blob/master/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 83 / 100
Technologies
Next.js · React
Website type
Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-10-13
Screenshot last checked
2026-10-13

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: codex-user-requested-batch-review-20261015 · 2026-10-15

Inspect the recorded source material

SHA-256: 50b5f4aa6a8a0ff04ff705ed3346a18dc025c29f6c4a016fd9f26b7ca7fd5955

2026-10-13T23:11:08.016Z

Source file / repository
[![Deploy to GitHub Pages](https://github.com/morewings/ts-redux-next/actions/workflows/pages.yml/badge.svg)](https://github.com/morewings/ts-redux-next/actions/workflows/pages.yml)
[![Post-merge tasks](https://github.com/morewings/ts-redux-next/actions/workflows/merge-jobs.yml/badge.svg)](https://github.com/morewings/ts-redux-next/actions/workflows/merge-jobs.yml)
[![Vercel](https://vercelbadge.vercel.app/api/morewings/ts-redux-next)](https://vercel.com/dima-vyshniakovs-projects/ts-redux-next)

# Redux enabled Next template

[![TS Redux Next](./design/cover.jpg)](#)

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](https://morewings.github.io/ts-redux-next/)

Full-featured deployment: [Vercel](https://ts-redux-next.vercel.app/)

## 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`.

```shell script
# 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](https://www.npmjs.com/package/generate-react-cli). Templates are located at `./templates` folder.

```shell script
pnpm run generate:component Foo
```

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

```shell script
pnpm run generate:component-loading Foo
```

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

```shell script
pnpm run generate:feature Foo
```

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

```shell script
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](https://github.com/morewings/ts-redux-next/pull/40) and [styled-components](https://github.com/morewings/ts-redux-next/tree/styled-components) branch.

## Previous implementations

[cra-template-quickstart-redux](https://github.com/morewings/cra-template-quickstart-redux)

[react-template](https://github.com/morewings/react-template)

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.