Global state capable Next template

Global state Next template (GSN) is designed for Next.js-based web applications utilizing global state and remote data sources. It includes the App Router configuration of Next.js and tests for React components, reducers, and hooks.

Static html deployment: Github pages

Full-featured deployment: Vercel

Features

• Written in Typescript.
• Powered by Nextjs. Configured to use App router.
• Global state support using React.Context with devtools support.
• Remote data sources support with TanStack Query with devtools support.
• 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-global-state-next my-app
# With Styled Components config
npx degit github:morewings/ts-global-state-next#styled-components my-app
cd ./my-app
pnpm i

Generate components and features

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

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-local Foo

Creates React.Context based feature with reducer, Context.Provider, hooks and selectors in ./src/features/Foo.

pnpm run generate:feature-connected Foo

Creates @tanstack/react-query based feature with global storage, queries, hooks and selectors in ./src/features/Foo.

pnpm run generate:page Foo

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

Enable Styled components

Refer to this PR and styled-components branch for all necessary changes.

Previous implementations

cra-template-no-redux

react-template

Acknowledgements

Cover frame image by GDJ.