title: Next JS code inside getInitialProps not executes after page reload
body: <p>I'm integrating NextJS into my React app. I face a problem, on page reload or opening direct link(ex. somehostname.com/clients) my <code>getInitialProps</code> not executes, but if I open this page using <code>&lt;Link&gt;</code> from <code>next/link</code> it works well. I don't really understand why it happens and how to fix it. I have already came throught similar questions, but didn't find any solution which could be suitable for me.</p>
  
  <p>Clients page code:</p>
  
  <pre><code>import React, { useEffect, useState } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { ClientsTable } from '../../src/components/ui/tables/client-table';
  import AddIcon from '@material-ui/icons/Add';
  import Fab from '@material-ui/core/Fab';
  import { AddClientModal } from '../../src/components/ui/modals/add-client-modal';
  import CircularProgress from '@material-ui/core/CircularProgress';
  import { Alert } from '../../src/components/ui/alert';
  import { Color } from '@material-ui/lab/Alert';
  import { AppState } from '../../src/store/types';
  import { thunkAddClient, thunkGetClients } from '../../src/store/thunks/clients';
  import { SnackbarOrigin } from '@material-ui/core';
  import { IClientsState } from '../../src/store/reducers/clients';
  import { NextPage } from 'next';
  import { ReduxNextPageContext } from '../index';
  import { PageLayout } from '../../src/components/ui/page-layout';
  
  const Clients: NextPage = () =&gt; {
    const [addClientModalOpened, setAddClientModalOpened] = useState&lt;boolean&gt;(false);
    const [alertType, setAlertType] = useState&lt;Color&gt;('error');
    const [showAlert, setAlertShow] = useState&lt;boolean&gt;(false);
    const alertOrigin: SnackbarOrigin = { vertical: 'top', horizontal: 'center' };
  
    const dispatch = useDispatch();
    const { clients, isLoading, hasError, message, success } = useSelector&lt;AppState, IClientsState&gt;(state =&gt; state.clients);
  
    useEffect(() =&gt; {
      if (success) {
        handleAddModalClose();
      }
    }, [success]);
  
    useEffect(() =&gt; {
      checkAlert();
    }, [hasError, success, isLoading]);
  
    function handleAddModalClose(): void {
      setAddClientModalOpened(false);
    }
  
    function handleAddClient(newClientName: string): void {
      dispatch(thunkAddClient(newClientName));
    }
  
    function checkAlert() {
      if (!isLoading &amp;&amp; hasError) {
        setAlertType('error');
        setAlertShow(true);
      } else if (!isLoading &amp;&amp; success) {
        setAlertType('success');
        setAlertShow(true);
      } else {
        setAlertShow(false);
      }
    }
  
    return (
      &lt;PageLayout&gt;
        &lt;div className='clients'&gt;
          &lt;h1&gt;Clients&lt;/h1&gt;
  
          &lt;div className='clients__add'&gt;
            &lt;div className='clients__add-text'&gt;
              Add client
            &lt;/div&gt;
            &lt;Fab color='primary' aria-label='add' size='medium' onClick={() =&gt; setAddClientModalOpened(true)}&gt;
              &lt;AddIcon/&gt;
            &lt;/Fab&gt;
  
            &lt;AddClientModal
              opened={addClientModalOpened}
              handleClose={handleAddModalClose}
              handleAddClient={handleAddClient}
              error={message}
            /&gt;
          &lt;/div&gt;
  
          &lt;Alert
            open={showAlert}
            message={message}
            type={alertType}
            origin={alertOrigin}
            autoHideDuration={success ? 2500 : null}
          /&gt;
  
          {isLoading &amp;&amp; &lt;CircularProgress/&gt;}
  
          {!isLoading &amp;&amp; &lt;ClientsTable clients={clients}/&gt;}
  
        &lt;/div&gt;
      &lt;/PageLayout&gt;
    );
  };
  
  Clients.getInitialProps = async ({ store }: ReduxNextPageContext) =&gt; {
    await store.dispatch(thunkGetClients());
    return {};
  };
  
  export default Clients;
  </code></pre>
  
  <p>thunkGetClients()</p>
  
  <pre><code>export function thunkGetClients(): AppThunk {
    return async function(dispatch) {
      const reqPayload: IFetchParams = {
        method: 'GET',
        url: '/clients'
      };
  
      try {
        dispatch(requestAction());
  
        const { clients } = await fetchData(reqPayload);
  
        console.log(clients);
  
        dispatch(getClientsSuccessAction(clients));
  
      } catch (error) {
        dispatch(requestFailedAction(error.message));
      }
    };
  }
  </code></pre>
  
  <p>_app.tsx code</p>
  
  <pre><code>import React from 'react';
  import App, { AppContext, AppInitialProps } from 'next/app';
  
  import withRedux from 'next-redux-wrapper';
  import { Provider } from 'react-redux';
  import { makeStore } from '../../src/store';
  import { Store } from 'redux';
  
  import '../../src/sass/app.scss';
  import { ThunkDispatch } from 'redux-thunk';
  
  export interface AppStore extends Store {
    dispatch: ThunkDispatch&lt;any, any, any&gt;;
  }
  
  export interface MyAppProps extends AppInitialProps {
    store: AppStore;
  }
  
  export default withRedux(makeStore)(
    class MyApp extends App&lt;MyAppProps&gt; {
      static async getInitialProps({
                                     Component,
                                     ctx
                                   }: AppContext): Promise&lt;AppInitialProps&gt; {
        const pageProps = Component.getInitialProps
          ? await Component.getInitialProps(ctx)
          : {};
  
        return { pageProps };
      }
  
      render() {
        const { Component, pageProps, store } = this.props;
  
        return (
          &lt;&gt;
            &lt;Provider store={store}&gt;
              &lt;Component {...pageProps} /&gt;
            &lt;/Provider&gt;
          &lt;/&gt;
        );
      }
    }
  );
  </code></pre>
  
  <p>Looking for your advices and help. Unfortunately, I couldn't find solution by myself.</p>