【NEXT.JS 系列】資產、後設資料與CSS 6

全域樣式

CSS 模組對於元件層級的樣式很有用。 但是，如果您希望每個頁面都加載一些 CSS，Next.js 也對此提供支持。

要加載全域 CSS 文件，請建立一個名為 pages/_app.js 的文件，其內容如下：

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

這個 App 元件是所有不同頁面通用的頂層元件。 例如，您可以使用此 App 元件在頁面之間導航時保持 state。

重啟開發服務器

重要提示：添加 pages/_app.js 時需要重啟開發服務器。 按 Ctrl + c 停止服務器並運行：

$ npm run dev

添加全域 CSS

在 Next.js 中，您可以通過從 pages/_app.js 匯入全域 CSS 文件來添加它們。 您不能在其他任何地方匯入全域 CSS。

在 pages/_app.js 之外無法會入全域 CSS 的原因是全域 CSS 會影響頁面上的所有元素。

如果您要從主頁導航到 /posts/first-post 頁面，主頁中的全域樣式會無意中影響 /posts/first-post。

您可以將全域 CSS 文件放置在任何位置並使用任何名稱。 因此，讓我們執行以下操作：

• 建立一個頂層樣式目錄並在其中創建 global.css。
• 將以下內容添加到 styles/global.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 文件，如下所示：

import '../styles/global.css';

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

現在，如果您訪問 http://localhost:3000/posts/first-post，您將看到樣式已應用：

如果它不起作用：確保在添加 pages/_app.js 時重新啟動開發服務器。

下一節裡，讓我們繼續完善頁面的佈局。