react-notificationsをNext.jsから使う場合の備忘録

今日Next.jsでアプリを書いていたときに出会ったことをメモする。

といっても、Next.jsはエラーメッセージが親切なので、メモを残さなくとも、対処方法がわかりやすくエラーログに出てくる。
こういうのは本当に素晴らしいなと思う。
エラーの原因を探ってアタフタしているだけで開発効率は落ちるもの。
そういう時間を極力少なくしてくれるように設計されている印象。
まさにデベロッパーフレンドリーといった感じ。

react-notificationsをNext.jsから使う場合に必要になる下記の記述は、pages/〇〇.js 内には直接かけない。

import 'react-notifications/lib/notifications.css';

その場合は pages/_app.js を作成して、下記のように読み込む必要があるようだった。

import 'react-notifications/lib/notifications.css';

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