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

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.

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`

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!

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

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

@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

optional chaining and nullish coalescing operators!

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?

Add badge of License.

Please use the following link:

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

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

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

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

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.

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 pakage react-hook-form
• Add example use case with react-hook-form

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 :)

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

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

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.