I am currently working with Next.js 14 and utilizing the app router for my project.
Within my application, I have two server components:
- A List page located at
/products, which displays multiple products - A Product Details page located at
/products/{id}.
On the /products/{id} page, I perform a check to see if the specific id exists in my products database using a server action and then proceed to display the product details.
In cases where the product is not found, my intention is to redirect the user back to the /products page and display a toast message indicating that the product could not be located.
The redirection process is straightforward:
import { redirect } from 'next/navigation'
async function getNoProduct() {
return null
}
export default async function RedirectFromPage() {
let res = await getNoProduct()
if (!res === null) {
redirect('/products')
}
return (
<div>
<p>Hello SO</p>
</div>
)
}
However, I am facing challenges when trying to implement the toast message (using sonner toast via shadcn).
Directly adding the toast as shown below does not work because /products/{id} is a server component and the toast functionality relies on useEffect:
import { redirect } from 'next/navigation'
import { useToast } from '@/components/ui/use-toast'
async function getNoProduct() {
return null
}
export default async function RedirectFromPage() {
const { toast } = useToast()
let res = await getNoProduct()
if (!res === null) {
// Show toast
toast({
title: 'Error',
description: 'Product not found',
})
redirect('/products')
}
return (
<div>
<p>Hello SO</p>
</div>
)
}
This setup will result in an error stating:
Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-componentAfter looking into a similar question regarding server actions on Stack Overflow (here), I considered using cookies to communicate the error back to the /products page and then render a client component that includes the toast feature. However, I encountered issues due to the fact that these server actions can only be triggered from a client component (source).
Given this situation, how should I approach integrating the toast functionality? Is using toast simply not suitable for this scenario, or is there a more effective way to achieve this desired outcome?