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

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

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

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



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

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

検証した環境

1 next 10.0.2

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が有効になります!

pages/_app.tsx
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する

この方法はNext.jsの9.5.4以上が必要です。

Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.

Basic Features: Built-in CSS Support | Next.jsより引用



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します。

pages/_app.tsx
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が有効になりました!

おすすめ