javascriptnext.jsnext-i18nextnext-redux-wrapper

How to config appWithTranslation(nexti18next + withRedux (next-redux-wrapper) in __app.js


I'm tranfer reactjs project to nextjs with react-redux, redux, nexti18next, next-redux-wrapper here is _app.js and redux.js it run right but if i add withRedux it is error. Please tell me how to resolve this problem or advide me some solution!

import React from "react";
import App, { Container } from "next/app";
import { appWithTranslation } from "../i18n";
import ScrollToTop from "../components/ScrollToTop";
import { createBrowserHistory } from "history";
import { Provider } from "react-redux";
import storeConfig from "../redux";
import compose from "recompose/compose";
const history = createBrowserHistory();
const store = storeConfig();
import withRedux from "next-redux-wrapper";
class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }
  render() {
    const { Component, pageProps } = this.props;
    console.log(store)
    return (
      <Container>
        <ScrollToTop>
          <Provider store={store}>
            <Component {...pageProps} />
          </Provider>
        </ScrollToTop>
      </Container>
    );
  }
}
export default compose(appWithTranslation)(MyApp);



import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk  from 'redux-thunk';
import getQuote, { initGetQuoteState } from './Modules/GetQuote';
import getSlider, { initGetSliderState } from './Modules/GetSlider';
import getUser, {initGetUserState } from './Modules/User';
import {composeWithDevTools } from 'redux-devtools-extension'
const initState = {
    getQuote: initGetQuoteState,
    getSlider: initGetSliderState,
    getUser: initGetUserState
};

const rooteReducer = combineReducers({
    getQuote,
    getSlider,
    getUser
});

const store = () => createStore(rooteReducer, initState, composeWithDevTools(applyMiddleware(thunk)))
export default store;


Solution

  • Here is example of NextJS/Typescript/Redux/Styled-Components/next-i18next app sample.

    // _app.tsx
    import * as React from "react";
    import App, { AppInitialProps, AppContext } from "next/app";
    import withRedux from "next-redux-wrapper";
    import { Provider } from "react-redux";
    import { ThemeProvider } from "styled-components";
    import { theme } from "@Definitions/Styled";
    import { appWithTranslation } from "@Server/i18n";
    import { AppWithStore } from "@Interfaces";
    import { makeStore } from "@Redux";
    import "@Static/css/main.scss";
    
    class ProgressiveWebApp extends App<AppWithStore> {
      static async getInitialProps({
        Component,
        ctx,
      }: AppContext): Promise<AppInitialProps> {
        const pageProps = Component.getInitialProps
          ? await Component.getInitialProps(ctx)
          : {};
    
        return { pageProps };
      }
    
      render() {
        const { Component, pageProps, store } = this.props;
    
        return (
          <Provider store={store}>
            <ThemeProvider theme={theme}>
              <Component {...pageProps} />
            </ThemeProvider>
          </Provider>
        );
      }
    }
    
    export default withRedux(makeStore)(appWithTranslation(ProgressiveWebApp));
    
    //i18.ts
    import NextI18Next from "next-i18next";
    
    const NextI18NextInstance = new NextI18Next({
      defaultLanguage: "en",
      otherLanguages: ["es"],
    });
    
    export const {
      appWithTranslation,
      withTranslation,
      useTranslation,
      i18n,
    } = NextI18NextInstance;
    
    export default NextI18NextInstance;
    

    and I have path alias in tsconfig

       "paths": {
          "@Definitions/*": ["definitions/*"],
          "@Interfaces": ["interfaces"],
          "@Redux": ["redux-store"],
          "@Server/*": ["server/*"]
        }
    

    hope this helps somebody!