Zenn
📌

Next.jsにglobal.cssを適応させる

2021/02/12に公開
CSS
Next.js
React
tech

手順

①プロジェクトのルートにstylesフォルダを作成し、global.cssを追加。

$ mkdir styles

$ touch styles/global.css
global.css
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を作成。Next.jsではAppコンポーネントを使用して全てのページを初期化するようになっています。 そのため、このコンポーネントを継承したクラスがあるファイル、_app.js(tsx) を作成することでデフォルトのAppコンポーネントを上書きできます。

$ touch pages/_app.js
_app.js
import "../styles/global.css";

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

参考にさせていただいた記事

Next.jsでの_documment.js(tsx)・App.js(tsx)について爆速で理解しよう

Discussion