时间戳

首页 > 解决方案 > Next.js 快速刷新自定义动画

next.js - Next.js 快速刷新自定义动画

问题描述

Next.js 中的快速刷新/热重载默认在右下角带有一个小三角动画：

重新加载动画

有没有办法自定义这个？我希望整个页面变成灰色或类似的，以便我得到视觉反馈，表明我的文件更改实际上正在生效，并且我没有碰巧更改错误的文件或其他东西，。

标签： next.js

解决方案

一个非常丑陋的解决方法，直到有更好的 next.js 知识的人提供帮助：

// Put this in your _app.js file
if (global.window) {
  global.addEventListener('load', (event) => {
    const watcher = window.document.getElementById('__next-build-watcher')
    if (watcher) {
        const newStyle = global.document.createElement('style')
        newStyle.innerHTML = '#icon-wrapper { width: 100vw!important; height: 100vh!important; opacity: 0.3!important; } #container { background: rgba(0, 0, 0, 0.3)!important; }'
        watcher.shadowRoot.appendChild(newStyle)
    }
  });
}

使该三角形图标100vw 100vh和半透明而不是 16px 16px.

推荐阅读