{"id":3137,"date":"2022-04-05T13:34:43","date_gmt":"2022-04-05T08:04:43","guid":{"rendered":"https:\/\/explore.techenutia.com\/?p=3137"},"modified":"2022-04-05T13:34:43","modified_gmt":"2022-04-05T08:04:43","slug":"use-next-cookies-to-use-token-in-getserversideprops","status":"publish","type":"post","link":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/","title":{"rendered":"Use next cookies to use token in getserversideprops"},"content":{"rendered":"\n

next-cookies is not just an npm package. It’s a life saviour. This package solved a big problem that NextJS developer faced. Browser storage in all SSR, SSG functions. The most common use case for accessing cookies in getServerSideProps is when you want to fetch data from an API that requires token. <\/p>\n\n\n\n

In order to give token to a page you can pass it in query but that not secure. If you store it in localStorage you can’t access it in getServerSideProps. But, if you store the token in cookies using next-cookies you can access it everywhere in your app. Let’s write a few lines of code<\/p>\n\n\n\n

npm i -g next-cookies
import cookies from 'next-cookies'
Const {token} = cookies(context)
document.cookie = `foo=bar; path=\/`;<\/pre>\n\n\n\n
First line you will write in terminal to install the package. Second line to import the cookies function wherever required. And third is in getserversideprops you pass context and you destructure the token from it. Use 4th line to set cookie. And if you wish to delete a cookie just set Max age 0. <\/p>\n\n\n\n
That’s it for today’s lesson. Checkout the official documentation<\/a> for more detailed reference<\/p>\n","protected":false},"excerpt":{"rendered":"
next-cookies is not just an npm package. It’s a life saviour. This package solved a big problem that NextJS developer faced. Browser storage in all SSR, SSG functions. The most common use case for accessing cookies in getServerSideProps is when you want to fetch data from an API that requires…<\/p>\n
Read the postUse next cookies to use token in getserversideprops<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":3237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[205],"tags":[415,676,801,803],"class_list":["post-3137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-moments","tag-cookies","tag-javascript","tag-next-cookies","tag-nextjs","excerpt","zoom","full-without-featured","even","excerpt-0"],"yoast_head":"\nUse next cookies to use token in getserversideprops | ManOrInfinity<\/title>\n<meta name=\"description\" content=\"NextJS is quite a complex thing. But, vercel keeps making it easier. Accessing Cookies in NextJS is very easy using next-cookies npm package.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Use next cookies to use token in getserversideprops\" \/>\n<meta property=\"og:url\" content=\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/\" \/>\n<meta property=\"og:site_name\" content=\"ManOrInfinity\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-05T08:04:43+00:00\" \/>\n<meta name=\"author\" content=\"manorinfinity\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@manorinfinity\" \/>\n<meta name=\"twitter:site\" content=\"@manorinfinity\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"manorinfinity\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/\"},\"author\":{\"name\":\"manorinfinity\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"headline\":\"Use next cookies to use token in getserversideprops\",\"datePublished\":\"2022-04-05T08:04:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/\"},\"wordCount\":180,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"image\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#primaryimage\"},\"thumbnailUrl\":\"\",\"keywords\":[\"cookies\",\"JavaScript\",\"next cookies\",\"nextjs\"],\"articleSection\":[\"CodeMoments\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/\",\"url\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/\",\"name\":\"Use next cookies to use token in getserversideprops | ManOrInfinity\",\"isPartOf\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2022-04-05T08:04:43+00:00\",\"description\":\"NextJS is quite a complex thing. But, vercel keeps making it easier. Accessing Cookies in NextJS is very easy using next-cookies npm package.\",\"breadcrumb\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/manorinfinity.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Use next cookies to use token in getserversideprops\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#website\",\"url\":\"https:\/\/manorinfinity.com\/blog\/\",\"name\":\"ManOrInfinity\",\"description\":\"Thrive towards greatness\",\"publisher\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/manorinfinity.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901\",\"name\":\"manorinfinity\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png\",\"contentUrl\":\"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png\",\"width\":282,\"height\":260,\"caption\":\"manorinfinity\"},\"logo\":{\"@id\":\"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Complex Problem Solver, Outloud Thinker, An Outstanding Writer, and a very curious human being\",\"sameAs\":[\"http:\/\/manorinfinity.com\"],\"url\":\"https:\/\/manorinfinity.com\/blog\/author\/manorinfinity\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Use next cookies to use token in getserversideprops | ManOrInfinity","description":"NextJS is quite a complex thing. But, vercel keeps making it easier. Accessing Cookies in NextJS is very easy using next-cookies npm package.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/","og_locale":"en_US","og_type":"article","og_title":"Use next cookies to use token in getserversideprops","og_url":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/","og_site_name":"ManOrInfinity","article_published_time":"2022-04-05T08:04:43+00:00","author":"manorinfinity","twitter_card":"summary_large_image","twitter_creator":"@manorinfinity","twitter_site":"@manorinfinity","twitter_misc":{"Written by":"manorinfinity","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#article","isPartOf":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/"},"author":{"name":"manorinfinity","@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"headline":"Use next cookies to use token in getserversideprops","datePublished":"2022-04-05T08:04:43+00:00","mainEntityOfPage":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/"},"wordCount":180,"commentCount":0,"publisher":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"image":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#primaryimage"},"thumbnailUrl":"","keywords":["cookies","JavaScript","next cookies","nextjs"],"articleSection":["CodeMoments"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/","url":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/","name":"Use next cookies to use token in getserversideprops | ManOrInfinity","isPartOf":{"@id":"https:\/\/manorinfinity.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#primaryimage"},"image":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#primaryimage"},"thumbnailUrl":"","datePublished":"2022-04-05T08:04:43+00:00","description":"NextJS is quite a complex thing. But, vercel keeps making it easier. Accessing Cookies in NextJS is very easy using next-cookies npm package.","breadcrumb":{"@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/manorinfinity.com\/blog\/2022\/04\/05\/use-next-cookies-to-use-token-in-getserversideprops\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/manorinfinity.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Use next cookies to use token in getserversideprops"}]},{"@type":"WebSite","@id":"https:\/\/manorinfinity.com\/blog\/#website","url":"https:\/\/manorinfinity.com\/blog\/","name":"ManOrInfinity","description":"Thrive towards greatness","publisher":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/manorinfinity.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/1172b1895b5eb7e49cc8640e49255901","name":"manorinfinity","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/","url":"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png","contentUrl":"http:\/\/manorinfinity.com\/wp-content\/uploads\/2023\/06\/moi-logo.png","width":282,"height":260,"caption":"manorinfinity"},"logo":{"@id":"https:\/\/manorinfinity.com\/blog\/#\/schema\/person\/image\/"},"description":"Complex Problem Solver, Outloud Thinker, An Outstanding Writer, and a very curious human being","sameAs":["http:\/\/manorinfinity.com"],"url":"https:\/\/manorinfinity.com\/blog\/author\/manorinfinity\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/comments?post=3137"}],"version-history":[{"count":0,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/posts\/3137\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/media?parent=3137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/categories?post=3137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/manorinfinity.com\/blog\/wp-json\/wp\/v2\/tags?post=3137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}