Next.js: GetInitialProps get called twice when using Dynamic route causing Query params to be undefined

[Sletheren]

Bug report

When trying to access a page like: posts/[id]
which is a page that uses a dynamic query param:

const Posts = ({ value }) => <h1>{value}</h1>

Posts.getInitialProps = async function (appContext) {
console.log('Calling Test getinitialProps with query', appContext.query.id)
const value = await fetch(`/api/posts/${id}`)
  return {
    value,
    namespacesRequired: ['common']
  }
}
export default Posts

I get the console log inside the getInitialProps called twice with the second time the query param is undefined which causes errors (especially for the API call which fails since the ID is undefined the second time)

I don't know why this happens

To Reproduce

I have a custom _app.js which looks like this:

class MyApp extends App {
  static async getInitialProps (appContext) {
    const { Component, ctx } = appContext
    let pageProps = {}
    if (Component.getInitialProps) {
      console.log('calling getInitialProps')
      pageProps = await Component.getInitialProps(ctx)
    }
    pageProps.configs = get(ctx, 'req.EnvConfigs', {})
    return { pageProps }
  }
...

System information

• OS: macOS
• Browser Chrome
• Version of Next.js: 9.4.2

[jamesmosier]

Could you provide a full repo example @Sletheren?

I ran the code exactly as you had it and wasn't able to reproduce.

This was only logged once to my terminal when I reloaded the page: Calling Test getinitialProps with query 1234 (1234 is my dynamic param)

My [id].js page:

function DynamicIdPage(props) {
  return (
    <div>
      <h3>DynamicIdPage page</h3>
    </div>
  );
}

DynamicIdPage.getInitialProps = async context => {
  console.log('Calling Test getinitialProps with query', context.query.id);
  return {};
};

export default DynamicIdPage;

_app.js

export default class MyApp extends App {
  static async getInitialProps(appContext) {
    const { Component, ctx } = appContext;
    let pageProps = {};
    if (Component.getInitialProps) {
      console.log('calling getInitialProps inside _app.js');
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Component {...pageProps} />
    );
  }
}

[StanEgo]

I have figured out the similar behavior without getInitialProps. Is it somehow connected as I'm a newbie in Next.js?

Can be easily reproduce with a simple setup:

$ yarn create next-app

/pages/[id].js

import { useRouter } from "next/router";

export default () => {
        const router = useRouter();

        console.log(router.query);

        return (
            <pre>ID: {JSON.stringify(router.query)}</pre>
        )
}

Console output for http://localhost:3000/test contains two query objects. The first one is empty, the second one contains id: "test".

[Timer]

@StanEgo that behavior is expected per the documentation and unrelated to this issue:
https://nextjs.org/docs/routing/dynamic-routes#caveats

[Sletheren]

Surprisingly, after spending hours trying to debug this!
Found out that the page rerender twice, because of an Image component that had a src that gets retrieved from the redux store and on refresh/mount, the store is not initialized, and the image ends up loading undefined as the src url, which causes the page to trigger twice (Weird behaviour)

[hiro1107]

I had the same issue and as Sletheren said, this happens when the app tried to get an image, but it only happened when the image URL was undefined.