我希望能够根据当前的语言环境自定义HTML。我在pages
目录中创建了一个_document.js
。我使用了以下代码:
import { Html, Head, Main, NextScript } from 'next/document'
import { useRouter } from 'next/router'
export default function Document() {
const { locale } = useRouter();
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
但我得到这个错误:
错误:错误:下一个路由器未挂载。https://nextjs.org/docs/messages/next-router-not-mounted
当我转到指定的URL时,我看到他们说我正在使用<Main />
外部的逻辑。
我找到了NextRouter was not mounted Next.JS,但即使使用next/navigation
也不起作用,我得到了以下错误:
错误:固定预期要挂载的应用程序路由器
1条答案
按热度按时间mjqavswn1#
useRouter()
钩子在浏览器上运行,而_document.js
在服务器上运行;例如,如果您在Document
中的return
之前添加一个console.log('Hello Word')
,那么它只会在您的开发服务器上打印出来,而不会在浏览器上打印出来。浏览器不会初始化
<Main />
之外的React组件。不要在这里添加应用程序逻辑或自定义CSS(如styled-jsx)。如果您需要在所有页面中共享组件(如菜单或工具栏),请改为阅读Layouts。在_document中使用的组件与next/head不同。此处使用的组件应仅用于所有页面通用的任何代码。对于所有其他情况,例如标记,我们建议在页面或组件中使用next/head。