yrfang / nextjs-starter

Next.js + Redux + Redux-Saga + Immutable + SCSS + Express = 😎

nextjs-starter

A customized Next.js starter kit with Express, Redux, Redux-Saga and SCSS.

About

Next.js is a lightweight framework for static and server‑rendered applications. However, it takes a little time to set up the environment for some features we want. As a result, the boilerplate is here for quick build the project in the beginning.

Features

• Server build with Express
• State management with redux and next-redux-wrapper
• Async flow managment library with redux-saga and next-redux-saga
• Persistent data collections for Javascript with Immutalbe
• Send request to the server with Axios
• Stylying with SCSS with CSS pre-processor
• Styling with PostCss with CSS post-processor
• Setting up a custom alias for directories with babel-plugin-module-resolver

Getting started

git clone https://github.com/yrfang/nextjs-starter
cd nextjs-starter
yarn install
yarn start

Then open http://localhost:3200 to view your app.

Structure overview

├── README.md
├── next.config.js
├── postcss.config.js
├── nodemon.json
├── package.json
├── babelrc
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── about.js
│   └── index.js
├── server
│   └── index.js
│   └── routes.js
├── src
│   ├── actions
│   ├── api
│   ├── components
│   │   └── Layout
│   ├── constants
│   │   └── initialState.js
│   │   └── types.js
│   ├── reducers
│   ├── sagas
│   ├── stores
│   │   └── createStore.js
│   ├── styles
└── yarn.lock

To Do

• raw-loader for CSS set up
• unit test environment
• lint environmnet and its rules
• dynamic routing for server
• storybook

Reference

Next.js