Next.js 不会自动刷新答案

【问题标题】：Next.js not auto refreshingNext.js 不会自动刷新
【发布时间】：2021-04-10 04:37:19
【问题描述】：

我在使用 Next.js 时遇到问题，基本上它不会在我进行更改时自动刷新本地主机索引页面。

我使用 npx create-next-app --use-npm 创建了一个 Next.js 应用程序。我使用npm start 启动了本地服务器，然后我编辑了index.js 文件中的h1 标签，将其从<h1>First Page</h1> 更改为<h1>Second Page</h1>。然后我保存了文件。

但是，我的本地服务不会自动刷新并反映我刚刚所做的更改。我必须运行 npm run build 然后运行 npm run start 才能看到更改。

感谢任何建议，或者指出我解决这个问题的正确方向，因为无法看到自动刷新确实会减慢开发过程:(

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

你必须使用npm run dev

这些脚本涉及开发应用程序的不同阶段：

dev - 运行下一个开发，在开发模式下启动 Next.js

build - 运行下一个构建，构建应用程序以供生产使用

start - 运行下一个启动，启动 Next.js 生产服务器

来源：https://nextjs.org/docs/getting-started

【讨论】：

成功了！我做了进一步的研究，发现我在生产模式而不是开发模式下启动了本地服务器。谢谢！
很高兴。请选择已接受的答案，然后结束您的问题^^
谢谢，它有帮助，我正在使用纱线，所以对我来说它看起来像这样：纱线开发

【解决方案2】：

你需要将这个添加到 package.json

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

然后npm run dev

【讨论】：

谢谢！刚刚检查了我的 package.json，我得到了这些行 :)

【解决方案3】：

我的也不行。我的解决方案：

npm run build
npm start

这样做后它起作用了。

【讨论】：

【解决方案4】：

快速刷新对我们来说被破坏了，因为我们在 next.config.js 中使用了一个自定义的 webpack 配置，将 React 和 ReactDOM 设置为外部。

确保 React 和 ReactDOM 都包含在包中，而在本地开发中为我们解决了这个问题。

const isDev = NODE_ENV === 'development'

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

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

【讨论】：