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_7CekL%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzc5NTAwODMzMQ%253D%253D.2-ccb7-5%26oh%3D00_AfAoESM80dO5toFuuNjlIAJgUrmJ5YFXOhh8HK3Ud0CXbg%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_rfYTn%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzYwMTkzNDQwOA%253D%253D.2-ccb7-5%26oh%3D00_AfCafueEj0TrfPNaUCkR-P4KHFQVbMTInYi8V6uXAtnl9A%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-WhLbs0AX9A8Iq9%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzc2MTMxNzA2NA%253D%253D.2-ccb7-5%26oh%3D00_AfB_lrmIlcQ_O44rq4fzcEVxUakgsht0tbJulBOsYeDI8Q%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%3DCjR3F69AFT0AX82Fz4x%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3Nzk3MzY5NjYzNjEzNQ%253D%253D.2-ccb7-5%26oh%3D00_AfDfLkAD9j5kkxeoJVfTaHFykLT9dFeXU8RXsSHKqFv0Dw%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_EAX8eYZsz%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODAyNDkwOTA5ODQ0Nw%253D%253D.2-ccb7-5%26oh%3D00_AfDj_qQFmybQe5fdR0EKU1FcnOVPVUwvb1WR1bqQmivO9w%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%3DqpNQQzwz1joAX9pKtG8%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODAyNDc5MTUyNjQ1NA%253D%253D.2-ccb7-5%26oh%3D00_AfAr0Y8o20YNYQAtswFy_ymFmaU3TUFgLD9dp_P6KNYxYg%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-kv2Kz%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODA3NjkxODUwMDQyOQ%253D%253D.2-ccb7-5%26oh%3D00_AfB3onJhWS8yNnlLAoFSrsT_uEX3M08kpxO3s5Yrjw3WrA%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-8SHJs%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODEyMDY3MzM3OTkyOA%253D%253D.2-ccb7-5%26oh%3D00_AfDL8A1HzQvXoeJ_aYIYUt4GONJXgZHYVEUgQUUMwz4gjQ%26oe%3D64CCE915%26_nc_sid%3D10d13b&w=3840&q=75)
this is auto generated content from ThreadsApp. see original at @gadingnst