π Opinionated Next.js+Redux project boilerplate for building super-performant SSR React websites.
- π₯ 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
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.
-
Create a repo in your profile via the "Use this template" option.
-
Install dependencies
yarn
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
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.
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.
dev
: runs your application onlocalhost:3000
build
: creates the production build versionstart
: starts a simple server with the build production codelint
: runs the linter in all components and pagestest
: runs jest to test all components and pagestest:watch
: runs jest in watch mode
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.
Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
@hcorta/next-boilerplate is open source software licensed as MIT.
Made with β₯ by @hcorta