Next.js + react-toastifyでページ遷移時にもトースト表示を維持する

公開日時
更新日時

react-toastifyを使うとトースト表示を手軽に実現できる。

カスタマイズも色々できるようになっており、↓のサイトで試すことができる。

Next.jsと組み合わせてreact-toastifyを使う際に、 router.push でページ遷移した時もトーストが表示されたままにしたかったので対応方法を調べた。

↓のissueにあるようにCustom AppToastContainer を配置しておけば実現できる。

  • pages/_app.tsxToastContainer を配置
import 'react-toastify/dist/ReactToastify.css'

import { AppProps } from 'next/app'
import React from 'react'
import { ToastContainer } from 'react-toastify'

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <>
      <ToastContainer />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

確認

  • トースト表示を行うテストページを作成
mport { useRouter } from 'next/router'
import React from 'react'
import { toast } from 'react-toastify'

const Test1 = () => {
  const router = useRouter()
  return (
    <div className="p-4">
      <p>Test1</p>
      <p>
        <button
          onClick={() => {
            toast.success('Hello. This is test')
            router.push('/test2')
          }}
        >
          Toast
        </button>
      </p>
    </div>
  )
}

export default Test1
toast1
  • 遷移先のテストページ
import React from 'react'

const Test2 = () => {
  return <div className="p-4">Test2</div>
}

export default Test2

ページ遷移後もトースト表示が維持できている。

toast2

Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった