banner logo

React Next Boilerplate

Start your project with the NextJS in seconds

We spend time using good community practices to make your project scalable.

🚀A basis for reducing the configuration of your projects with Next.js, best development practices and popular libraries in the developer community.

Getting Started

  1. Clone the boilerplate if you haven't downloaded it

    $ git clone https://github.com/react-next-boilerplate/react-next-boilerplate.git
  2. Move to the appropriate directory

    $ cd react-next-boilerplate
  3. install dependencies

    $ yarn
  4. To see the example app

    $ yarn dev
  5. Now you can go to localhost:3000 and see your app!

Features

Seo

The advantage of this approach is the ability to create Rich User experiences in a uniform way, without compromising Search Engine Optimisation (SEO) factors, which are key to a good ranking on Google and other search engines.

redux-saga

Is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

next-i18next

Is a plugin for Next.js projects that allows you to get translations up and running quickly and easily, while fully supporting SSR, multiple namespaces with code splitting, etc.

i18next

Is an internationalization-framework written in and for JavaScript. But it's much more than that.

redux

Is a predictable state container for JavaScript apps.

reselect

Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.

testing-library/react

Simple and complete React DOM testing utilities that encourage good testing practices.

Typefaces

Self-hosting is significantly faster. Loading a typeface from Google Fonts or other hosted font service adds an extra (blocking) network request.

Emotion

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities.

Immer

(German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. It is based on the copy-on-write mechanism

Media

React Next Boilerplate - Start your project with the NextJS in seconds. | Product Hunt Embed

Contributing

Thank you for your interest in contributing; we are delighted you want to help out. We have a contributing guide to help you get started.

Started