/jc-next-redux-app

Primary LanguageJavaScript

Next boilerplate

Dependencies Status Dependencies Status Dependencies Status Dependencies Status

πŸš€ Opinionated Next.js+Redux project boilerplate for building super-performant SSR React websites.

Features

  • πŸ”₯ SSR – Next for Static Site Generator.
  • βš›οΈ State Management – Redux for managing and centralizing application state.
  • βŒ›οΈ Async Logic – Thunks for asynchronous logic that interacts with the Redux store
  • πŸ—³ Persisting State – Redux Persist for persist and rehydrate the Redux store
  • οΏ½ Integrated testing – Jest for creating, running, and structuring tests.
  • βš™οΈ Bundle Analyzer – Bundler Analyzer for anaylizing builds.
  • 🎨 Styles/Components lib – Unopinionated! Why? πŸ‘‰ Read this

Table of Contents

Motivation

Redux is one of the de facto library for managing large single-state React applications. Setting up Redux for static apps is rather simple: a single Redux store has to be created and provided to all pages. When Next.js static site generator or server side rendering is involved, however, things start to get complicated.

This is where this boilerplate comes in handy, bringing Next.js and Redux together.

The primary aim of this project is to eliminate all preliminary setup with one simple install so you can focus in developing your application.

Please, note that this template is intended for building medium-large applications with complex state management. If that is not your case, you'll probably be OK with some of the examples provided by the Next.js team.

Installation

  1. Create a repo in your profile via the "Use this template" option.

  2. Install dependencies

yarn

Usage

Project structure

The basic structure of the project is provided in the following way. No configuration needed, just the files you need to build your app.

.
β”œβ”€β”€ README.md                # README file
β”œβ”€β”€ .babelrc                 # Babel configuration
β”œβ”€β”€ .eslintignore            # Eslint ignore config
β”œβ”€β”€ .gitignore               # Git ignore config
β”œβ”€β”€ .prettierignore          # Prettier ignore config
β”œβ”€β”€ .prettierrc              # Prettier configuration
β”œβ”€β”€ jest.config.js           # Jest configuration
β”œβ”€β”€ next.config.js           # Next configuration
β”œβ”€β”€ public                   # Public folder
β”‚   β”œβ”€β”€ manifest.json        
β”‚   └── favicon.ico          
└── src
    β”œβ”€β”€ components           # Components for the app
    β”œβ”€β”€ constants            # Global constants
    β”œβ”€β”€ helpers              # Reused logic across the app
    β”œβ”€β”€ hooks                # State logic for components
    β”œβ”€β”€ HOCs                 # Wrapped logic for components
    β”œβ”€β”€ pages                # Next JS pages
    └── styles               # Global CSS files

Redux Architecture

This architecture for the redux management is inspired in this proposal by Alex Moldovan where he revisits the original ducks modular approach proposal.

Basically, the inital single-duck-file approach might become hard to maintain and read when buidling medium-large scale codebases. To solve this issues, we use duck folders, instead of duck files.

Here's how a duck folder would look like:

duck/
β”œβ”€β”€ actions.js
β”œβ”€β”€ index.js
β”œβ”€β”€ operations.js
β”œβ”€β”€ reducers.js
β”œβ”€β”€ selectors.js
β”œβ”€β”€ tests.js
β”œβ”€β”€ types.js
β”œβ”€β”€ utils.js

NOTE: Each concept/module from your app will have a similar folder.

If you are interested in knowing more about the reasons behind this organization, you may read this article.

Styles

No custom solution for styling has been included in this boilerplate. The reason is simple: there is wide range of options (SASS, Tailwinds, JSS, Emotion, etc) for styling React apps nowadays, and it is difficult to choose one that fits in every pocket.

Since everyone has her personal preference, I have decided not to include any option and leave that decision to be taken by the dev.

Commands

  • dev: runs your application on localhost:3000
  • build: creates the production build version
  • start: starts a simple server with the build production code
  • lint: runs the linter in all components and pages
  • test: runs jest to test all components and pages
  • test:watch: runs jest in watch mode

Contributing

No one’s perfect. If you’ve found any errors, want to suggest enhancements, or expand on a topic, please feel free to open an Issue or collaborate by PR.

Code of Conduct

Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

License

@hcorta/next-boilerplate is open source software licensed as MIT.

Made with β™₯ by @hcorta

Twitter Sponsor Next JS Boilerplate