Reset.cssをNext.jsに導入する

Reset.cssをNext.jsに導入します、ここでは2つのやり方をご紹介します。

• cssファイルをDLしてプロジェクトに配置する
• Nodeのパッケージとして配信されているものを追加する

Nuxt.jsにReset.cssを導入する記事の時にも書いた以下の記事が、Reset.css選びのに参考になります。

2020年、モダンブラウザに適したCSSリセットのまとめ | コリス

reset.cssをNuxt.jsに導入する

cssファイルをDLしてプロジェクトに配置する

やることは大きく2つ

• Reset.cssを用意（もしくは作成）
• pages/_app.tsxでimportする

Reset.cssをDL等して以下のように配置します。

project-root/
  src/
    pages/
      _app.tsx
    styles/
      reset.min.css

Reset.cssは例えば以下のページからDLします。

modern-css-reset/dist at master · hankchizljaw/modern-css-reset

あとはReset.cssを pages/_app.tsx でimportします。これだけでReset.cssが有効になります！

import type { AppProps } from 'next/app'
 
import '../styles/reset.min.css'  //この行を追加
 
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
 
export default MyApp

Nodeのパッケージとして配信されているものを追加する

こちらもやることは大きく2つ

• Reset.cssのパッケージをインストール
• pages/_app.tsxでimportする

Nodeのパッケージとして導入する事でReset.cssのアップデートがしやすくなります。

ここではNuxt.jsで導入した時と同じように modern-css-reset を導入します。

hankchizljaw/modern-css-reset: A bare-bones CSS reset for modern web development.

$ yarn add modern-css-reset

あとはReset.cssを pages/_app.tsx でimportします。

ただし、今度はNodeのパッケージでインストールしたものをimportします。

import type { AppProps } from 'next/app'
 
import 'modern-css-reset/dist/reset.min.css'  //この行を追加
 
function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
 
export default MyApp

これでReset.cssが有効になりました！