所以我的问题是 Next.js 无法在客户端访问
localStorageclass="dark"这意味着，当用户重新加载页面时，
<html>class="dark"class="dark"<html>class="dark"class="dark"<html>有没有办法在页面渲染之前执行一些javascript？然后我就可以根据用户的 class="dark"
添加或不添加
<html>到
localStorage。
noflash.js
文件添加到您的公共目录
(function () {
// Change these if you use something different in your hook.
var storageKey = 'darkMode';
var classNameDark = 'dark-mode';
var classNameLight = 'light-mode';
function setClassOnDocumentBody(darkMode) {
document.body.classList.add(darkMode ? classNameDark : classNameLight);
document.body.classList.remove(darkMode ? classNameLight : classNameDark);
}
var preferDarkQuery = '(prefers-color-scheme: dark)';
var mql = window.matchMedia(preferDarkQuery);
var supportsColorSchemeQuery = mql.media === preferDarkQuery;
var localStorageTheme = null;
try {
localStorageTheme = localStorage.getItem(storageKey);
} catch (err) {}
var localStorageExists = localStorageTheme !== null;
if (localStorageExists) {
localStorageTheme = JSON.parse(localStorageTheme);
}
// Determine the source of truth
if (localStorageExists) {
// source of truth from localStorage
setClassOnDocumentBody(localStorageTheme);
} else if (supportsColorSchemeQuery) {
// source of truth from system
setClassOnDocumentBody(mql.matches);
localStorage.setItem(storageKey, mql.matches);
} else {
// source of truth from document.body
var isDarkMode = document.body.classList.contains(classNameDark);
localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
}
})();
// https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt
然后，将以下 script src
标签添加到包含在
Head文件的
pages/_document类中的返回内容中
import Document, {
Head,
Html,
Main,
NextScript,
DocumentContext
} from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang='en-US'>
<Head>
<meta charSet='utf-8' />
<script type="text/javascript" src='/noflash.js' />
</Head>
<body className='loading'>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
上述方法有效，但以下方法与 Nextv10+ 完美配合。它只需要将以下配置添加到您的根 next.config.js 文件中。
next.config.js
module.exports = {
env: {
noflash: fs.readFileSync('/noflash.js').toString()
}
}
然后，在您的 pages/_document
文件中更改以下脚本标记，如下所示
before
//
<Head>
<meta charSet='utf-8' />
<script type="text/javascript" src='/noflash.js' />
</Head>
//
after
//
<Head>
<meta charSet='utf-8' />
<script type="text/javascript" dangerouslySetInnerHTML={{ __html: process.env.noflash}} />
</Head>
//
链接到我使用第一种方法的存储库（从 2020 年秋季开始，在 tailwindcss 内置深色模式支持之前）
function MyApp() {
const [theme, setTheme] = useState(null);
useEffect(() => {
let theme = localStorage.getItem('theme') || 'light';
setTheme(theme);
}, []);
if (!theme) {
return; // `theme` is null in the first render
}
return (
<Component {...pageProps} />
);
}
更多详情请看我的回答。