Next.js not auto refreshing

user_15594974 0
Viewed 12231

I'm having trouble with Next.js, basically it doesn't auto refresh local host index page whenever I make a change.

I created a Next.js app using npx create-next-app --use-npm. I started the local server using npm start, then I edited the h1 tag in index.js file, changing it from <h1>First Page</h1> to <h1>Second Page</h1>. Then I saved the file.

However, my local serve doesn't auto refresh and reflect the change I just made. I have to run npm run build then npm run start to be able to see the change.

Appreciate any suggestions, or maybe point me to the right direction on solving this, cuz not be able to see the auto refresh really slows down the dev process :(

next.js reactjs javascript
4 Answers

You have to use npm run dev

These scripts refer to the different stages of developing an application:

dev - Runs next dev which starts Next.js in development mode

build - Runs next build which builds the application for production usage

start - Runs next start which starts a Next.js production server

source: https://nextjs.org/docs/getting-started

user_111669390

You need to add this to package.json

  "scripts": {
    "test": "jest",
    "dev": " next dev -p 8000",
    "build": "next build",
    "start": "next start",
  }

then npm run dev

user_28220410

Mine was not working either. My solution:

npm run build
npm start

It worked after doing this.

user_158090360

Fast Refresh was broken for us because we were using a custom webpack config in our next.config.js that set React and ReactDOM as externals.

Ensuring both React and ReactDOM were included in the bundle while in local development fixed the issue for us.

const isDev = NODE_ENV === 'development'

module.exports = {
  webpack: config => {
    if (isDev) {
      return config;
    }

    return {
      ...config,
      externals: {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
    };
  },
};
user_182323860
Related