Using JWT/Redux in _app.jsx Prevents getStaticProps from working?

[bnbon]

Hi,

I am using JWT with Redux to handle user authentication in my App. I have this added in my _app.jsx

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

It would appear that when using this, it prevents any of my sites pages being created at build time; is there any solution to avoid this? Is there a better way to do this, and lastly; any examples of jwt-auth with nextjs using a useReducer hook or perhaps doing away with Redux totally?

I appreciate this error message; but when I tried to use getStaticProps it didnt result in a static page and the data wasnt loading when using development mode.

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

The code for a page which i have simplified is here;

import React from 'react';

import APIService from '../utils/APIService';


function Page({ data }) {
  console.log(data);  //is empty
  return (
    <>
      {data.map((item) => (
        <div>
          {item.name}
        </div>
      ))}
    </>    
  )
};

export default Page;

export async function getStaticProps() {
  const req = await APIService.get('/items');

  const { data } = req;

  return {
    props: {
      data, // has an array if I console.log it.
    },
  }
};