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.

这个错误是由于 文件的配置不正确。在 中，我们不需要手动创建 root 并渲染应用。以下是修复方法：

请按此调整你的代码，以符合 的正确配置。这样可以避免在页面预渲染时出现错误。
# 错误的代码

复制代码
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>,
);
复制代码

# 正确的代码

复制代码
'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>
  )
}
复制代码

 

点击右上角即可分享
微信分享提示