var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var g=(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})},i=(a,n,s,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of u(n))!k.call(a,t)&&t!==s&&l(a,t,{get:()=>n[t],enumerable:!(c=m(n,t))||c.enumerable});return a};var f=(a,n,s)=>(s=a!=null?h(N(a)):{},i(n||!a||!a.__esModule?l(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>i(l({},"__esModule",{value:!0}),a);var r=g((I,o)=>{o.exports=_jsx_runtime});var x={};y(x,{default:()=>S});var e=f(r());function p(a){let n=Object.assign({h2:"h2",a:"a",span:"span",p:"p",ul:"ul",li:"li",pre:"pre",code:"code"},a.components),{Image:s,Ads:c}=n;return c||d("Ads",!0),s||d("Image",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.h2,{id:"introduction",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#introduction",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,e.jsx)(n.p,{children:"Who doesn't know steam? The most popular digital distribution platform for PC gaming with huge discounts during the steam summer sale or steam winter sale \u{1F923}\u{1F923}\u{1F923}"}),` `,(0,e.jsx)(s,{alt:"Steam now playing - Meme about Steam",src:"/jagad.dev/posts/steam-now-playing/Steam_Meme_mdaqaq.jpg",width:"500",height:"649"}),` `,(0,e.jsx)(n.p,{children:"Despite its large user base, several people are unaware that Steam also offers a free application programming interface (API) called Steam Web API, which allows you to access the data of your games and playtime."}),` `,(0,e.jsx)(n.p,{children:"Steam Web API is used on my website to display information about my gaming activities, such as online status, currently playing games, playing hours, etc."}),` `,(0,e.jsx)(s,{alt:"Steam now playing - Demo",src:"/jagad.dev/posts/steam-now-playing/ezgif-4-45c79688ce_ry2iuz.gif",width:"800",height:"425"}),` `,(0,e.jsx)(n.p,{children:"In this post, I'll explain how to use Next.js to display now playing steam on your website."}),` `,(0,e.jsxs)(n.h2,{id:"what-is-steam-api",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-is-steam-api",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"What Is Steam API"]}),` `,(0,e.jsx)(n.p,{children:"Steam Web API is an HTTP based web that can be used to access many Steam features for display on websites. The API is accessed using an HTTP request with the output of three different formats: JSON, XML, and VDF."}),` `,(0,e.jsxs)(n.h2,{id:"what-does-steam-api-do",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#what-does-steam-api-do",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"What Does Steam API Do"]}),` `,(0,e.jsx)(n.p,{children:"The Steam web API can do a variety of things, including get user information, get currently played, and many more, as shown below."}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"Get news for app: return the most recent version of a game provided by its appID."}),` `,(0,e.jsx)(n.li,{children:"Get Global Achievement Percentages For App: Returns on global achievements for a certain game, expressed as a percentage."}),` `,(0,e.jsx)(n.li,{children:"Get Player Summaries: returns basic profile information."}),` `,(0,e.jsx)(n.li,{children:`Get Friend List: Returns any Steam user's friend list if their Steam Community profile visibility is set to "Public."`}),` `,(0,e.jsx)(n.li,{children:"Get Player Achievements: Returns a list of this user's achievements sorted by app id."}),` `,(0,e.jsx)(n.li,{children:"Get Owned Games: returns a list of games a player has, as well as information on how much time they've spent playing them."}),` `,(0,e.jsx)(n.li,{children:"Get Recently Played Games: returns a list of games played in the last two weeks by a player."}),` `]}),` `,(0,e.jsxs)(n.h2,{id:"steam-api-token",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#steam-api-token",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Steam API Token"]}),` `,(0,e.jsxs)(n.p,{children:["The most basic thing to do is to read the ",(0,e.jsx)(n.a,{href:"https://developer.valvesoftware.com/wiki/Steam_Web_API#GetPlayerSummaries_.28v0002.29",children:"documentation"})," from Steam directly. It can be seen in the GetPlayerSummaries (v0002) section. Steam provides an example URL as follows :"]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsx)(n.code,{className:"language-bash code-highlight",children:(0,e.jsxs)(n.span,{className:"code-line",children:["https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key",(0,e.jsx)(n.span,{className:"token operator",children:"="}),"YOUR-STEAM-KEY",(0,e.jsx)(n.span,{className:"token operator",children:"&"}),(0,e.jsx)(n.span,{className:"token assign-left variable",children:"steamids"}),(0,e.jsx)(n.span,{className:"token operator",children:"="}),`YOUR-STEAM-ID `]})})}),` `,(0,e.jsx)(n.p,{children:"From that URL, we can replace the steam key and id with your own."}),` `,(0,e.jsxs)(n.p,{children:["We can get the key by accessing this ",(0,e.jsx)(n.a,{href:"https://steamcommunity.com/dev/apikey",children:"Web API Key for Steam - Steam Community"}),"."]}),` `,(0,e.jsx)(s,{alt:"Steam now playing - Steam API key",src:"/v1649551969/jagad.dev/posts/steam-now-playing/steam_api_key_j8q6b7.png",width:"877",height:"265"}),` `,(0,e.jsx)(n.p,{children:"To get a steam id, we can use the most primitive method by logging in through the browser and going to the steam profile section. In the URL bar, we will see the steam id."}),` `,(0,e.jsx)(s,{alt:"Steam Id",src:"/v1649552921/jagad.dev/posts/steam-now-playing/steam_id_xtorcq.png",width:"1470",height:"233"}),` `,(0,e.jsx)(n.p,{children:"Use a browser to access the URL that already contains the key and id, or use Postman if you want it to be easier to read."}),` `,(0,e.jsxs)(n.h2,{id:"creating-an-api-route",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#creating-an-api-route",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Creating an API Route"]}),` `,(0,e.jsxs)(n.p,{children:["Create a steam api route in ",(0,e.jsx)(n.code,{children:"/pages/api/playersummaries.tsx"})]}),` `,(0,e.jsx)(n.pre,{className:"language-typescript",children:(0,e.jsxs)(n.code,{className:"language-typescript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," NextApiRequest",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," NextApiResponse ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next'"}),(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:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"getPlayerSummaries"})," ",(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",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"})," playersummaries_endpoint ",(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 template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key="}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"process",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"env",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"STEAM_TOKEN"}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:"&steamids="}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"process",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"env",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"STEAM_ID"}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",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:"return"})," ",(0,e.jsx)(n.span,{className:"token function",children:"fetch"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"playersummaries_endpoint",(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:[" method",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'GET'"}),(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:"code-line",children:` `}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(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:"handler"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" req",(0,e.jsx)(n.span,{className:"token operator",children:":"})," NextApiRequest",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" res",(0,e.jsx)(n.span,{className:"token operator",children:":"}),` NextApiResponse `]}),(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 keyword",children:"const"})," response ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getPlayerSummaries"}),(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:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"status ",(0,e.jsx)(n.span,{className:"token operator",children:"!="})," ",(0,e.jsx)(n.span,{className:"token number",children:"200"}),(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:"return"})," res",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"status"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"200"}),(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",children:"json"}),(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:[" steam",(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:[" personastate",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'Offline'"}),(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.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"})," steam ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"await"})," response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",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 keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"item ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(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:"return"})," res",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"status"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"200"}),(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",children:"json"}),(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:[" steam",(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:[" personastate",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'Offline'"}),(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.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," getPersonName ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"players",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"personaname",(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"})," getAvatar ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"players",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"avatarfull",(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"})," getStatus ",(0,e.jsx)(n.span,{className:"token operator",children:"="}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"players",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"personastate ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token number",children:"1"}),` `]}),(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 string",children:"'Online'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"players",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"personastate ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token number",children:"2"}),` `]}),(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 string",children:"'Busy \u{1F610}'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"players",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"personastate ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token number",children:"3"}),` `]}),(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 string",children:"'Away \u{1F971}'"}),` `]}),(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 string",children:"'Offline \u{1F634}'"}),(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"})," getGames ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token operator",children:"!"}),"steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"players",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),`gameextrainfo `]}),(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 boolean",children:"false"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" ",(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 template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"Playing - "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"players",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"gameextrainfo",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:" \u{1F606}"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",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"})," getprofileUrl ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"response",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"players",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"0"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"profileurl",(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:"return"})," res",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"status"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token number",children:"200"}),(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",children:"json"}),(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:[" steam",(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:[" getPersonName",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" getAvatar",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" getStatus",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" getGames",(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[" getprofileUrl",(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.p,{children:["Add ",(0,e.jsx)(n.code,{children:".env.local"})," file with key and id that we get before (change the data below with yours and don't forget to restart the server)."]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token assign-left variable",children:"STEAM_TOKEN"}),(0,e.jsx)(n.span,{className:"token operator",children:"="}),`ED20ADF0123188DHDHDHJASSFB `]}),(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token assign-left variable",children:"STEAM_ID"}),(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token number",children:"76561198324704779"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["Try accessing ",(0,e.jsx)(n.a,{href:"#",children:"localhost:3000/api/playersummaries"})," from the browser to get response like this."]}),` `,(0,e.jsx)(n.pre,{className:"language-json",children:(0,e.jsxs)(n.code,{className:"language-json code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",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",children:'"steam"'}),(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",children:'"getPersonName"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"imyour_universe"'}),(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",children:'"getAvatar"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"https://avatars.akamai.steamstatic.com/759b364331bd3566df2ee48fd389fc0310789288_full.jpg"'}),(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",children:'"getStatus"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"Online"'}),(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",children:'"getGames"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(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",children:'"getprofileUrl"'}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:'"https://steamcommunity.com/profiles/76561198324704779/"'}),` `]}),(0,e.jsxs)(n.span,{className:"code-line",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)(c,{}),` `,(0,e.jsxs)(n.h2,{id:"fetching-api-with-swr",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#fetching-api-with-swr",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Fetching API with SWR"]}),` `,(0,e.jsx)(n.p,{children:"To fetch data from next.js API, we can use SWR. SWR is a library that can stream data updates constantly and automatically. And the UI will always be fast and reactive."}),` `,(0,e.jsx)(n.p,{children:"Install SWR"}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,e.jsx)(n.span,{className:"token function",children:"add"}),` swr `]}),(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 comment",children:"# or"}),` `]}),(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 function",children:"npm"}),` i swr `]})]})}),` `,(0,e.jsxs)(n.p,{children:["SWR can be placed in ",(0,e.jsx)(n.code,{children:"pages/index.tsx"})," or wherever else you choose. I choose placed in ",(0,e.jsx)(n.code,{children:"pages/activities.tsx"}),"."]}),` `,(0,e.jsx)(n.pre,{className:"language-typescript",children:(0,e.jsxs)(n.code,{className:"language-typescript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," useSWR ",(0,e.jsx)(n.span,{className:"token keyword",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",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"Games"})," ",(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",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 function-variable function",children:"fetcher"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"url",(0,e.jsx)(n.span,{className:"token operator",children:":"})," RequestInfo",(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 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 punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"then"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," res",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",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.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:"{"})," data ",(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 function",children:"useSWR"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'/api/playersummaries'"}),(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:"return"})," ",(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.jsx)(n.span,{className:"token operator",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 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:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," Games",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.h2,{id:"styling-with-tailwind-css",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#styling-with-tailwind-css",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Styling With Tailwind CSS"]}),` `,(0,e.jsx)(n.p,{children:"This code can be placed inside the section to render the data from SWR."}),` `,(0,e.jsx)(n.p,{children:"You can also modify the style to suit your preferences."}),` `,(0,e.jsx)(n.pre,{className:"language-typescript",children:(0,e.jsxs)(n.code,{className:"language-typescript code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," React ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(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:"import"})," useSWR ",(0,e.jsx)(n.span,{className:"token keyword",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",children:"const"})," ",(0,e.jsx)(n.span,{className:"token function-variable function",children:"Games"})," ",(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",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 function-variable function",children:"fetcher"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"url",(0,e.jsx)(n.span,{className:"token operator",children:":"})," RequestInfo",(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 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 punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",children:"then"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"res",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"=>"})," res",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token function",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.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:"{"})," data ",(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 function",children:"useSWR"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token string",children:"'/api/playersummaries'"}),(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:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-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 highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"main className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'prose prose-invert max-w-none prose-a:no-underline'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-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:"'mx-auto mb-16 max-w-3xl text-center'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"h1 className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token string",children:"'-my-1 text-3xl sm:text-5xl'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),"Steam Player Summaries",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-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:"'text-md text-gray-400 sm:text-lg'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"for"})," now ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,e.jsx)(n.span,{className:"token operator",children:"?."}),"steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"getPersonName",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"is"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token string",children:"' '"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-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:"'text-primary'"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,e.jsx)(n.span,{className:"token operator",children:"?."}),"steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"getGames ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," data",(0,e.jsx)(n.span,{className:"token operator",children:"?."}),"steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),`getStatus `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," data",(0,e.jsx)(n.span,{className:"token operator",children:"?."}),"steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),`getStatus `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'-'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," data",(0,e.jsx)(n.span,{className:"token operator",children:"?."}),"steam",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"getGames",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-line",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 highlight-line",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 highlight-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 highlight-line",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"main",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line highlight-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 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",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," Games",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})]})}),` `,(0,e.jsxs)(n.h2,{id:"resources",children:[(0,e.jsx)(n.a,{"aria-hidden":"true",tabIndex:"-1",href:"#resources",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Resources"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://swr.vercel.app/docs/with-nextjs",children:"Usage with Next.js \u2013 SWR"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://nextjs.org/docs/api-routes/introduction",children:"API Routes: Introduction | Next.js (nextjs.org)"})}),` `]})]})}function b(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var S=b;function d(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(x);})(); ;return Component;