A NextJs boilerplate with redux-saga and redux-persist.

A ready-to-use utility boilerplate to get your project started right away with just one single command. It sets up redux-saga and redux-persist with NextJs and makes it production ready. If you are a NextJs lover and need Redux for your next project this is definately the right boilerplate to start with.

Features :

• NextJs v11
• React v17
• React-Redux v7
• Redux-Saga v1
• Redux-Persist v6
• Basic folder structure Ready-to-go.
• An example Countries API fetched.

Let's get started!

• Choose a folder to create your project and create using following methods:

npx

npx create-next-saga-persist-app your-app-name

npm

npm init next-saga-persist-app your-app-name

npm create next-saga-persist-app your-app-name

It will create a directory called your-app-name inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

your-app-name
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── next.config.js
├── .gitignore
├── .env.example
├── .eslintrc
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── pages
│   ├── _app.js
│   └── index.js
├── redux
│   ├── actions
│   |   └── countriesAction.js
│   ├── reducers
|   |   ├── countries.js
│   |   └── index.js
│   ├── sagas
|   |   ├── countriesSaga.js
│   |   └── index.js
│   └── store.js
└── styles
    ├── globals.css
    └── Home.module.css

Once the installation is done, you can open your project folder:

cd your-app-name

• Start a development server on http://localhost:3000:

npm run dev

• Build for production:

npm run build

• Start a server in production mode(after build) on http://localhost:3000:

npm start

• Linting:

npm run lint

Environment Setup

Create a local .env.local or .env file with configurations stated in .env.example for local environment setup. Read more on Environment setup in NextJs here.

Note

index.js opts out of static optimization by default. please use getStaticProps to use static optimization feature of nextJs.

References :

• NextJs
• Redux Saga
• Redux Persist
• ReactJs

Requirements :

Recommended updated versions of

• NodeJs
• NPM package manager

FAQ

What is a boilerplate ?

A boilerplate is a project with generic, maintainable and reusable code, files or content that is intended to be used as a starting point for creating new projects blazing fast without wasting time in setting up the basics each time.

Why Redux-Saga ?

Redux Saga is a middleware library that allows a Redux store to interact with resources outside of itself in an asynchronous way, including making of HTTP requests to external services, accessing the browser storage, or executing any I/O operations. These operations are known as side effects. Redux-Saga helps us to organize and manage these side effects in easier way.

This package uses restcountries api for fetching an example data.

Contributing

Pull requests and stars shall always be welcomed. For bugs and feature requests, please create an issue.

Author

Rishav Raj Kumar

License

Copyright © 2021, Rishav Raj Kumar. Released under the MIT license.