Next.js Redux Starter

Next.js Redux Starter is a boilerplate template for building universal React applications on top of Next.js, combining Redux Toolkit, styled-components, Express, and react-testing-library.

What is Next.js Redux Starter?

Next.js Redux Starter is an opinionated starter kit that scaffolds a Next.js project with a custom Express server, Redux Toolkit for state management, styled-components for styling, and react-testing-library for unit tests. It takes no input: you clone the repository, install dependencies, and run the development server to get a working application with index and about pages. The project is maintained by CodementorIO and published on GitHub.

Key Features

• Next.js — Based on the Next.js framework, providing server-side rendering and universal React support.
• Redux Toolkit — State management configured with Redux Toolkit, including a store setup in src/store.js.
• styled-components — Styling via styled-components with a theme defined in src/theme.js.
• react-testing-library — Unit testing setup with react-testing-library, including test utilities in src/tests/test-utils.js.
• Express server — A custom Express server in server/index.js for handling SSR and middleware.
• Linting — Pre-commit linting of staged files using StandardJS, enforced by pre-commit and standard.
• React Helmet — Head management for the document using react-helmet.
• dotenv — Environment variable loading through dotenv.

The structure includes pages/index.js and pages/about.js as sample routes, plus custom _app.js and _document.js for application and document overrides. Additional folders like src/components, src/features, and src/libs give a clear place for components, Redux slices, and utility functions.

Who is it for?

Developers starting a new universal React app who want a pre-configured Redux and styled-components stack are the primary audience. Teams that value testing and code consistency will benefit from the included react-testing-library setup and StandardJS linting. Developers needing a custom Express server alongside Next.js for SSR or API routes can use this as a foundation.

What can you do with it?

• New project scaffolds: Clone the repository and run yarn install to get a working Next.js app with Redux, styled-components, and testing configured.
• Universal app development: Build server-rendered React pages with state management, using the provided pages and components as a starting point.
• Deployment: Run npm run build and then yarn serve to serve the production build, or modify now.json to deploy with ZEIT Now.
• Feature organization: Add new Redux slices under src/features, components under src/components, and utilities under src/libs following the preset structure.

How does it work?

To start, clone the repository, run yarn install, then yarn start to launch the development server on http://localhost:3100. For production, execute npm run build followed by yarn serve. The Express server in server/index.js handles both development and production serving, and the Next.js pages render through the custom server.

Pros and cons

• Pros: The starter is clearly organized with a dedicated folder structure, includes testing utilities out of the box, and enforces code quality with StandardJS linting on commit.
• Cons: The opinionated choices of Redux Toolkit and styled-components may not fit every project, and the custom Express server adds complexity compared to Next.js's built-in server.

Pricing

Free — the starter kit is open source on GitHub and can be cloned and used without cost.

Alternatives

• create-next-app — the official Next.js scaffolding tool, which provides a minimal setup without Redux or styled-components.

FAQ

Is Next.js Redux Starter free?

Yes, it is an open-source starter kit published on GitHub, so you can clone it and use it in your projects without any licensing costs.

What does Next.js Redux Starter include?

The starter includes Next.js, Redux Toolkit, styled-components, an Express custom server, react-testing-library, react-helmet, dotenv, and a pre-commit linting setup with StandardJS.

How do I run it?

Clone the repository, run yarn install, then yarn start. Open http://localhost:3100 in your browser to see the app.

How do I deploy it?

Run npm run build to create a production build, then use yarn serve to serve it locally with the Express server. Alternatively, modify now.json and deploy with ZEIT Now.

What pages are included?

The starter includes an index page and an about page, along with custom _app.js and _document.js files for application-level and document-level configuration.