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%3D7uUsBKob9N8AX96X9WR%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzc5NTAwODMzMQ%253D%253D.2-ccb7-5%26oh%3D00_AfDmuNBsc8I8MpW-PF2eVj9PWvPWJXvyivlgUTEhFZ6n3g%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%3DmOBMVBCKN4UAX8WcBfD%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzYwMTkzNDQwOA%253D%253D.2-ccb7-5%26oh%3D00_AfDmVkKsb-jsV6IvamDYuUQOsawtrBoJThtfemL1U8rDSQ%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-WhLbs0AX_ao5DM%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzc2MTMxNzA2NA%253D%253D.2-ccb7-5%26oh%3D00_AfDu2iP5esLcogSfnaufSp9kOUS7VpY_6gHnSpAov9KD6g%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%3DCjR3F69AFT0AX8Ry4de%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3Nzk3MzY5NjYzNjEzNQ%253D%253D.2-ccb7-5%26oh%3D00_AfDzVZYonasEg37Ry3uFnuM1aRjherWWU2FNfsayNv4Bxg%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_EAX8s1K2C%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODAyNDkwOTA5ODQ0Nw%253D%253D.2-ccb7-5%26oh%3D00_AfBsn5yjhX6GqeZD_qfnyY7zdlZWH_qEDawljyt3BzuH6Q%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_QhUDx%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODAyNDc5MTUyNjQ1NA%253D%253D.2-ccb7-5%26oh%3D00_AfBlJd0H8u2ogrWjd9MOF--TbgPv0NNFrlHdDvoyCs5JdQ%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-UwAX8QVh2b%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODA3NjkxODUwMDQyOQ%253D%253D.2-ccb7-5%26oh%3D00_AfChPb2-PCAQcENLiY1nfB9OhTk4DOseqGzFn6f8yDS7lg%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_er3rG%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODEyMDY3MzM3OTkyOA%253D%253D.2-ccb7-5%26oh%3D00_AfDDv9wLhYtFQPvwLxXypv2erPiXfr35egSp-RLryXiq_w%26oe%3D64CCE915%26_nc_sid%3D10d13b&w=3840&q=75)
this is auto generated content from ThreadsApp. see original at @gadingnst