Next JS

This boilerplate is built on top of Next JS. Before reading this section, please take a look at Next docs. https://learnnextjs.com/ is also a good starting point for learning Next JS.

Redux

In pages directory, for connecting a page with redux, use withRedux HOC.

import React from 'react'
import withRedux from 'next-redux-wrapper'

import Store from 'store'

const SomePage = (props) => {
  return (
    <div>Some Page!</div>
  )
}

const mapStateToProps = state => {
  ...
}

const mapDispatchToProps = dispatch => {
  ...
}

export default withRedux(Store, mapStateToProps, mapDispatchToProps)(somePage)

But in containers use react-redux connect function. All the actions and reducers are in the store directory by default. but if you like, you can change it. For creating new state properties, create a directory in the store directory, for example todos. Inside the todos directory create an actions.js for actions and reducer.js for reducers. then in store/reducer.js import the created reducer.

Redux Saga

Suppose you want to create sagas for the todos. Simply create a sagas.js inside store/todos/sagas.js, define your sagas and import it in the root saga in store/sagas.js file. If you want to connect your page to sagas, you can use withReduxSaga HOC.

import React from 'react'
import withRedux from 'next-redux'
import withReduxSaga from 'next-redux-saga'

const SomePage = props => {
  ...
}

const mapStateToProps = state => {
  ...
}

const mapDispatchToProps = dispatch => {
  ...
}

export default withRedux(Store, mapStateToProps, mapDispatchToProps)(withReduxSaga(SomePage))

Dynamic Routes

By default, Next will create a route for every file you create inside the pages directory. For example if you create a page in the pages/some_page.js, Next will create the /some_page route for it. But for creating dynamic routes, you can use next-routes library that is configured in this boilerplate. By default, the routes file is in the root of the project. You can define your dynamic routes there. For linking between pages, import Link component from the routes file instead of next. That means instead of

import Link from 'next/link'

use

import {Link} from 'routes'

Also you can import Router from the routes file.

import {Router} from 'routes'

Fore more information please read the next-routes docs.