-
-
Notifications
You must be signed in to change notification settings - Fork 691
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
No toast shown in Nextjs 13 #963
Comments
Solution: I was able to solve this by adding to the current page at /app/myPage/page.tsx Seems like a temporary solution but fine with me |
@qnxdev You need wrap Here how it's done on my side toast.provider.tsx "use client";
import { ToastContainer } from "react-toastify";
interface ToastProviderProps {
children: React.ReactNode;
}
export default function ToastProvider({ children }: ToastProviderProps) {
return (
<>
{children}
<ToastContainer />
</>
);
} I've put app/layout.tsx import { getUserFromSession } from "@/actions/auth";
import Navbar from "@/components/navbar.component";
import AuthProvider from "@/providers/auth.provider";
import ToastProvider from "@/providers/toast.provider";
import Link from "next/link";
import "./globals.css";
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const user = await getUserFromSession();
return (
<AuthProvider user={user}>
<html lang="en">
<body suppressHydrationWarning>
<ToastProvider>
<header className="bg-amber-400 h-16 flex items-center px-4 mb-4">
<Link href="/" className="text-2xl mr-4">
Fast Parcel
</Link>
<Navbar />
</header>
{children}
<footer className="text-center my-4">
© 2023 Fast Parcel
</footer>
</ToastProvider>
</body>
</html>
</AuthProvider>
);
} |
don't forget to import toast css ` import { ToastContainer } from "react-toastify"; interface ToastProviderProps { export default function ToastProvider({ children }: ToastProviderProps) { |
Simplest solution is to not even use "use client";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
export default function ToastContainerWrapper() {
return (
<ToastContainer position={toast.POSITION.BOTTOM_CENTER} theme="dark" />
);
} Example usage: export default function Layout({ children }: React.PropsWithChildren) {
return (
<div className={styles["component-default-layout"]}>
<aside>
<a href="/">Home</a>
<a href="/all">Everything list</a>
<a href="/movie/all">Movies table</a>
<a href="/person/all">People table</a>
</aside>
<main className="content">{children}</main>
<ToastContainerWrapper />
</div>
);
} |
@nokwin your I did exactly how you implemented it and it worked! |
I believe this is the best solution. Provider from @nokwin looks kinda redundant like for me |
@nokwin Won't including @MarcinSkic solution isolates the client rendering to just the toast wrapper, which would preferable for most cases. |
@rusty120 no, there can be server side rendered components as children of client side components, otherwise any ContextProvider would prevent most of the app from being SSR, you can find more information here: |
Report Bug
No toast shown
Nextjs 13
Install package
Import react-toastify css in /src/app/layout.tsx
Import and place it in JSX in /src/app/layout.tsx
Call toast("hi) in any page.
Toast should appear
Nextjs 13
Brave browser
The text was updated successfully, but these errors were encountered: