Next.js: `favicon.ico` showing up in slug in `getInitialProps`

[Leland-Kwong]

Bug report

Describe the bug

Given the following pages folder structure

- pages
  |- [slug].js

and [slug].js has the following code:

const Page = ({ slug }) => (
  <div>{slug}</div>
);

Page.getInitialProps = ({ slug )} => {
  console.log(slug); // this gets called twice
  return { slug }
}

Whenever we go to a page such as /hello-world, getInitialProps gets called twice. On the first call, slug is favicon.ico, and the second call slug is hello-world.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create new project
2. Add a new file at /pages/[slug].js with the code as explained above
3. Navigate to /hello-world
4. We should see in the console that we have two outputs of favicon.ico and hello-world

Expected behavior

getInitialProps should only be called once with hello-world as the slug value.

System information

• OS: Windows
• Browser: n/a
• Version of Next.js: 9.1.6

Additional context

If we add a <link /> component to load a favicon inside pages/_document.js, this issue goes away.

[timneutkens]

getInitialProps should only be called once with hello-world as the slug value.

This is already the case. What you're seeing is default browser behavior of trying to load favicon.ico when you open a page. This then causes the page to be rendered. You can add an empty file to public/favicon.ico to provide one for example.