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?
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.
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
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.
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
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.
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!
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
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
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.
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?
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?
