[shadcn/ui] Toastが表示されない時の確認事項

Next.js
投稿日:
カテゴリー Next.js/Reactタグ

shadcn/uiのToastが表示されない時の確認事項について説明します。

bodyタグ内にToasterコンポーネントを挿入する

公式ドキュメントに記載されている通り、bodyタグ内にToasterコンポーネントを挿入する必要があります。layout.tsxのbodyの閉じタグの直前にを挿入してください。

import { Toaster } from "@/components/ui/toaster"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

広告