Error: Attempted to call generateViewport() from the server （Next.js 15)

丝恋發表於 2025-1-5 10:22:00

Error: Attempted to call generateViewport() from the server （Next.js 15)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error Error: Attempted to call generateViewport() from the server but generateViewport is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component. 
这个错误是由于 <button type="button">layout.tsx </button>文件的配置不正确。在 <button type="button">Next.js </button>中，我们不需要手动创建 root 并渲染应用。以下是修复方法：
请按此调整你的代码，以符合 <button type="button">Next.js </button>的正确配置。这样可以避免在页面预渲染时出现错误。 # 错误的代码
<div class="cnblogs_code">
<pre>import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const rootElement = document.getElementById('root') as HTMLElement;// Type assertion to HTMLElement

ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
);</pre>
</div>
# 正确的代码
<div class="cnblogs_code">
<pre>'use client'

import React from 'react'
import { BrowserRouter } from 'react-router-dom'

interface RootLayoutProps {
children: React.ReactNode
}

export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang='en'>
 <body>
 <BrowserRouter>
 {children}
 </BrowserRouter>
 </body>
</html>
)
}</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
 <table><tr><td><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc/2.5/cn/88x31.png" /> </td><td>本作品采用知识共享署名-非商业性使用 2.5 中国大陆许可协议进行许可。 </td> 
来源：https://www.cnblogs.com/sekihin/p/18653147

頁: [1]

琼殿技术论坛's Archiver

Error: Attempted to call generateViewport() from the server （Next.js 15)