{"id":10820,"date":"2023-03-21T11:43:37","date_gmt":"2023-03-21T11:43:37","guid":{"rendered":"https:\/\/codevoweb.com\/?p=10820"},"modified":"2023-05-07T05:45:09","modified_gmt":"2023-05-07T05:45:09","slug":"setup-react-context-api-in-nextjs-13-app-directory","status":"publish","type":"post","link":"https:\/\/codevoweb.com\/setup-react-context-api-in-nextjs-13-app-directory\/","title":{"rendered":"How to Setup React Context API in Next.js 13 App Directory"},"content":{"rendered":"\n<p>Do you want to use <a href=\"https:\/\/react.dev\/learn\/passing-data-deeply-with-context\" target=\"_blank\" rel=\"noreferrer noopener\">React Context API<\/a> to manage states globally and avoid prop drilling in your Next.js 13 app directory? If so, you&#8217;ve come to the right place. This article will guide you through the process of setting up and implementing the React Context API in your Next.js 13 app.<\/p>\n\n\n\n<p>In React 18, the concept of Server Components was introduced, which allows developers to build applications that combine the interactivity of client-side apps with the performance benefits of server rendering. Next.js 13 Beta has embraced this concept and implemented it in the <code>app\/<\/code> directory, which uses Server Components by default.<\/p>\n\n\n\n<p>However, because all components are server-rendered by default, integrating client-side libraries or APIs can be tricky. But fear not, as this article will show you how to overcome this challenge and leverage the power of the React Context API in your Next.js 13 app directory.<\/p>\n\n\n\n<span id=\"ezoic-pub-video-placeholder-107\"><\/span>\n\n\n\n<p>More practice:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"\/setup-react-query-in-nextjs-13-app-directory\/\">How to Setup React Query in Next.js 13 App Directory<\/a><\/li>\n\n\n\n<li><a href=\"\/setup-redux-toolkit-in-nextjs-13-app-directory\/\">How to Setup Redux Toolkit in Next.js 13 App Directory<\/a><\/li>\n\n\n\n<li><a href=\"\/react-query-user-registration-and-email-verification\">React Query and Axios: User Registration and Email Verification<\/a><\/li>\n\n\n\n<li><a href=\"\/forgot-reset-passwords-with-react-query-and-axios\">Forgot\/Reset Passwords with React Query and Axios<\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"478\" src=\"https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Setup-React-Context-API-in-Next.js-13-App-Directory.webp\" alt=\"How to Setup React Context API in Next.js 13 App Directory\" class=\"wp-image-10829\" srcset=\"https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Setup-React-Context-API-in-Next.js-13-App-Directory.webp 850w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Setup-React-Context-API-in-Next.js-13-App-Directory-300x169.webp 300w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Setup-React-Context-API-in-Next.js-13-App-Directory-768x432.webp 768w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Setup-React-Context-API-in-Next.js-13-App-Directory-100x56.webp 100w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Setup-React-Context-API-in-Next.js-13-App-Directory-700x394.webp 700w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id_279a7c-80 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:1px solid #abb8c3;border-right:1px solid #abb8c3;border-bottom:1px solid #abb8c3;border-left:1px solid #abb8c3;}.kb-table-of-content-nav.kb-table-of-content-id_279a7c-80 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id_279a7c-80 .kb-table-of-contents-title-wrap{color:#ffffff;}.kb-table-of-content-nav.kb-table-of-content-id_279a7c-80 .kb-table-of-contents-title{color:#ffffff;font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id_279a7c-80 .kb-table-of-content-wrap .kb-table-of-content-list{color:#ffffff;font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id_279a7c-80 .kb-table-of-content-wrap{border-top:1px solid #abb8c3;border-right:1px solid #abb8c3;border-bottom:1px solid #abb8c3;border-left:1px solid #abb8c3;}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id_279a7c-80 .kb-table-of-content-wrap{border-top:1px solid #abb8c3;border-right:1px solid #abb8c3;border-bottom:1px solid #abb8c3;border-left:1px solid #abb8c3;}}<\/style>\n\n\n<h2 class=\"wp-block-heading\">Setup the Next.js 13 Project<\/h2>\n\n\n\n<p>Once you&#8217;ve followed the steps outlined in this tutorial, your folder structure will resemble the one depicted in the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"898\" src=\"https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Use-React-Context-API-in-Next.js-13-App-Directory-Project-Structure.webp\" alt=\"How to Use React Context API in Next.js 13 App Directory Project Structure\" class=\"wp-image-10824\" srcset=\"https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Use-React-Context-API-in-Next.js-13-App-Directory-Project-Structure.webp 873w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Use-React-Context-API-in-Next.js-13-App-Directory-Project-Structure-292x300.webp 292w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Use-React-Context-API-in-Next.js-13-App-Directory-Project-Structure-768x790.webp 768w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Use-React-Context-API-in-Next.js-13-App-Directory-Project-Structure-97x100.webp 97w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/How-to-Use-React-Context-API-in-Next.js-13-App-Directory-Project-Structure-437x450.webp 437w\" sizes=\"auto, (max-width: 873px) 100vw, 873px\" \/><\/figure>\n\n\n\n<p>Also, you&#8217;ll have an application that includes a counter component, which utilizes the React Context API to manage its state. Furthermore, the app will retrieve a list of users from an API and display it beneath the counter component.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"760\" src=\"https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-1024x760.webp\" alt=\"Using Redux Toolkit and RTK Query in Next.js App Directory\" class=\"wp-image-10776\" srcset=\"https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-1024x760.webp 1024w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-300x223.webp 300w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-768x570.webp 768w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-100x74.webp 100w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-606x450.webp 606w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory.webp 1309w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To begin, navigate to a location on your computer, such as your Desktop, where you want to store the project source code. Once you&#8217;re there, open a terminal in that directory. Then, depending on your preferred package manager, run one of the commands below to initiate the Next.js 13 project setup.<\/p>\n\n\n\n<pre class=\"line-numbers language-shell\"><code>\nyarn create next-app nextjs13-context-api\n# or\nnpx create-next-app@latest nextjs13-context-api\n<\/code>\n<\/pre>\n\n\n\n<p>While setting up the project, you&#8217;ll be prompted to answer some questions that enable certain features in the Next.js 13 project. Make sure to select &#8220;<strong>Yes<\/strong>&#8221; for TypeScript and ESLint. If you&#8217;re asked whether you want to use the experimental <code>app\/<\/code> directory and the <code>src\/<\/code> directory, select &#8220;<strong>Yes<\/strong>&#8221; for both options. Lastly, when prompted for the type of import alias, press TAB to choose the first option and then press Enter.<\/p>\n\n\n\n<p>Once you&#8217;ve answered these questions, the Next.js 13 project will be created and the necessary dependencies will be installed. After the dependencies have been installed, open the project in your preferred code editor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create the Context Provider<\/h2>\n\n\n\n<p>Since Next.js 13 defaults to server-side rendering for all components, creating a context using Context API in a Server Component will cause an error. To resolve this issue, we must create the context and render its provider within a Client Component. To achieve this, we can simply include the <code>\"use client\";<\/code> flag at the top of the file.<\/p>\n\n\n\n<p>With this in mind, let&#8217;s create a context that will allow us to increment, decrement, and reset a counter. To get started, navigate to the <code>src<\/code> directory and create a new folder called &#8220;<strong>context<\/strong>&#8220;. Inside this folder, create a file called <code>counter.context.tsx<\/code> and add the following code.<\/p>\n\n\n\n<p><strong>src\/context\/counter.context.tsx<\/strong><\/p>\n\n\n\n<pre class=\"line-numbers language-tsx\"><code>\n\"use client\";\n\nimport React, { Dispatch, createContext, useReducer } from \"react\";\n\ntype StateType = {\n  count: number;\n};\n\ntype ActionType = {\n  type: string;\n};\n\nconst initialState: StateType = {\n  count: 0,\n};\n\nconst reducer = (state: StateType, action: ActionType) =&gt; {\n  switch (action.type) {\n    case \"INCREMENT\":\n      return { ...state, count: state.count + 1 };\n    case \"DECREMENT\":\n      return { ...state, count: state.count - 1 };\n    case \"RESET\":\n      return { ...state, count: 0 };\n    default:\n      return state;\n  }\n};\n\nexport const CounterContext = createContext&lt;{\n  state: StateType;\n  dispatch: Dispatch&lt;ActionType&gt;;\n}&gt;({ state: initialState, dispatch: () =&gt; null });\n\nexport const CounterContextProvider = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) =&gt; {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    &lt;CounterContext.Provider value={{ state, dispatch }}&gt;\n      {children}\n    &lt;\/CounterContext.Provider&gt;\n  );\n};\n<\/code>\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Provide the Context Provider to Next.js<\/h2>\n\n\n\n<p>Now we need to ensure that the context provider is rendered at the root of the app so that all Client Components can consume it. To do this, open the <code>layout.tsx<\/code> file located in the app directory and wrap the context provider around the <code>children<\/code> node in the HTML template. <\/p>\n\n\n\n<p>Note that even though the <code>RootLayout<\/code> component is a Server Component, it can now render the context provider since it has been marked as a Client Component with the <code>\"use client\";<\/code> flag.<\/p>\n\n\n\n<p><strong>src\/app\/layout.tsx<\/strong><\/p>\n\n\n\n<pre class=\"line-numbers language-tsx\"><code>\nimport { CounterContextProvider } from \"@\/context\/counter.context\";\n\nexport const metadata = {\n  title: \"Create Next App\",\n  description: \"Generated by create next app\",\n};\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    &lt;html lang=\"en\"&gt;\n      &lt;body&gt;\n        &lt;CounterContextProvider&gt;{children}&lt;\/CounterContextProvider&gt;\n      &lt;\/body&gt;\n    &lt;\/html&gt;\n  );\n}\n<\/code>\n<\/pre>\n\n\n\n<p>It&#8217;s important to remember to render providers as deeply as possible in the component tree for optimal performance. In this case, we&#8217;re only wrapping <code>{children}<\/code> instead of the entire <code>&lt;html&gt;<\/code> document, which makes it easier for Next.js to optimize the static parts of your Server Components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use the Context API in the Next.js 13<\/h2>\n\n\n\n<p>Now that we have set up the Context Provider in the app&#8217;s root layout component, we can use it to manage the app&#8217;s state in our components. Let&#8217;s start by creating a counter component that uses the context to increase, decrease, and reset the counter.<\/p>\n\n\n\n<p>Since the Context API only works in Client Components, we need to insert the <code>\"use client\";<\/code> flag at the top of the file. To get started, navigate to the <code>src<\/code> directory and create a new folder named &#8220;<strong>components<\/strong>&#8220;. Within the &#8220;<strong>components<\/strong>&#8221; folder, create a new file named <code>counter.component.tsx<\/code> and add the following code snippets.<\/p>\n\n\n\n<p><strong>src\/components\/counter.component.tsx<\/strong><\/p>\n\n\n\n<pre class=\"line-numbers language-tsx\"><code>\n\"use client\";\n\nimport { CounterContext } from \"@\/context\/counter.context\";\nimport React, { useContext } from \"react\";\n\nexport default function Counter() {\n  const { state, dispatch } = useContext(CounterContext);\n\n  return (\n    &lt;div style={{ marginBottom: \"4rem\", textAlign: \"center\" }}&gt;\n      &lt;h4 style={{ marginBottom: 16 }}&gt;{state.count}&lt;\/h4&gt;\n      &lt;button onClick={() =&gt; dispatch({ type: \"INCREMENT\" })}&gt;increment&lt;\/button&gt;\n      &lt;button\n        onClick={() =&gt; dispatch({ type: \"DECREMENT\" })}\n        style={{ marginInline: 16 }}\n      &gt;\n        decrement\n      &lt;\/button&gt;\n      &lt;button onClick={() =&gt; dispatch({ type: \"RESET\" })}&gt;reset&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code>\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Fetch and Display Data From an API<\/h2>\n\n\n\n<p>In addition to the counter component, let&#8217;s also explore the new <code>use<\/code> hook introduced in React 18. However, it&#8217;s important to note that at the time of writing this article, the <code>use<\/code> hook can cause an infinite loop, so the React team created the <code>cache<\/code> function to prevent this.<\/p>\n\n\n\n<p>To demonstrate the <code>use<\/code> hook, we&#8217;ll fetch a list of users from the <a href=\"https:\/\/jsonplaceholder.typicode.com\/users\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/jsonplaceholder.typicode.com\/users<\/a> API using the <code>cache<\/code> function and the Fetch API. Then, we&#8217;ll display the list of users in the UI. <\/p>\n\n\n\n<p>Before we make the API request, it&#8217;s essential to create a TypeScript type that represents the structure of the User document we&#8217;ll receive from the API. Therefore, we should create a <code>types.ts<\/code> file in the &#8220;<strong>src\/app<\/strong>&#8221; directory and add the necessary code to it.<\/p>\n\n\n\n<p><strong>src\/app\/types.ts<\/strong><\/p>\n\n\n\n<pre class=\"line-numbers language-ts\"><code>\nexport type User = {\n  id: number;\n  name: string;\n  email: string;\n};\n<\/code>\n<\/pre>\n\n\n\n<p>Next, create a <code>users.component.tsx<\/code> file inside the &#8220;<strong>components<\/strong>&#8221; directory and add the following code.<\/p>\n\n\n\n<p><strong>src\/components\/users.component.tsx<\/strong><\/p>\n\n\n\n<pre class=\"line-numbers language-tsx\"><code>\n\"use client\";\n\nimport React, { cache, use } from \"react\";\nimport { User } from \"..\/app\/types\";\n\nconst getUsers = cache(() =&gt;\n  fetch(\"https:\/\/jsonplaceholder.typicode.com\/users\").then((res) =&gt; res.json())\n);\n\nexport default function ListUsers() {\n  let users = use&lt;User[]&gt;(getUsers());\n\n  return (\n    &lt;&gt;\n      &lt;div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"1fr 1fr 1fr 1fr\",\n          gap: 20,\n        }}\n      &gt;\n        {users.map((user) =&gt; (\n          &lt;div\n            key={user.id}\n            style={{ border: \"1px solid #ccc\", textAlign: \"center\" }}\n          &gt;\n            &lt;img\n              src={`https:\/\/robohash.org\/${user.id}?set=set2&amp;size=180x180`}\n              alt={user.name}\n              style={{ height: 180, width: 180 }}\n            \/&gt;\n            &lt;h3&gt;{user.name}&lt;\/h3&gt;\n          &lt;\/div&gt;\n        ))}\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}\n<\/code>\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Bring All the Components Into the App Directory<\/h2>\n\n\n\n<p>Next, we need to include the <code>&lt;Counter \/&gt;<\/code> and <code>&lt;ListUsers \/&gt;<\/code> components in the root page component so that they can be rendered. Even though the root page component is a Server Component, it can render the <code>&lt;Counter \/&gt;<\/code> and <code>&lt;ListUsers \/&gt;<\/code> components because they are marked as Client Components.<\/p>\n\n\n\n<p>To achieve this, open the <code>src\/app\/page.tsx<\/code> file and replace its contents with the following code:<\/p>\n\n\n\n<p><strong>src\/app\/page.tsx<\/strong><\/p>\n\n\n\n<pre class=\"line-numbers language-tsx\"><code>\nimport Counter from \"..\/components\/counter.component\";\nimport ListUsers from \"..\/components\/users.component\";\n\nexport default function Home() {\n  return (\n    &lt;main style={{ maxWidth: 1200, marginInline: \"auto\", padding: 20 }}&gt;\n      &lt;Counter \/&gt;\n      &lt;ListUsers \/&gt;\n    &lt;\/main&gt;\n  );\n}\n<\/code>\n<\/pre>\n\n\n\n<p>Congratulations, you&#8217;ve completed the app! To see it in action, start the Next.js development server and go to <code>http:\/\/localhost:3000\/<\/code>. Try clicking on the buttons to increase, decrease, and reset the counter to confirm that the Context API is functioning correctly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"760\" src=\"https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-1024x760.webp\" alt=\"Using Redux Toolkit and RTK Query in Next.js App Directory\" class=\"wp-image-10776\" srcset=\"https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-1024x760.webp 1024w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-300x223.webp 300w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-768x570.webp 768w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-100x74.webp 100w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory-606x450.webp 606w, https:\/\/codevoweb.com\/wp-content\/uploads\/2023\/03\/Using-Redux-Toolkit-and-RTK-Query-in-Next.js-App-Directory.webp 1309w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The source code for this Next.js 13 app using the React Context API is available on <a href=\"https:\/\/github.com\/wpcodevo\/nextjs13-context-api\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>. I hope this article has helped you set up and use the Context API in your own projects. If you have any questions or feedback, please feel free to leave a comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to use React Context API to manage states globally and avoid prop drilling in your Next.js 13 app directory? If so, you&#8217;ve&#8230;<\/p>\n","protected":false},"author":1,"featured_media":10829,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[76],"tags":[77],"class_list":["post-10820","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nextjs","tag-nextjs"],"acf":[],"_links":{"self":[{"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/posts\/10820","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/comments?post=10820"}],"version-history":[{"count":4,"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/posts\/10820\/revisions"}],"predecessor-version":[{"id":11377,"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/posts\/10820\/revisions\/11377"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/media\/10829"}],"wp:attachment":[{"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/media?parent=10820"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/categories?post=10820"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codevoweb.com\/wp-json\/wp\/v2\/tags?post=10820"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}