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

Question

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;

score 1 · Accepted Answer · answered Mar 07 '21 at 21:36

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!

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

1 Answers1