React Next Boilerplate

React Next Boilerplate is a free, MIT-licensed starter repository that preconfigures a Next.js application with Redux state management, Redux-Saga side effects, and Emotion styling so developers can skip repetitive setup.

What is React Next Boilerplate?

React Next Boilerplate is a GitHub-hosted starter template for Next.js, created by Jorge Luis Calleja Alvarado (@wootsbot) and released under the MIT license. It takes an empty Next.js project and produces a preconfigured codebase with internationalization, SEO support, testing utilities, and CSS-in-JS styling. The repository runs on Node.js 10 or later and supports macOS, Windows (including WSL), and Linux. The project is no longer maintained; the README advises migrating to the X-boilerplate repository for ongoing updates.

Key Features

• Redux and Redux-Saga — Predictable state container with redux-saga for managing asynchronous side effects like data fetching, plus redux-saga-routines for creating async action creators.
• i18n with next-i18next — Complete internationalization setup with server-side rendering support, multiple namespaces, and code splitting, backed by the i18next framework.
• Immer — Immutable state updates using the copy-on-write mechanism, so you write mutable logic without mutating the original state.
• Reselect — Simple selector library for Redux that computes derived data efficiently.
• Emotion styling — CSS-in-JS with source maps, labels, and testing utilities, plus self-hosted Typefaces to eliminate blocking font requests.
• Testing with @testing-library/react — React DOM testing utilities that encourage good testing practices.
• SEO optimization — Approach that preserves Search Engine Optimization factors key to Google ranking while building rich user experiences.
• Scripts for dev, build, and start — yarn dev runs Next.js development mode, yarn build creates a production build, and yarn start serves the production server.

Who is it for?

• Next.js developers starting a new project who want a preconfigured stack of Redux, Saga, i18n, and testing without manually wiring dependencies.
• Teams building scalable React applications that need a consistent baseline for state management, internationalization, and styling across multiple developers.
• Developers learning Redux-Saga and i18n patterns who can study the working integrations included in the boilerplate.
• Open-source contributors who want to extend a widely used boilerplate (362 stars) with a documented contributing guide and code of conduct.

What can you do with React Next Boilerplate?

• Set up a production-ready Next.js app quickly: Clone the repository and run yarn to install dependencies and yarn dev to launch a dev server at http://localhost:3000.
• Add multi-language support out of the box: Use the preconfigured next-i18next integration to add translations with SSR and code splitting.
• Manage asynchronous data flows: Use redux-saga routines to create structured async actions for fetching data and handling API responses.
• Style components with Emotion: Write CSS-in-JS styles with predictable composition, source maps, and testing utilities.

How does React Next Boilerplate work?

Start by cloning the repository with git clone --depth=1 https://github.com/react-next-boilerplate/react-next-boilerplate.git <YOUR_PROJECT_NAME>. Then install dependencies with yarn and run yarn dev to start the Next.js development server. The README documents the available commands in a separate commands doc.

FAQ

Is React Next Boilerplate free?

Yes, the project is licensed under the MIT license, allowing free use and modification. The README shows an MIT badge and states the license, with copyright assigned to Jorge Luis Calleja Alvarado.

Is React Next Boilerplate still maintained?

No. The repository prominently displays a warning that it is no longer maintained, and the README recommends migrating to the X-boilerplate repository for the latest updates and support.

What Node.js version do I need?

Node.js 10 or later is required. The supported operating systems are macOS, Windows (including WSL), and Linux.

Does it support server-side rendering?

Yes, the Next.js framework provides SSR, and the included next-i18next plugin supports server-side rendering for translations.

What styling solution does it use?

It uses Emotion for CSS-in-JS, along with Typefaces for self-hosted fonts. The repository also lists styled-components as a topic tag, though Emotion is the primary styling library mentioned in the features.