Next.js - 全局 CSS 支持

Next.js - 全局 CSS 样式

虽然通常更倾向于使用像 CSS Modules 这样的组件范围样式，但你经常需要一些全局样式来处理基础重置（base resets）、排版（typography）、布局默认值或第三方库的样式。

在 Next.js 中（使用 Pages Router），包含全局 CSS 的标准方法是将其导入到 pages/_app.js（或 _app.tsx）文件中。此文件充当所有页面组件的包装器（wrapper）。

如果你使用的是 App Router，全局样式通常会导入到根部的 layout.js 或 layout.tsx 文件中。

我们来创建一个全局样式表，并使用 Pages Router 的方法来应用它。

首先，如果在根目录下没有 styles 目录，请创建一个，并在其中添加一个名为 globals.css 的文件：

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
  background-color: #f0f0f0; /* 示例背景颜色 */
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

此文件包含典型的重置规则、基础字体设置、链接样式以及应用于 body 的浅灰色背景颜色。

现在，创建或更新 pages/_app.js 文件以导入这个全局样式表：

// 在此处导入全局样式
import '../styles/globals.css';

// 这是新的 `pages/_app.js` 文件中必需的默认导出。
export default function MyApp({ Component, pageProps }) {
  // 你可以在此处添加包裹所有页面的布局组件或提供者。
  return <Component {...pageProps} />;
}

重要提示：全局 CSS 只能在 pages/_app.js 中导入。默认情况下，Next.js 不允许在其他组件中导入全局 CSS 文件，以防止意外的副作用。对于组件级别的样式，请使用 CSS Modules 或其他作用域机制。

运行开发服务器

如果你的服务器未运行，请启动它：

npm run dev

# Example Output:
# ready - started server on 0.0.0.0:3000, url: http://localhost:3000
# event - compiled client and server successfully ...

验证输出

在浏览器中打开 http://localhost:3000。你应该会看到默认的浏览器样式已被覆盖。背景颜色应该是浅灰色（#f0f0f0），字体应该与 globals.css 中定义的堆栈（stack）匹配，链接应该具有指定的蓝色和悬停（hover）效果。这些样式将在你的应用的所有页面中保持一致，因为它们是在 _app.js 中导入的。

导航到其他页面（例如上一个示例中的 /posts/first-post 页面），确认全局样式已应用到各处。