Firefox runs reload animation when navigating (🛠 only in development mode)

Bug report

Describe the bug

This occurred in a next.js app set up by following the manual setup

In Firefox, a quick refresh is made when navigating from one page to another. I am just using 2 simple pages.

1. index.js

import Link from 'next/link'
...
<Link href="/about" />
...

1. about.js

import Link from 'next/link'
...
<Link href="/" />
...

To Reproduce

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

1. Go to terminal
2. mkdir next-firefox-refresh-test
3. yarn init -y
4. yarn add next react react-dom
5. Add the following to package.json

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }

1. mkdir pages && cd pages && touch index.js && touch about.js
2. Open project in desired code editor
3. Setup a basic functional component in each file and place a <Link href="{YOUR_LINK}">{YOUR_PAGE}</Link> in each component’s return statement. Link the pages to each other.
4. yarn run dev
5. Open http://localhost:3000 in Firefox

Expected behavior

When clicking the link to the other page, a navigation without a reload/refresh should happen.

Screenshots

System information

• OS: macOS
• Browser: Firefox
• Version of Next.js: ^9.3.5
• Version of Node.js: 12.8.0

Additional context

What I have tried

• Adding as="/" and as="/about"
• Different browsers (works in other browsers)
• Setting up the project using both methods here

[ijjk]

This seems to only occur in development and may be triggered in Firefox from the server-sent events connection used for HMR being disconnected and re-connected. The animation isn’t triggered on a production site leveraging Next.js like https://zeit.co

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.