That's a great question. You technically could, but if your code ever got moved inside of a Suspense boundary then it would all of a sudden stop working. So Next takes a hard line about setting cookies during render.
@@RyanToronto Thanks for the reply, yeah I am not a big fan of setting the cookies on the middleware only since it runs on every route. In this case I have token refreshing logic when entering some private routes implemented, so it would be nice to do this on the initial page render. Currently have no choice but to place it on the middleware.
I remember back in my PHP days we were constantly presented with "Headers already set" if we ever tried to set a cookie after the headers were set. Not sure why we can't be presented with the same error if we tried doing that
Great video! I struggled with this issue for a while and couldn’t figure out why it wasn’t working. Could you suggest a way to store the access token and refresh token in a server component? Specifically, while the server component is rendering, the access token might expire and need to be refreshed and stored again after obtaining a new one. Currently, I’ve used ioredis, but it’s not supported in middleware, and I don’t think it’s ideal for this use case. Is there a better solution that works with the Edge Runtime and allows setting cookies directly from the server component? Thanks again, Ryan!
Glad to hear the video helped! That's a tough one and I think it can be hard to solve. I've run into a whole bunch of node libraries that won't run on edge runtime as well. Usually what I do is setup a node server and then have my edge runtime code make fetch requests to that node app. Then the node app can talk to redis using ioredis. It adds an extra hop, but if the node app and next app are running close to each other you can minimize latency. I know it's not a great approach, but it's hard to find good solutions with edge runtime. Another option would be to find a redis server that can work with `fetch`, since fetch is the way to do IO in middleware today. Sorry to hear you're having trouble with middleware. I'd be very curious to know what kind of solution you come up with. I don't know how to solve these types of problems well.
@RyanToronto The concern is that we can't update cookie in the server component, so we can't store the tokens in cookie. At this moment, Redis comes into the picture, and Redis can be managed by using 'API and fetch' from middleware. Still, it doesn't feel like a good or optimal solution. I hope you will research more and come up with a good solution.😊
Check out the matching paths section of the Next.js docs to control which paths middleware should run on: nextjs.org/docs/app/building-your-application/routing/middleware#matching-paths
Great content, I really like the way you explain in such simple terms. Also noticed your @twofold/framework which seems great, have you thought on making a course on how something like that could be created?
All good ! but I have one doubt if I need to set the cookie not after the app initialisation(middleware) but rather after a function(server action) works, for example user authentication setting tokens , traditionally the cookies has to be set after the storage of user details in the database, So uh how to implement this particular method, any solutions
Great question! You can totally set a cookie in a server action! Once you write data to the database call cookies().set right inside the action. It should just work :)
A very great video. One issue I have faced and wish to understand, what about setting the expiry time for that cookie, lets say a userToke, which is essential so when it expires it can be cleared. Hope the question makes sense. Hoping to hear from you soon
Great question! You can use the `maxAge` or `expires` option from Next's cookies().set function. See more details here: nextjs.org/docs/app/api-reference/functions/cookies#options
Hi Ryan, Thanks for the detailed explanation on cookies. I am having one problem with cookies. I am setting cookies in middleware in response and setting of cookies will happen to particular route only. After setting the cookies, i am accessing the cookies in my navbar using next/headers. Every time i try to access the cookies i am getting old value and not the updated values that is being set in middle ware. Why is that? Can you please tell me what is the wrong here.
@@RyanToronto No, I didn’t try in minimal app. May be i will check it out. I want to know is that possible to get updated value which is being set in the cookies through middleware. Example: i added the middleware and inside it i am setting the cookies which is next url path. I added the config which is /about (so this middleware is run only in about page). Now when i access the about page, cookies will set through middleware, now i want to access that cookie in about page. Every time i try to access that cookie i get old value not newly set cookie through middleware.
but then, how do i set a cookie from my api ? like i would like to update the session ID of the user of my website, and i can't seem to find how to save a cookie on their browser with the session id from the api request... because : cookies().set( bla bla bla ) will just set the cookie for the response but then it gets lost
cookies.set should do it! Take a look at the docs, you might need some options like how long until it expires: nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
@@RyanToronto yes, already tried but the request comes from a server component so it only sets the cookie on the reply. Anyway i solved my problem so it doesnt really matter anymore, thanks for the help though :D
Hmm that's a good question! Could you make the API call in a middleware and use that to set the cookie? Then read it in the server component if you need the value
@@RyanToronto unfortunately thats not an option in my case, as I have a lot of APIs that will return a data needs to be stored in cookies, so I wonder what could be the best practice in that case?
How to get cookies from browser in server component/server actions so we can send the cookies with request to backend API request. Please 🙏 reply I'm not able to find any solution
You forget to say that Middleware slow down app because it rerender every time when you change a route. I am trying to set cookie without midlware but can't find solution
Sir，how do we implement theme switcher by using cookie so that when page gets refreshed users wont see a flicker/flash or a blank screen before theme got changed in nextjs 14 app router 🙏
Great question! For this one I think I'd read the cookie while rendering a server component and use that to control the theme. You can read more about reading cookies in Next.js here: nextjs.org/docs/app/api-reference/functions/cookies#cookiesgetname
You can read the cookie in server components, just can't set it. If you want to set it, you have to call server action from a client component. So if you want to set the cookie in a server component, you can use a Provider (client component) and pass the values you want to set to that provider so that it can call a server action to set the cookie.
Hey man ... I have a problem. i m using server actions to set cookies , with "use server" at top, i have created a actions directory in my-app , and have all my server side actions there. still i m facing this error. "" [Error]: Cookies can only be modified in a Server Action or Route Handler."". Actually my backend is in python (fastapi) and it worked fine last time , with same tech stack. this time i have made 2 routes also , for stripe webhook.., How can i solve this ...
Oh that's strange, setting cookies in server actions should absolutely work! I would try opening a bug report with a reproduction showing the error. Sorry I couldn't be of more help!
Hi, man. I have a problem with cookies. I have backend api(i dont want to use next as backend) and I want to send on my backend from my next app request when web site is loading I try do it on server components but in this case cookies are not transmitted(Cookies have refresh token and access token). How to slove it? Or do I need ti make a request from client component? Sorry for my English, I just started learning English :)
That's great english from someone who just started learning! I think I would read the cookie (and the refresh token) in Next.js and then pass it to the fetch() call that Next is making when talking to your backend. Give that a try and let me know how it goes!
@@RyanToronto Hi again, I understood how cookies works in nextjs, but now I have the problem is with the server components. For example, I try to get private data, if access token expired, I fetch refresh token to endpoint /refresh and if response is successfull I try set new tokens in cookies but like you said I can't set cookies from server components. What solution would you suggest? Or I need to fetch from client components?
This is awesome thanks… I was literally just working on this. I ran into an issue trying to encrypt the cookies. The crypto library isn’t available in middleware because of the edge runtime. But… the web api for crypto is available which I’m working on now.
@@RyanToronto no lol. Too hard. I’m already using a separate api written in golang that handles auth so I just wrote an endpoint that does the encryption (much easier in golang) - I call that in the middleware to give me the encrypted string I need to write a cookie. Works perfect for me.
Thanks! In order to use RSC you'll need a build tool, so it's more work than dropping a script tag into your HTML file. You could implement it yourself, but there's a lot involved. Right now Next.js is one of the best implementations of RSC.
That is such an awful reason why I cannot set cookies in the page server component. Why can I not set it before calling any Suspense? This solves the issue. And only if you using Suspense then I cannot set any cookies
I believe the reasoning is that if you ever refactor your page into one that uses suspense all the cookie code would then break. Middleware is a recommended way to do it from Next.js.
This is exactly why RSCs will never be used for real fully-fledged backends - its use-case will mainly be as a BFF and proxying to another api/backend server somewhere else
Using RSCs in BFF apps can work really well. I hope in the future as RSCs get used by more-and-more apps we'll be able to improve some of these APIs and make it easier to do all of the things that backend apps can do already. What kind of React apps are you working on these days? Do you have a BFF setup?
Such an undersubscribed channel.
Learned an insane amount from this video. Thank you for what you do, Ryan!
Ryan, this is a game changer explination. So glad I found this channel. So well broken down
Thanks!!!
This was very enlightening. Another place to set cookies is in route handlers!
Awesome insight.
This just saved me a huge stress of tinkering around.
Thanks Ryan, keep uploading we love your videos!
Glad to hear it! I've got a few more videos based around RSCs that will be coming soon!
Nice video! I got into this issue and never understood why I couldn’t do it
Glad you liked it!
Thanks man, you solved my bug because I got pissed of from last 2 days !!
Please bring more about react server components !!
Awesome glad it helped!
Thank you, I was actually watching this in a private window "doing some testing", I had to login just to like and sub.
Wow thanks for the kind words! Really appreciate it!
Why can't you send cookies on the initial page serve? Since you are sure that no additional streaming is happening for the initial HTML?
That's a great question. You technically could, but if your code ever got moved inside of a Suspense boundary then it would all of a sudden stop working. So Next takes a hard line about setting cookies during render.
@@RyanToronto Thanks for the reply, yeah I am not a big fan of setting the cookies on the middleware only since it runs on every route. In this case I have token refreshing logic when entering some private routes implemented, so it would be nice to do this on the initial page render. Currently have no choice but to place it on the middleware.
I remember back in my PHP days we were constantly presented with "Headers already set" if we ever tried to set a cookie after the headers were set. Not sure why we can't be presented with the same error if we tried doing that
Oh that's a very neat idea
a brilliant and advanced video. thank you
Glad you liked it!
Best explaination on earth. Thanks
Thank you!
Great video! I struggled with this issue for a while and couldn’t figure out why it wasn’t working. Could you suggest a way to store the access token and refresh token in a server component? Specifically, while the server component is rendering, the access token might expire and need to be refreshed and stored again after obtaining a new one.
Currently, I’ve used ioredis, but it’s not supported in middleware, and I don’t think it’s ideal for this use case. Is there a better solution that works with the Edge Runtime and allows setting cookies directly from the server component?
Thanks again, Ryan!
Glad to hear the video helped!
That's a tough one and I think it can be hard to solve. I've run into a whole bunch of node libraries that won't run on edge runtime as well. Usually what I do is setup a node server and then have my edge runtime code make fetch requests to that node app. Then the node app can talk to redis using ioredis. It adds an extra hop, but if the node app and next app are running close to each other you can minimize latency. I know it's not a great approach, but it's hard to find good solutions with edge runtime.
Another option would be to find a redis server that can work with `fetch`, since fetch is the way to do IO in middleware today.
Sorry to hear you're having trouble with middleware. I'd be very curious to know what kind of solution you come up with. I don't know how to solve these types of problems well.
@RyanToronto The concern is that we can't update cookie in the server component, so we can't store the tokens in cookie. At this moment, Redis comes into the picture, and Redis can be managed by using 'API and fetch' from middleware. Still, it doesn't feel like a good or optimal solution. I hope you will research more and come up with a good solution.😊
Very good video thank you!
But middleware is invoked for everyone request made from browser. Do we want to cookie-setting-logic to run on every request?
Check out the matching paths section of the Next.js docs to control which paths middleware should run on: nextjs.org/docs/app/building-your-application/routing/middleware#matching-paths
Great content, I really like the way you explain in such simple terms.
Also noticed your @twofold/framework which seems great, have you thought on making a course on how something like that could be created?
Thank you! Ya that's a great idea for a course. I think once React 19 is released there will be a great teaching story for RSC from scratch.
THANK YOU, this video really helped me.
Glad it helped!
All good !
but I have one doubt if I need to set the cookie not after the app initialisation(middleware) but rather after a function(server action) works, for example user authentication setting tokens , traditionally the cookies has to be set after the storage of user details in the database, So uh how to implement this particular method, any solutions
Great question! You can totally set a cookie in a server action! Once you write data to the database call cookies().set right inside the action. It should just work :)
@RyanToronto will try it out
what if we want to save data gotten from our backend server to cookies how do we do that with the nextjs middleware?
I believe you can fetch data from your backend inside of the middleware function, then use that to set the cookie.
Ohh alright thanks@@RyanToronto
@@RyanToronto i would still love a platform to discuss with you on some other questions i have, where can i dm you ?
can you share how to set the cookie in server using route handlers?
Check out these Next.js docs: nextjs.org/docs/app/building-your-application/routing/route-handlers#cookies
Ryan this is really good information 👌
A very great video. One issue I have faced and wish to understand, what about setting the expiry time for that cookie, lets say a userToke, which is essential so when it expires it can be cleared. Hope the question makes sense. Hoping to hear from you soon
Great question! You can use the `maxAge` or `expires` option from Next's cookies().set function. See more details here: nextjs.org/docs/app/api-reference/functions/cookies#options
Hi Ryan,
Thanks for the detailed explanation on cookies.
I am having one problem with cookies.
I am setting cookies in middleware in response and setting of cookies will happen to particular route only. After setting the cookies, i am accessing the cookies in my navbar using next/headers. Every time i try to access the cookies i am getting old value and not the updated values that is being set in middle ware.
Why is that? Can you please tell me what is the wrong here.
Hmm, sounds like there might be a bug somewhere! Have you tried making a minimal reproduction that highlights the issue?
@@RyanToronto No, I didn’t try in minimal app.
May be i will check it out.
I want to know is that possible to get updated value which is being set in the cookies through middleware.
Example: i added the middleware and inside it i am setting the cookies which is next url path. I added the config which is /about (so this middleware is run only in about page). Now when i access the about page, cookies will set through middleware, now i want to access that cookie in about page. Every time i try to access that cookie i get old value not newly set cookie through middleware.
but then, how do i set a cookie from my api ? like i would like to update the session ID of the user of my website, and i can't seem to find how to save a cookie on their browser with the session id from the api request... because :
cookies().set( bla bla bla ) will just set the cookie for the response but then it gets lost
cookies.set should do it! Take a look at the docs, you might need some options like how long until it expires: nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
@@RyanToronto yes, already tried but the request comes from a server component so it only sets the cookie on the reply. Anyway i solved my problem so it doesnt really matter anymore, thanks for the help though :D
@@akopaaa How did you manage to solve it?
bruh godly content
So how you can set a cookie based on a third-party API response you called inside your server component?
Hmm that's a good question! Could you make the API call in a middleware and use that to set the cookie? Then read it in the server component if you need the value
@@RyanToronto unfortunately thats not an option in my case, as I have a lot of APIs that will return a data needs to be stored in cookies, so I wonder what could be the best practice in that case?
How about if you do Cookie Banner for asking permission for users to use cookies.
For a cookie banner use a server action to set the cookie when they click the accept button.
Thanks for sharing man!
How to get cookies from browser in server component/server actions so we can send the cookies with request to backend API request.
Please 🙏 reply I'm not able to find any solution
cookies().get('name') should allow your server component to get cookies from the incoming browser request.
And RSC's can be rendered at build time in some cases.
Yup great point!
You forget to say that Middleware slow down app because it rerender every time when you change a route. I am trying to set cookie without midlware but can't find solution
Do you finded some solution?
Sir，how do we implement theme switcher by using cookie so that when page gets refreshed users wont see a flicker/flash or a blank screen before theme got changed in nextjs 14 app router 🙏
Great question! For this one I think I'd read the cookie while rendering a server component and use that to control the theme. You can read more about reading cookies in Next.js here: nextjs.org/docs/app/api-reference/functions/cookies#cookiesgetname
You can read the cookie in server components, just can't set it. If you want to set it, you have to call server action from a client component. So if you want to set the cookie in a server component, you can use a Provider (client component) and pass the values you want to set to that provider so that it can call a server action to set the cookie.
@@prohacker5086 Thank you for the reply, it would be best illustrated with a sample codes 🥰
Hey man ... I have a problem.
i m using server actions to set cookies , with "use server" at top, i have created a actions directory in my-app , and have all my server side actions there.
still i m facing this error. "" [Error]: Cookies can only be modified in a Server Action or Route Handler."".
Actually my backend is in python (fastapi) and it worked fine last time , with same tech stack.
this time i have made 2 routes also , for stripe webhook..,
How can i solve this ...
Oh that's strange, setting cookies in server actions should absolutely work! I would try opening a bug report with a reproduction showing the error. Sorry I couldn't be of more help!
Why haven't you imported the cookies fron next?
I'm not sure what you mean? This video initially uses next cookies, and then uses next middleware to solve the problem.
You import cookies from twofold/framework/cookies, why not from nextjs? import {cookies} from next/headers @@RyanToronto
Subscribed, can I protect routes with Middleware using encrypted user data stored in Cookies? thanks a lot and keep up the good work.
I think so! I would need to hear more, but I think signed cookies that are verified in middleware is a great place to start!
Thank you
Hi, man. I have a problem with cookies. I have backend api(i dont want to use next as backend) and I want to send on my backend from my next app request when web site is loading I try do it on server components but in this case cookies are not transmitted(Cookies have refresh token and access token). How to slove it? Or do I need ti make a request from client component? Sorry for my English, I just started learning English :)
That's great english from someone who just started learning!
I think I would read the cookie (and the refresh token) in Next.js and then pass it to the fetch() call that Next is making when talking to your backend. Give that a try and let me know how it goes!
@@RyanToronto thank you, i will try it)
@@RyanToronto Hi again, I understood how cookies works in nextjs, but now I have the problem is with the server components. For example, I try to get private data, if access token expired, I fetch refresh token to endpoint /refresh and if response is successfull I try set new tokens in cookies but like you said I can't set cookies from server components. What solution would you suggest? Or I need to fetch from client components?
This is awesome thanks… I was literally just working on this.
I ran into an issue trying to encrypt the cookies. The crypto library isn’t available in middleware because of the edge runtime. But… the web api for crypto is available which I’m working on now.
Nice! Did the web api end up working out for you?
@@RyanToronto no lol. Too hard. I’m already using a separate api written in golang that handles auth so I just wrote an endpoint that does the encryption (much easier in golang) - I call that in the middleware to give me the encrypted string I need to write a cookie. Works perfect for me.
Thank you!
Can we use server components without next.js or implementing it ourselves? I mean, with pure React running react-scripts. Great vid.
Thanks! In order to use RSC you'll need a build tool, so it's more work than dropping a script tag into your HTML file. You could implement it yourself, but there's a lot involved. Right now Next.js is one of the best implementations of RSC.
That is such an awful reason why I cannot set cookies in the page server component. Why can I not set it before calling any Suspense? This solves the issue. And only if you using Suspense then I cannot set any cookies
I believe the reasoning is that if you ever refactor your page into one that uses suspense all the cookie code would then break. Middleware is a recommended way to do it from Next.js.
Really good video!
thanks
Great tutorial. you should start an ASMR channel! voice is so relaxing.😅
This is exactly why RSCs will never be used for real fully-fledged backends - its use-case will mainly be as a BFF and proxying to another api/backend server somewhere else
Whats BFF?
@@sadiqshaik4064 backend for frontend
@@sadiqshaik4064"Backend For Frontend"
Using RSCs in BFF apps can work really well.
I hope in the future as RSCs get used by more-and-more apps we'll be able to improve some of these APIs and make it easier to do all of the things that backend apps can do already.
What kind of React apps are you working on these days? Do you have a BFF setup?
@@sadiqshaik4064backend for front end kind of a middle ground between a backend server and the front end.
Thank you 👌