如何在Next.js项目中去除页面白色边缘实现全屏背景

核心原因 #

页面四周的白色边缘来自html和body标签的默认margin/padding，你之前的尝试存在以下问题：

• 直接在组件中返回<html>标签会导致Next.js服务器渲染与客户端hydration的DOM结构不匹配，触发报错；
• 全局CSS报错通常是因为未遵循Next.js Pages Router的全局样式规则（必须在_app.js中导入，不能在页面组件内直接导入）。

推荐解决方案：全局CSS重置（最符合Next.js最佳实践） #

1. 创建全局样式文件

在项目根目录下创建/styles/globals.css，添加以下重置样式：

/* 重置html和body的默认边距，确保占满全屏 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* 根容器设置背景色并占满全屏 */
#root {
  margin: 0;
  background-color: #444654;
  min-height: 100vh;
}

2. 在_app.js中导入全局样式

如果项目中没有/pages/_app.js，新建该文件并添加以下内容：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

3. 简化Home组件的根div

此时Home组件的根div无需再写内联样式（全局CSS会自动生效），可以改为：

return (
  <div id="root">
    <Head>
      <title>OpenAI Quickstart</title>
      <link rel="icon" href="/dog.png" />
    </Head>
    <main className={styles.main}>
      {/* 其余内容保持不变 */}
    </main>
  </div>
)

备选方案：客户端useEffect设置样式（无全局CSS） #

如果不想使用全局CSS，可以通过useEffect在客户端单独设置样式，避免hydration错误：

import { useEffect } from 'react';
import Head from 'next/head';

export default function Home() {
  useEffect(() => {
    // 仅在客户端执行样式设置，避免服务器渲染不匹配
    const rootElement = document.getElementById('root');
    
    document.documentElement.style.margin = '0';
    document.documentElement.style.padding = '0';
    document.body.style.margin = '0';
    document.body.style.padding = '0';
    document.body.style.minHeight = '100vh';
    
    rootElement.style.backgroundColor = '#444654';
    rootElement.style.minHeight = '100vh';
  }, []);

  return (
    <div id="root">
      <Head>
        <title>OpenAI Quickstart</title>
        <link rel="icon" href="/dog.png" />
      </Head>
      {/* 其余内容保持不变 */}
    </div>
  );
}

为什么之前的方法失效？ #

• 替换为<html>标签：Next.js会自动生成页面的顶层<html>和<body>标签，组件中重复返回会导致服务器渲染的DOM与客户端hydration时的结构不一致，触发hydration错误；
• 全局CSS报错：Pages Router中全局CSS文件只能在_app.js中导入，若直接在页面组件内导入会触发"非纯样式"类的错误。

内容的提问来源于stack exchange，提问作者Lee Cascio