全局样式

CSS 模块 对于组件级样式很有用。但是，如果你希望某些 CSS 由**每个页面**加载，Next.js 也支持这一点。

要将全局 CSS加载到你的应用程序中，请创建一个名为pages/_app.js的文件，内容如下所示

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

_app.js的默认导出是一个顶级 React 组件，它封装了应用程序中的所有页面。你可以在页面之间导航时使用此组件来保持状态，或者像我们在这里所做的那样添加全局样式。了解更多关于_app.js文件的信息。

重启开发服务器

重要提示：当你添加pages/_app.js时，需要重启开发服务器。按Ctrl + c停止服务器并运行

npm run dev

添加全局 CSS

在 Next.js 中，你可以通过从pages/_app.js导入它们来添加全局 CSS文件。你**不能**在其他任何地方导入全局 CSS。

全局 CSS不能在pages/_app.js之外导入的原因是，全局 CSS 会影响页面上的所有元素。

如果你要从主页导航到/posts/first-post页面，主页的全局样式会无意中影响/posts/first-post。

你可以将全局 CSS 文件放在任何位置并使用任何名称。因此，让我们执行以下操作

• 创建一个顶级styles目录和一个global.css文件。
• 在styles/global.css中添加以下 CSS。此代码重置了一些样式并更改了a标签的颜色

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;
}

* {
  box-sizing: border-box;
}

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

a:hover {
  text-decoration: underline;
}

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

最后，将 CSS 文件导入到之前创建的pages/_app.js文件中

// `pages/_app.js`
import '../styles/global.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

现在，如果你访问https://127.0.0.1:3000/posts/first-post，你将看到样式已应用。在_app.js中导入的任何样式都将全局应用于应用程序的所有页面。

如果不起作用：确保在更新pages/_app.js时重启开发服务器。