guys, I’ve just made Cookies utility that compatible in Server Components, Client Components, and Server Actions 👀🔥
it just works with all Context in NextJS 13 appDir without problems🔥
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2F358538049_1004050077429615_7499467134445462838_n.jpg%3Fstp%3Ddst-jpg_e35%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D103%26_nc_ohc%3D7uUsBKob9N8AX-vaWAP%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzc5NTAwODMzMQ%253D%253D.2-ccb7-5%26oh%3D00_AfC23dBHocKIXGaVtpiUQkSyg4XFgVDGmARjayhJPJrc2w%26oe%3D64CE39AD%26_nc_sid%3D10d13b&w=1080&q=75)
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2F358160531_197394233289183_3511325675008045108_n.jpg%3Fstp%3Ddst-jpg_e35%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D103%26_nc_ohc%3DmOBMVBCKN4UAX_z4ZLY%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzYwMTkzNDQwOA%253D%253D.2-ccb7-5%26oh%3D00_AfBVbiePBLEeaiZIWaaN8OixFkJwpu5n19M9euT13I6uRw%26oe%3D64CDAC3B%26_nc_sid%3D10d13b&w=1080&q=75)
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2F357999415_1495656577842337_5822340522121170677_n.jpg%3Fstp%3Ddst-jpg_e35%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D101%26_nc_ohc%3DOE4z-WhLbs0AX94AECg%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzc2MTMxNzA2NA%253D%253D.2-ccb7-5%26oh%3D00_AfCwue8U9hRlduTqNepJJtvRDLHqS0BFR9aUEIk0nVu8rw%26oe%3D64CDCBAD%26_nc_sid%3D10d13b&w=1080&q=75)
first, we made an abstraction so that the Cookie utility between Server and Client has the same API.
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2F358389236_1980053765689196_8664965263972183886_n.jpg%3Fstp%3Ddst-jpg_e35%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D108%26_nc_ohc%3DCjR3F69AFT0AX-74W90%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3Nzk3MzY5NjYzNjEzNQ%253D%253D.2-ccb7-5%26oh%3D00_AfDyE-etja4fxkhiLc2pNS05MNDOOHg4qG9xdzUIBdo7WA%26oe%3D64CE1A9E%26_nc_sid%3D10d13b&w=3840&q=75)
then we create 2 different utilities between Server and Client with the BaseCookie blueprint that was created before.
in Cookie.server, it uses the default cookies utility from next/headers that only works on Server here is reference
in Cookie.client, we use js-cookie.
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2F358512981_994251984920774_4821090803014885890_n.jpg%3Fstp%3Ddst-jpg_e35%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D102%26_nc_ohc%3DOtGoxrk9o_EAX_ukwjL%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODAyNDkwOTA5ODQ0Nw%253D%253D.2-ccb7-5%26oh%3D00_AfCR9BIQk7sPCRh_GCtrMHjXWbS1QsROwhHdEgekvoAkug%26oe%3D64CD4A17%26_nc_sid%3D10d13b&w=640&q=75)
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2F358193366_1047833389491545_5410032134546821880_n.jpg%3Fstp%3Ddst-jpg_e35%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D105%26_nc_ohc%3DqpNQQzwz1joAX-PxxTh%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODAyNDc5MTUyNjQ1NA%253D%253D.2-ccb7-5%26oh%3D00_AfBh-L3Ab5wnc3S3yMlQ64dZv570V0u0E1usOnpSixsawg%26oe%3D64CD5FF5%26_nc_sid%3D10d13b&w=640&q=75)
finally, the function that can bridge between Cookie.server and Cookie.client 🔥
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2F358134740_1067552121290986_2034967163476874207_n.jpg%3Fstp%3Ddst-jpg_e35%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D110%26_nc_ohc%3DoONOHzX8-UwAX-Te7CX%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODA3NjkxODUwMDQyOQ%253D%253D.2-ccb7-5%26oh%3D00_AfDu80zgEnhLkBOplNvKhhuXnLGNdFSZakAwhcxerhlyew%26oe%3D64CDA6DF%26_nc_sid%3D10d13b&w=3840&q=75)
-
but, why use
require()?
why not import statement? I don’t know, when i use import statement, i get error like this. -
why not dynamic import? Man, I want to use Cookies just synchronously without thinking about Promises 🤯
so, that is 🚀
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.2885-15%2F358386426_854995602656368_4252189828551607525_n.jpg%3Fstp%3Ddst-jpg_e35%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D104%26_nc_ohc%3D-TSUpvw_x64AX_gT4zV%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODEyMDY3MzM3OTkyOA%253D%253D.2-ccb7-5%26oh%3D00_AfDXS-AjJxZaJSE1Iw9iAu5cuFev3d-Mzqqt9I1qa5U0_g%26oe%3D64CCE915%26_nc_sid%3D10d13b&w=3840&q=75)
this is auto generated content from ThreadsApp. see original at @gadingnst