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.29350-15%2F358538049_1004050077429615_7499467134445462838_n.jpg%3Fstp%3Ddst-jpg_e35%26efg%3DeyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xMjgweDEwNTguc2RyIn0%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D103%26_nc_ohc%3DdoRrvjaalC4AX_Hai8F%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzc5NTAwODMzMQ%253D%253D.2-ccb7-5%26oh%3D00_AfCCB9FwutqvX1uXWQyN6IgkgMwMtR4OuPcn_flXwQKwLA%26oe%3D65EF7790%26_nc_sid%3D10d13b&w=1080&q=75)
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.29350-15%2F358160531_197394233289183_3511325675008045108_n.jpg%3Fstp%3Ddst-jpg_e35%26efg%3DeyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xMjgweDkxNy5zZHIifQ%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D103%26_nc_ohc%3DOU0vfogViMoAX9fyisw%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzYwMTkzNDQwOA%253D%253D.2-ccb7-5%26oh%3D00_AfBTzYd9iVE6E0uIJfaYNZdl4OJpMevhpZgvcQUEjiFK0A%26oe%3D65EE167D%26_nc_sid%3D10d13b&w=1080&q=75)
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.29350-15%2F357999415_1495656577842337_5822340522121170677_n.jpg%3Fstp%3Ddst-jpg_e35%26efg%3DeyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xMjgweDg2Ni5zZHIifQ%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D101%26_nc_ohc%3DTUVl3ufy-4oAX8u-Ioo%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3NzkxNzc2MTMxNzA2NA%253D%253D.2-ccb7-5%26oh%3D00_AfALwXQ-hQEtN2N9eeS76PJvDlxzyLfmn0kFDdyZuj0hzQ%26oe%3D65EE2E50%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.29350-15%2F358389236_1980053765689196_8664965263972183886_n.jpg%3Fstp%3Ddst-jpg_e35%26efg%3DeyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xMjgweDExNTYuc2RyIn0%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D108%26_nc_ohc%3DXEBDo04OJAsAX_Bw_zA%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3Nzk3MzY5NjYzNjEzNQ%253D%253D.2-ccb7-5%26oh%3D00_AfB_p5gZHB7f99bDI_2v2NugDeElGktPQxo1IYTYpPR6dw%26oe%3D65EC8C7F%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.29350-15%2F358512981_994251984920774_4821090803014885890_n.jpg%3Fstp%3Ddst-jpg_e35%26efg%3DeyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi43NTR4MTI4MC5zZHIifQ%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D102%26_nc_ohc%3DNjNM8jafZjEAX-8HMy-%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODAyNDkwOTA5ODQ0Nw%253D%253D.2-ccb7-5%26oh%3D00_AfC_Co6WNbSJTt7D0-DxhCp2ALG7_g7GRHuBg-n6MoOsxg%26oe%3D65EE6151%26_nc_sid%3D10d13b&w=640&q=75)
![Content Image](/_next/image?url=https%3A%2F%2Fscontent.cdninstagram.com%2Fv%2Ft51.29350-15%2F358193366_1047833389491545_5410032134546821880_n.jpg%3Fstp%3Ddst-jpg_e35%26efg%3DeyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi43MjJ4MTI4MC5zZHIifQ%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D105%26_nc_ohc%3D4X4XnbQztEQAX8yNek4%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODAyNDc5MTUyNjQ1NA%253D%253D.2-ccb7-5%26oh%3D00_AfA4scW3YdjCYj28Wj6sX_53SYCLcNv4GoA5KOlmDOKFtw%26oe%3D65EF0F98%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.29350-15%2F358134740_1067552121290986_2034967163476874207_n.jpg%3Fstp%3Ddst-jpg_e35%26efg%3DeyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xMjgweDkxMS5zZHIifQ%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D110%26_nc_ohc%3DrZO7ud5OCnIAX8ZJexn%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODA3NjkxODUwMDQyOQ%253D%253D.2-ccb7-5%26oh%3D00_AfDEtaa8jCeb8gnDR-hJybcyj20QCzAx7YGmIH4yNMGkGQ%26oe%3D65EDA07E%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%26efg%3DeyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xMjAweDYwOC5zZHIifQ%26_nc_ht%3Dscontent.cdninstagram.com%26_nc_cat%3D104%26_nc_ohc%3DKk1RHxaWsX8AX9ehwR6%26edm%3DAPs17CUBAAAA%26ccb%3D7-5%26ig_cache_key%3DMzE0MTk3ODEyMDY3MzM3OTkyOA%253D%253D.2-ccb7-5%26oh%3D00_AfCQAQCLJ7giLtPwwZhFxfOgJRYL9ATWQkrhLFUThDSqKg%26oe%3D65EDA195%26_nc_sid%3D10d13b&w=3840&q=75)
this is auto generated content from ThreadsApp. see original at @gadingnst