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
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?
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.
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
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.
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!
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
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
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?
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.
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
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?
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.
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
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!
This was very enlightening. Another place to set cookies is in route handlers!
Ryan, this is a game changer explination. So glad I found this channel. So well broken down
Thanks!!!
Nice video! I got into this issue and never understood why I couldn’t do it
Glad you liked it!
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!
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!
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
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, 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!
Very good video thank you!
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 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
Best explaination on earth. Thanks
Thank you!
a brilliant and advanced video. thank you
Glad you liked it!
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.
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!
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
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.
Great tutorial. you should start an ASMR channel! voice is so relaxing.😅
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?
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.
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, this video really helped me.
Glad it helped!
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?
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.
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?
Thanks for sharing man!
And RSC's can be rendered at build time in some cases.
Yup great point!
Ryan this is really good information 👌
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 ?
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
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 🥰
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?
Thank 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
Really good video!
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
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.