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

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

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

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

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

• pages/_app.tsx に ToastContainer を配置

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

確認

• トースト表示を行うテストページを作成

import { 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

• 遷移先のテストページ

import React from 'react'

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

export default Test2

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