はじめに

Next.jsにチャレンジしていく過程をメモ/備忘録として記録していきます。
同じようにこれから始める方の参考となればと思います。

やりたいこと

React-Toastifyを使ってみたい

環境

下記のDocker開発環境にて行います。

React-Toastifyについて

公式のplaygroundで遊ぶとイメージを掴みやすいのですが、
表示位置やテーマなど簡単に設定できる、Toast　UIのライブラリです。
オートクローズなどのオプション機能もあって感動です！！

Next.jsの導入について

ToastContainerを、上位コンポーネントに配置しておけば、配下のコンポーネントから呼び出しが出来るというものです。
Next.jsのApp routerでいうと、一番最上位のapp/layout.tsxにおいておけばどこからでも呼び出せるということになります。

ただ、ToastContainerはクライアントコンポーネント、app/layout.tsxはサーバーコンポーネントなので、そのまま置くだけというわけにはいきませんでした。

app/layout.tsxのProps.childrenを、ToastContainerを配置したクライアントコンポーネントToastProviderでラップするという方法で行なっていきます。

こちらを参考にさせていただきました（ありがとうございます）

1. まずはインストール

npm install --save react-toastify

2.クライアントコンポーネント`ToastProvider`を作成

app/layout.tsxのProps.childrenを包み込むためのクライアントコンポーネントです。
ToastContainerにデフォルト値が設定できるので公式のplagroundを参考に設定しました。

ToastProvider.tsx

"use client";

import "react-toastify/dist/ReactToastify.css";
import { Flip, ToastContainer } from "react-toastify";

export default function ToastProvider(
  { children }: {children: React.ReactNode;}) {

  return (
    <>
      {children}
      <ToastContainer
        toastClassName={"rounded-lg min-w-96 text-center"}
        position="bottom-center"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="colored"
        transition={Flip}
      />
    </>
  );
}

３.`ToastProvider`でをラップ

app/layout.tsx内のProps.childrenをを先ほど作成したToastProviderの中に入れます。
これでどこからでも呼び出せるようになりました。

app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import ToastProvider from '@/components/layouts/ToastProvider'

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Some title",
  description: "This is example page.",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body className={inter.className}>
        <ToastProvider>
          {children}
        </ToastProvider>
      </body>
    </html>
  );
}

4.呼び出しテスト

動くのかテストしてみます。
もちろん、ToastContainerがクライアントコンポーネントですので、呼び出しもクライアントコンポーネントからじゃないと動きません。
下記ボタンだけ置いて、デフォルト設定のまま呼び出しテスト。

page.tsx

'use client'

import { toast } from "react-toastify";

export default function Page() {
  return (
    <div className="flex flex-col justify-center items-center gap-8 w-screen h-screen">
      <button className="btn btn-wide" onClick={() => toast("Default Notification !")}>
          Default Toast
        </button>
        <button className="btn btn-wide btn-success" onClick={() => toast.success("Success Notification !")}>
          Success Toast
        </button>
        <button className="btn btn-wide btn-error" onClick={() => toast.error("Error Notification !")}>
          Error Toast
        </button>
    </div>
  );
}

ボタンを押すとちゃんと思い通りにToastが表示されました。

さいごに

すごく簡単にトーストを導入できました。
これからも便利なライブラリをどんどん導入していきたいと思います。

参考