Tired of next.js toy examples that cannot be used in real, complex, business projects? This is for you.
There's also an advanced real world Nextjs app, which is a fairly more complex version of this app. If you are looking for a starter kit that is not just the barebones for a real world app, then I highly recommend you to check it out.
- A custom server with compression. After build, app scores on lighthouse:
- Performance: 99
- Accesibility: 100
- Best Practices: 93
- SEO: 90
- Cookie based authentication and authorization system with roles. Kept simple:
- You can login using user:
admin
password:password
- Local, hardcoded auth on
server/router/index.js
, not production ready, obviously. You get the flexibility to connect it to a database, SDK, 2FA, or any authentication method you want. As simple as that
- You can login using user:
- Redux with react-redux and redux-tunk architecture
- A redux store with cleanup mechanism (All reducers reset to initial state after logout)
- Redux devtools are only enabled in dev mode
- Material-ui support with SSR (JSS)
- Styled components with SSR (yes, both css-in-js libraries together with SSR)
- React hooks including custom hooks demo (hooks/useForm)
- Airbnb based javascript and react styleguides enforced with VSCode integration (See Pre-requisites to ke it work)
- Prettier integration (See Pre-requisites to make it work)
- Husky/lint-staged configuration:
- pre-commit hook configured so it lints and runs prettier (both fixing what
they can automatically). If it passes, you can commit, if it doesn't, you
can't (you can by
git commit -n
if needed) (See pre-requisites for instructions)
- pre-commit hook configured so it lints and runs prettier (both fixing what
they can automatically). If it passes, you can commit, if it doesn't, you
can't (you can by
- A really, really simple component on top of the starter kit to teach you how to integrate your own components with the redux store. (Yet another counter)
- Clone this repository
npm install
npm run dev
npm run build
npm run start
{
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"prettier.eslintIntegration": true
}
For Husky to run properly, a git repository must exists before running dependencies installation, as git hooks are configured during this process (no matter if you use npm or yarn). If it's not the case, just reinstall Husky for it to set its git hooks.