全局样式
CSS 模块 (CSS Modules) 适用于组件级样式。但如果需要某些 CSS 被所有页面加载，Next.js 也提供了支持。
要为应用加载全局 CSS (global 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 (global CSS)。全局 CSS 不能在其他任何地方导入。
全局 CSS (global 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;
}最后，在你之前创建的 pages/_app.js 文件中导入 CSS 文件：
// `pages/_app.js`
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}现在，如果你访问 http://localhost:3000/posts/first-post，将会看到样式已生效。在 _app.js 中导入的任何样式都会全局应用于应用的所有页面。
如果未生效：请确保在更新
pages/_app.js后重启开发服务器。