頁面路由 (Pages Router): 全域樣式

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 後重新啟動開發伺服器。

全域樣式

重新啟動開發伺服器

添加全域 CSS

On this page