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.
- NextJs
v11 - React
v17 - React-Redux
v7 - Redux-Saga
v1 - Redux-Persist
v6 - Basic folder structure Ready-to-go.
- An example Countries API fetched.
- Choose a folder to create your project and create using following methods:
npx create-next-saga-persist-app your-app-name
npm init next-saga-persist-app your-app-name
OR
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
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.
index.js opts out of static optimization by default. please use getStaticProps to use static optimization feature of nextJs.
Recommended updated versions of
- NodeJs
- NPM package manager
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.
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.
Pull requests and stars shall always be welcomed. For bugs and feature requests, please create an issue.
Copyright © 2021, Rishav Raj Kumar. Released under the MIT license.