react-next-boilerplate / react-next-boilerplate

:rocket: A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.

We spend time using good community practices to make your project scalable.

_{🚀 A basis for reducing the configuration of your projects with Next.js, best development practices and popular libraries in the developer community.}

Features

• redux-saga: A library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.
• redux-saga-routines: A smart action creator for Redux. Useful for any kind of async actions like fetching data. Also fully compatible with Redux Saga and Redux Form.
• next-i18next: A plugin for Next.js projects that allows you to get translations up and running quickly and easily, while fully supporting SSR, multiple namespaces with code splitting, etc.
• i18next: An internationalization-framework written in and for JavaScript. But it's much more than that.
• redux: A predictable state container for JavaScript apps.
• reselect: Simple selector library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.
• Immer: (German for: always) is a tiny package that allows you to work with immutable state in a more convenient way. It is based on the copy-on-write mechanism
• @testing-library/react: Simple and complete React DOM testing utilities that encourage good testing practices.
• SEO: The advantages of this approach is to be able to create Rich User experiences in a uniform way, without compromising Search Engine Optimisation (SEO) factors that are key to good ranking on Google and other search engines.
• Typefaces: Self-hosting is significantly faster. Loading a typeface from Google Fonts or other hosted font service adds an extra (blocking) network request.
• Emotion: A library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities.

Getting Started

Welcome to the light documentation of React Next Boilerplate!

System Requirements

• Node.js 10 or later
• MacOS, Windows (including WSL), and Linux are supported

Setup

Either click this link or manually clone this repo and move to the appropiate directory via:

git clone --depth=1 https://github.com/react-next-boilerplate/react-next-boilerplate.git <YOUR_PROJECT_NAME>`
cd <YOUR_PROJECT_NAME>

Then, install dependencies and run the dev server:

yarn
yarn dev

To see the example app at http://localhost:3000, run:

open http://localhost:3000

These scripts refer to the different stages of developing an application:

• dev - Runs next which starts Next.js in development mode
• build - Runs next build which builds the application for production usage
• start - Runs next start which starts a Next.js production server

Now you're ready to rumble! 🚥

Documentation

• Commands: Getting the most out of this boilerplate

Demo

Code of Conduct

React Next Boilerplate is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the React Next Boilerplate community to abide by our Code of Conduct. Please read it. Please follow it. In the React Next Boilerplate community, we work hard to build each other up and create amazing things together.

Contributing

Thank you for your interest in contributing; we are delighted you want to help out. We have a contributing guide to help you get started.

License

This project is licensed under the MIT license, Copyright (c) 2019 Jorge Luis Calleja Alvarado. For more information see project license.

Authors

• Jorge Luis Calleja Alvarado (@wootsbot) – React Next Boilerplate

react-next-boilerplate's Issues

State returns to initial after page reload

Hey guys!

Thanks for your great Nextjs boilerplate! I have used this on my personal project and I faced an issue which I think you can guide me with.

I added a few pages with different states(actions, reducers, constants, selectors, saga) and connected to the store, I can add to my state but after redirecting to another page (reloading), I'll lose the data and get an empty (initial) state.

Do you have any specific configuration to tell the SSR to persist the data?
Do I have to combine my new reducers in createReducer?

Any ideas appreciated!

Change Image Preview in README

The idea is to put an image that suits the design of nextjs respecting the react-next-boilerplate logo or we can accept suggestions to change the logo in another issue

Consider add lazyLoad by suspend and support fallback by skeleton?

I think this feature is possible and requisite for good user experience and good development process

Switch reselect to immer?

Reselect is a good library but increases code and tests write complexity compared to Immer

In my experience, reselect has some issue with immutability when writing complex reducers.

when run command build i'm facing with `Warning: You have opted-out of Automatic Static Optimization due to getInitialProps in pages/_app`?

By the next's document, this causes all pages to be executed on the server -- disabling Automatic Static Optimization.

Add example

Let's create a better community

Strategy

React Next Boilerplate has launched 4 months ago, but it has been a work of more than a year of development according to the first commitment.

Very happy that the developer community is embracing this project in the best way and have the patience for the releases.

Currently, it is very difficult for me to send continuous improvements due to concentration on carrying out my tasks at work, so I'd like to receive more community PR and issues.

1. Grow organization

Would you like to be part of the organization?

• 💕 You are passionate about the open-source?.
• 🙏 Create 4 improvement issues for the project or bugs.
• 🙏 Launches 4 PR of improvements or bugs that help the project and merge
• 👍 Help the community with its issues

IF this happens, you will be welcome and receive free swag.

2. links to help you

• https://www.reactnextboilerplate.com/
• CONTRIBUTING.md

...more information soon.

Add react-hook-form

• Add pakage react-hook-form
• Add example use case with react-hook-form

Optional Chaining and Nullish Coalescing Operators

optional chaining and nullish coalescing operators!

