next.js: Fast Refresh not working with getStaticProps

Bug report

Describe the bug

Working with Next.js 10.0. According to the release docs, any changes made in the getStaticProps function will automatically reflect on the page without a need to refresh but that does not seem to be happening.

To Reproduce

Create a route with the code supplied below, change/add any key to the object being returned and save. Check whether the page rendered on the browser changes automatically or not.

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

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function TestImage({data}) {
  console.log('props passed :', data);
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Hey There! <code className={styles.codelarge}>I'm {data.name}</code>
        </h1>
        <h1 className={styles.title}>
          I'm a <code className={styles.codelarge}>{data.age}</code> years old {data.job}.
        </h1>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  )
}

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = {
    name: 'John',
    age: 28,
    job: 'actor'
  }

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: {data}
  }
}

Expected behavior

Upon changing any value for any key that is returned from inside of getStaticProps, the page should reflect the same upon saving.

System information

OS: macOs
Browser Chrome
Version of Next.js: 10.0.1
Version of Node.js: 10.16.0

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 8
Comments: 16 (10 by maintainers)

Most upvoted comments

Is the code open source, or a repo I can refer to?

rishi-raj-jain on Apr 18, 2021