var Component=(()=>{var d=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),y=(a,n)=>{for(var s in n)l(a,s,{get:n[s],enumerable:!0})},o=(a,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of h(n))!N.call(a,c)&&c!==s&&l(a,c,{get:()=>n[c],enumerable:!(t=m(n,c))||t.enumerable});return a};var g=(a,n,s)=>(s=a!=null?d(u(a)):{},o(n||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>o(l({},"__esModule",{value:!0}),a);var r=k((P,i)=>{i.exports=_jsx_runtime});var I={};y(I,{default:()=>b,frontmatter:()=>w});var e=g(r()),w={title:"Exploring NextJS",date:"2024-06-10",lastmod:"2024-06-10",tags:["javascript","typescript","react","nextjs"],summary:"Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.",layout:"PostSimple"};function p(a){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",ul:"ul",li:"li",strong:"strong",em:"em",code:"code",div:"div",pre:"pre",h3:"h3"},a.components),{Image:s}=n;return s||_("Image",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"introduction",children:[(0,e.jsx)(n.a,{href:"#introduction","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),(0,e.jsx)(n.p,{children:"This is a dummy page for now, which contains all the future components for a good blog post. You can think of it as a template or example."}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:["Lorem ipsum ",(0,e.jsx)(n.strong,{children:"dolor"})," sit amet, consectetur 1adipiscing elit."]}),(0,e.jsxs)(n.li,{children:["Aliquam sit amet erat auctor, tempor tellus sit amet, iaculis risus. In a dui ",(0,e.jsx)(n.em,{children:"convallis"}),", fermentum sem at, tempor odio."]}),(0,e.jsxs)(n.li,{children:["Nulla euismod lacus eu ipsum tristique, ",(0,e.jsx)(n.code,{children:"sed posuere felis aliquam"}),"."]})]}),(0,e.jsx)(n.div,{children:(0,e.jsx)(s,{alt:"Diagram Module In NestJS",src:"/static/images/blogs/module-in-nestjs.png",width:"901",height:"361"})}),(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"useSWR"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'swr'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Spotify"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'public/static/icons/spotify.svg'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," fetcher ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@/utils/fetcher'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," type ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"SpotifyNowPlayingData"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@/types/index'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MusicBar"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@/components/homepage/MusicBar'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function function-variable",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"SpotifyNowPlaying"})})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator arrow",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," response ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useSWR"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'/api/spotify'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," fetcher",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," songUrl",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," title",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," artist ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"data"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"as"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"SpotifyNowPlayingData"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"my-3 flex max-w-[540px] items-center gap-2 rounded bg-gray-200 px-3 py-2 shadow-md dark:bg-[#24283b] dark:shadow-gray-800/40"'}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Spotify"})," className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"w-6 flex-shrink-0 text-spotify"'})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"inline-flex truncate"'}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"songUrl ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MusicBar"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),`a `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"ml-2 font-medium dark:text-gray-200 "'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" href",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"songUrl",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" target",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"_blank"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" rel",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"noopener noreferrer"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" title",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"title",(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:" - "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"artist ",(0,e.jsx)(n.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'Spotify'"}),(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"title",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"a",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"p className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"font-medium dark:text-gray-200"'}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Not"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Playing"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"p",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"span className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"mx-2 dark:text-gray-300"'}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token string",children:"' \u2013 '"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"span",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"p className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:'"max-w-max truncate dark:text-gray-300"'}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"artist ",(0,e.jsx)(n.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'Spotify'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"p",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"SpotifyNowPlaying"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"neque-porro-quisquam-est",children:[(0,e.jsx)(n.a,{href:"#neque-porro-quisquam-est","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Neque porro quisquam est"]}),(0,e.jsxs)(n.h3,{id:"qui-dolorem-ipsum-quia-dolor",children:[(0,e.jsx)(n.a,{href:"#qui-dolorem-ipsum-quia-dolor","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Qui dolorem ipsum quia dolor"]}),(0,e.jsxs)(n.ul,{children:[(0,e.jsxs)(n.li,{children:["Lorem ipsum ",(0,e.jsx)(n.strong,{children:"dolor"})," sit amet, consectetur 1adipiscing elit."]}),(0,e.jsxs)(n.li,{children:["Aliquam sit amet erat auctor, tempor tellus sit amet, iaculis risus. In a dui ",(0,e.jsx)(n.em,{children:"convallis"}),", fermentum sem at, tempor odio."]}),(0,e.jsxs)(n.li,{children:["Nulla euismod lacus eu ipsum tristique, ",(0,e.jsx)(n.code,{children:"sed posuere felis aliquam"}),"."]})]}),(0,e.jsx)(n.pre,{className:"language-javascript",children:(0,e.jsxs)(n.code,{className:"language-javascript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"fetch"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'isomorphic-unfetch'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token constant",children:"SPOTIFY_TOKEN_API"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token constant",children:"SPOTIFY_NOW_PLAYING_API"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token constant",children:"SPOTIFY_TOP_TRACKS_API"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@/constants/index'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token constant",children:"SPOTIFY_CLIENT_ID"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," client_id",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token constant",children:"SPOTIFY_CLIENT_SECRET"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," client_secret",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token constant",children:"SPOTIFY_REFRESH_TOKEN"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," refresh_token",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," process",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"env"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," basic ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Buffer"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token keyword module",children:"from"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"client_id",(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:":"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"client_secret",(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function property-access method",children:"toString"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'base64'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAccessToken"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," response ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"fetch"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token constant",children:"SPOTIFY_TOKEN_API"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property literal-property",children:"method"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'POST'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property literal-property",children:"headers"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property literal-property",children:"Authorization"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"Basic "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"basic",(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property string-property",children:"'Content-Type'"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'application/x-www-form-urlencoded'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property literal-property",children:"body"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"URLSearchParams"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property literal-property",children:"grant_type"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'refresh_token'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" refresh_token",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function property-access method",children:"json"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getSpotifyNowPlaying"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," access_token ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAccessToken"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," url ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"URL"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token constant",children:"SPOTIFY_NOW_PLAYING_API"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" url",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"searchParams"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function property-access method",children:"append"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'additional_types'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token string",children:"'track,episode'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token function",children:"fetch"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"url",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function property-access method",children:"toString"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property literal-property",children:"headers"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token property literal-property",children:"Authorization"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"Bearer "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"${"}),"access_token",(0,e.jsx)(n.span,{className:"token punctuation interpolation-punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string template-punctuation",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),(0,e.jsxs)(n.h2,{id:"conclusion",children:[(0,e.jsx)(n.a,{href:"#conclusion","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),(0,e.jsxs)(n.ul,{children:[(0,e.jsx)(n.li,{children:"Mauris vulputate nibh id augue mollis gravida."}),(0,e.jsx)(n.li,{children:"Nullam dapibus id erat sed posuere."}),(0,e.jsx)(n.li,{children:"Nam a est ut quam varius auctor a non neque."}),(0,e.jsx)(n.li,{children:"Curabitur sagittis pretium libero vitae ullamcorper."})]}),(0,e.jsxs)(n.h2,{id:"references",children:[(0,e.jsx)(n.a,{href:"#references","aria-hidden":"true",tabIndex:"-1",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"References"]}),(0,e.jsx)(n.ul,{children:(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://nextjs.org/docs",children:"Overview of Next.js"})})})]})}function x(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var b=x;function _(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(I);})(); ;return Component;

react (1)

Tag: React

Exploring NextJS