warn react-i18next:: You will need pass in an i18next instance by using initReactI18nex

Add next-i18next for internationalization

Internationalization needs to be updated and next-i18next is the best that fits the project

Public Directory Support to NextJS

Add licence MIT

We believe that the license that best suits the project is the MIT license, but accepts suggestions.

dispatching from getInitialProps

is it possible to dispatch actions from getInitialProps to prefill redux store before client gets the server side rendered page with this configuration of the redux store?

is there a pattern to do this?

since the redux store in the appContext of the src/pages/_app.js is empty, i tried to add the src/containers/Home/reducer and -/saga in src/utils/configure-store.js

store.injectedReducers = { homeReducer };
store.injectedSagas = { homeSaga };

to have something i can test this with.

injecting reducer and saga works and i can see that the homeReducer and homeSaga are injected in the ctx-object of the src/pages/index.js when rendered server side in console.

IndexPage.getInitialProps = async ctx => {
  console.log(ctx.reduxStore);

gives me:

{
  dispatch: [Function],
  subscribe: [Function: subscribe],
  getState: [Function: getState],
  replaceReducer: [Function: replaceReducer],
  runSaga: [Function],
  injectedReducers: { homeReducer: [Function: showcasesReducer] },
  injectedSagas: { homeSaga: [GeneratorFunction: dataShowcases] },
  [Symbol(observable)]: [Function: observable]
}

but i dont have any luck figuring out how to dispatch an action from there properly. my guess is that the page needs to be connected in some way as well but since your setup is different from the with-redux-saga example from the official nextjs repo, i cant really figure out how to properly do this.

what i basically want to do is: dispatch (for e.g.) the getShowcases() action on the server so that the client gets the fully rendered page including the data fetched in saga.

thanks for reading, awesome project :)

getServerSideProps

What would be the best implementation of redux dispatch in getServerSideProps since pages aren't connected to the store in this boilerplate and the function must be called from a page?

Responsive live demo design.

Cleanup the project (cleanup the example and cleanup config Git)

The clean project with scripts

• remove containers
• remove components
• remove test.

The idea is to create scripts to be able to eliminate the example that the boilerplate and leave the boilerplate clean with just one page as simple as possible.

Is possible to update all dependency to latest version without creating any breaking change?

check spelling and grammar in README.md

SSL

Asking where to put the SSL certs on the application? like on the expressjs. we are just putting it in the main file. Seems i cannot find the server.js on the boilerplate

Check spelling and grammar in CONTRIBUTING.md

Add emotion to CSS-in-JS

Configure the @emotion package as a core of styles in the boilerplate

'MODULE_NOT_FOUND' error, startup problem

Unable to run the boilerplate due to below errors

`> [email protected] dev /Users/username/Documents/GitHub/nextjs-example/react-next-boilerplate

cross-env node ./server/app.js src

internal/modules/cjs/loader.js:548
throw e;
^

Error: Package exports for '/Users/username/Documents/GitHub/nextjs-example/react-next-boilerplate/node_modules/i18next-http-middleware' do not define a valid './cjs' target
at resolveExportsTarget (internal/modules/cjs/loader.js:545:13)
at applyExports (internal/modules/cjs/loader.js:459:14)
at resolveExports (internal/modules/cjs/loader.js:508:12)
at Function.Module._findPath (internal/modules/cjs/loader.js:577:20)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27)
at Function.Module._load (internal/modules/cjs/loader.js:785:27)
at Module.require (internal/modules/cjs/loader.js:956:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (/Users/username/Documents/GitHub/nextjs-example/react-next-boilerplate/node_modules/next-i18next/dist/commonjs/middlewares/next-i18next-middleware.js:28:35)
at Module._compile (internal/modules/cjs/loader.js:1063:30) {
code: 'MODULE_NOT_FOUND'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: cross-env node ./server/app.js src
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/username/.npm/_logs/2020-08-07T20_16_55_321Z-debug.log`

Remove from core @emotion

@emotion It is a great library but I think we should see how to deliver a cleaner boilerplate. We should focus on looking to implement more scaling features at the configuration level.

The user should be able to choose which library what configuration to choose to handle their styles in all components

Add badge of License

Add badge of License.

Please use the following link:

• https://shields.io/category/license
• style for-the-badge

Add another page or container

Hi! I have a problem with the project structure.
I want to create only one container ("Auth") for the next group pages:

• Sign in (as a component)
• Sign up (as a component)
• Forgot password (as a component)
• Set new password (as a component)
• Sign in with social networks (as a component)

In the folder page, will be next pages:

• signin.js
• signup.js
• sign-social.js
• reset-password.js
• restore-password.js

But, saga, selectors, and reducer don`t work for components, only for containers. And I don't want to use containers for all my 'auth' pages
Could you help with a project structure? Or show an example project multi-pages structure on this boilerplate.

State changes to initial state after reload

The global state resets everytime I navigate on different pages or if I reload the page. # #36