[next.js]移动端调试vconsole

一般最简单的调试方式当然是使用vconsole来输出想要的数据啦；
next.js如果想使用的话需要在客户端环境里调用才行（服务端直接看cmd控制台就够了）；

先安装vconsole

npm i -D vconsole

next.js不像react cli或者vue一样有一个main.ts作为入口文件，next.js的入口可以选择公共layout，但是入口的Layout一般都是服务器组件便于设置一些meta信息，所以我们选择layout的下级layout里引入vconsole
即：
app
- layout.tsx
[main]
- layout.tsx // 这里引入vconsole
- 其他文件…

结构是这样的

或者想直接在入口的layout里引入也行，方案是使用dynamic动态导入组件，这个组件里引入vconsole就行。

先说第一种：

直接在这个layout的useEffect里加载vconsole (这里只会在开发环境里启用vconsole，基于webpack/turbopack的tree shake功能，在正式环境是不会把vconsole打包进来的) 然后使用import导入三方库并初始化。

useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      let vConsole: VConsole;
      const loadVConsole = async () => {
        const VConsole = (await import('vconsole')).default;
        vConsole = new VConsole();
      };
      loadVConsole();
      return () => {
        if (vConsole) vConsole.destroy();
      };
    }
  }, []);

然后第二种：

新建一个tsx文件，在这个tsx组件的useEffect里复制上面的代码（这里也是为了防止正式环境把vconsole打包进去），然后在入口的layouts里使用dynamic动态导入这个组件并挂载到页面上；

import dynamic from "next/dynamic";

...

const VConsole = dynamic(() => import('./xxx.tsx'), {ssr: false});
// 然后直接使用<VConsole />这个组件就行了；因为我们设置了ssr为false告诉Next不需要服务端渲染这个组件

export default RootLayout({children}: {children: React.ReactNode}) {
	return (
		...
		<VConsole />
		{children}
		...
	)
}