How to do things like open toast or a flyer
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
New to NextJS, evaluating it for a next project, I mainly have experience with Vue SPA.
How to do things like open toast or a flyer in nextJS
Lets say, when a record is saved successfully (NextJS action) I want to open a toast with success message.
Or when a item is added to cart, i want to open the flyer that shows all the items in a cart
In typical SPA, i would have client side state, and on state change, i will open a flyer or a toast.
How is this generally done in NextJS
How to do things like open toast or a flyer in nextJS
Lets say, when a record is saved successfully (NextJS action) I want to open a toast with success message.
Or when a item is added to cart, i want to open the flyer that shows all the items in a cart
In typical SPA, i would have client side state, and on state change, i will open a flyer or a toast.
How is this generally done in NextJS
13 Replies
@Cuvier’s Dwarf Caiman New to NextJS, evaluating it for a next project, I mainly have experience with Vue SPA.
How to do things like open toast or a flyer in nextJS
Lets say, when a record is saved successfully (NextJS action) I want to open a toast with success message.
Or when a item is added to cart, i want to open the flyer that shows all the items in a cart
In typical SPA, i would have client side state, and on state change, i will open a flyer or a toast.
How is this generally done in NextJS
Double-striped Thick-knee
is this what you want, https://sonner.emilkowal.ski/
Cuvier’s Dwarf CaimanOP
Typical example is
- I have a root layout, with topnav, sidebar and main content area
- Topnav has a badge tht shows the items in cart
- sidebar has links to categories
- whenever user clicks any link, it changes the route, and list of products would be displayed
- from a product detail page, user can click to add to cart, and i want the item count in topnav to be updated + flyer to be opened
- I have a root layout, with topnav, sidebar and main content area
- Topnav has a badge tht shows the items in cart
- sidebar has links to categories
- whenever user clicks any link, it changes the route, and list of products would be displayed
- from a product detail page, user can click to add to cart, and i want the item count in topnav to be updated + flyer to be opened
@Double-striped Thick-knee Tht toast or flyer is just an example, i am looking for pattern, how this kind of things are done in nextjs
as i cant get my headover it yet, looks lke i am trained to think in terms of client side state managed with a store eg pinia
so far i have done apps, where client and server are totally seperate and talks over rest only
@Cuvier’s Dwarf Caiman Typical example is
- I have a root layout, with topnav, sidebar and main content area
- Topnav has a badge tht shows the items in cart
- sidebar has links to categories
- whenever user clicks any link, it changes the route, and list of products would be displayed
- from a product detail page, user can click to add to cart, and i want the item count in topnav to be updated + flyer to be opened
Double-striped Thick-knee
you can use a state management library to keep track of carts, and render the couter inside topnav based on that
Cuvier’s Dwarf CaimanOP
@Double-striped Thick-knee And what abt the case, when the cart state is managed on server session or database, not on client
when addToCart triggers a server action, how could i trigger the flyer to open, and fetch cart content from server ?
Cuvier’s Dwarf CaimanOP
Any hints?
@Cuvier’s Dwarf Caiman <@893972714547724368> And what abt the case, when the cart state is managed on server session or database, not on client
Double-striped Thick-knee
you can fetch the initial cart details inside the server components and pass it down to client components. and from then all the managements will happen client side like adding new items through server actions or api routes.
Cuvier’s Dwarf CaimanOP
so yes, i can expose api routes to add new item to cart and fetch current cart items
bt can a server action trigger a fetch from client to fetch the new items (after adding a new item to cart)
or it has to be managed on client only, like first add the item to cart and thn trigger fetch
Thts generally how we do with SPA, if we arent using nextjs
bt can a server action trigger a fetch from client to fetch the new items (after adding a new item to cart)
or it has to be managed on client only, like first add the item to cart and thn trigger fetch
Thts generally how we do with SPA, if we arent using nextjs
@Cuvier’s Dwarf Caiman so yes, i can expose api routes to add new item to cart and fetch current cart items
bt can a server action trigger a fetch from client to fetch the new items (after adding a new item to cart)
or it has to be managed on client only, like first add the item to cart and thn trigger fetch
Thts generally how we do with SPA, if we arent using nextjs
Double-striped Thick-knee
you can call server action to add new item and then return whatever you want from the function, such as (all items of the cart) or (just the item you added). and like I said before. you can use server component to pass carts data to client components. so you don't need to initially fetch carts data.
you can only use server actions to get current cart items, without calling the fetch function