问题描述
sessionStorage、document、window 是我们常用到的对象,怎么在next.js中就找不到了呢?
import './page.scss';
export default function Home() {
sessionStorage.setItem('test', 'test');
return <main className={'HomePage'}>home page</main>;
}
原因:
next.js是服务器渲染,运行在node上的,并不是浏览器上的,所以next.js中所有服务器端渲染的页面都找不到浏览器相关对象以及方法。
解决方案:
1.将服务器端渲染页面定义称客户端渲染页面
在页面顶部加上
'use client';
'use client';
import './page.scss';
export default function Home() {
console.log(window, document);
return <main className={'HomePage'}>home page</main>;
}