全域樣式
CSS 模組 (CSS Modules) 適用於元件層級的樣式。但如果您希望某些 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;
}最後，在您之前建立的 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後重新啟動開發伺服器。