Using useContext hooks instead of redux with nextjs.

[bnbon]

Hello,

I handle authentication using JWT, and at the moment I have a (I think horrid) method in my _App.js which takes the cookie and loads it back into the Application, but I am now approaching a point where the site is nearing a release and the next build command gives me this warning.

Warning: You have opted-out of Automatic Static Optimization due to `getInitialProps` in `pages/_app`. This does not opt-out pages with `getStaticProps`

Now I have just finished rewriting all my components to use hooks, using the latest nextjs and material-ui but this redux for auth is still something I struggle to get my head around, whereas hooks took me a day or two to understand migrate to.

Is there any advantage of using redux over context when my intention is only to store and persist the user token and perhaps a couple of fields?

My _App.js has this code which I feel I hate;

function MyApp(props) {
  const { Component, pageProps, store } = props;

  React.useEffect(() => {
    initGA();
    logPageView();
    Router.router.events.on('routeChangeComplete', logPageView);

    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <>
      <DefaultSeo {...SEO} />
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Provider store={store}>
          <Header />
          <div style={{ marginTop: '56px' }}>
            <Component {...pageProps} />
          </div>
          <Footer />
        </Provider>
      </ThemeProvider>
    </>
  );
}

MyApp.getInitialProps = async ({ Component, ctx }) => {
  if (ctx.isServer) {
    if (ctx.req.headers.cookie) {
      const token = getCookie('token', ctx.req);
      if (token) {
        ctx.store.dispatch(reauthenticate(token));
      }
    }
  } else {
    const { token } = ctx.store.getState().authentication;
    if (token) {
      ctx.store.dispatch(reauthenticate(token));
    }
  }

  return {
    pageProps: Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {},
  };
}

export default withRedux(makeStore)(MyApp);

I just feel this is a bad technical choice, can anyone point me in a better direction?

[LoicHa]

Getting the same trouble with a very similar approach. How did you solved out your problems?

[moneebalalfi]

did u ?