{"id":385443,"date":"2023-11-03T09:47:05","date_gmt":"2023-11-03T09:47:05","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=385443"},"modified":"2026-02-23T07:49:44","modified_gmt":"2026-02-23T07:49:44","slug":"how-to-create-a-react-portal-in-next-js","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/","title":{"rendered":"How to create a React Portal in Next Js?"},"content":{"rendered":"\n

In this blog, we are going to explore the react portal and how can create the portal in NextJs. So first we’ll set up the NextJs App<\/a>.<\/p>\n\n\n\n

Understanding the react portal?<\/h2>\n\n\n\n

Basically, the React portal is a powerful technique to create a first-class way to render children into a DOM (Document object modal) Node from outside of their parent component hierarchy.<\/p>\n\n\n\n

This means It provides the feature to render components outside of their parent component’s hierarchy. Which can be used for tooltips, alert modal boxes, and loaders.<\/p>\n\n\n\n

You can see the image for the Portal example.<\/p>\n\n\n\n

\"React<\/figure>\n\n\n\n

The following are a few steps to create a react portal<\/a> in Next js.<\/p>\n\n\n\n

Step 1:<\/strong> First We need to set up the Next Js App<\/a> to implement in Next Js.<\/strong><\/p>\n\n\n\n

We will create the new file pages\/_document. tsx in the root directory and you can see the final folder structure.<\/p>\n\n\n\n

.\n\u251c\u2500\u2500 pages\/\n\u2502   \u251c\u2500\u2500 api\n\u2502         \u251c\u2500\u2500 hello.ts\n\u2502   \u251c\u2500\u2500 app.tsx\n|   \u251c\u2500\u2500_documet.tsx\n\u2502   \u2514\u2500\u2500 index.tsx\n\u251c\u2500\u2500 public\/\n\u2502   \u251c\u2500\u2500 favicon.ico\n\u2502   \u251c\u2500\u2500 next.svg\n\u2502   \u2514\u2500\u2500 vercel.svg\n\u251c\u2500\u2500 styles\/\n\u2502   \u2514\u2500\u2500 global.css\n\u2502   \u2514\u2500\u2500 Home.module.css\n\u251c\u2500\u2500 next.config.js\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md<\/pre>\n\n\n\n
Step 2:<\/strong> Modify the _document.tsx file to mount the react portal.<\/strong><\/p>\n\n\n\n
_document.tsx<\/code> should be inside the pages folder. It works like the index.html file in React. I added a div with id=”myportal<\/strong>” to render the portal inside it.<\/p>\n\n\n\n
\/\/-----pages\/_document.tsx-----\/\/\n\nimport { poppins } from "@\/components\/ClientPortal";\nimport { Html, Head, Main, NextScript } from "next\/document";\n\n\nexport default function Document() {\n  return (\n    <Html lang="en" className={poppins.className}>\n      <Head \/>\n      <body >\n        <Main \/>\n        <div id="myportal" \/>\n        <NextScript \/>\n      <\/body>\n    <\/Html>\n  );\n}<\/pre>\n\n\n\n
Step 3<\/strong>: Create a ClientPortal.tsx file inside the components directory.<\/strong><\/p>\n\n\n\n
Note: It created the components\/ClientPortal.tsx file in the root directory. and write the code to create a portal.<\/p>\n\n\n\n
\/\/-----components\/ClientPortal.tsx-----\/\/\n\nimport { useEffect, useRef } from "react";\nimport { Poppins } from "next\/font\/google";\nimport { createPortal } from "react-dom";\ntype ClientPortalInterface = {\n  children: React.ReactNode;\n  show?: boolean;\n  onClose?: () => void;\n  selector: string;\n};\n\nconst ClientPortal = ({ children, selector, show }: ClientPortalInterface) => {\n  const ref = useRef<Element | null>(null);\n  useEffect(() => {\n    ref.current = document.getElementById(selector);\n  }, [selector]);\n  return show && ref.current ? createPortal(children, ref.current) : null;\n};\n\nexport default ClientPortal;\n\nexport const poppins = Poppins({\n  weight: ["400", "500", "600", "700"],\n  subsets: ["latin"],\n});<\/pre>\n\n\n\n
And apply some CSS to design the content.<\/p>\n\n\n\n
\/\/-----styles\/Home.module.css-----\/\/\n\n.main {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 6rem;\n}\n\n.removeButton{\n  border: none;\n  background-color: #ffffff;\n  cursor: pointer;\n  padding: 5px 7px;\n}\n.removeButton:hover{\n  background-color: rgba(189, 195, 199, 1.0);\n  border-radius: 6px;\n}\n\n\/* Enable hover only on non-touch devices *\/\n@media (hover: hover) and (pointer: fine) {\n  .card:hover {\n    background: rgba(var(--card-rgb), 0.1);\n    border: 1px solid rgba(var(--card-border-rgb), 0.15);\n  }\n\n  .card:hover span {\n    transform: translateX(4px);\n  }\n}\n\n@media (prefers-reduced-motion) {\n  .card:hover span {\n    transform: none;\n  }\n}\n\n.modal{\n  background: rgba(255, 255, 255,1.0);\n  width: 60%;\n  max-height: 500px;\n  border-radius: 15px;\n  padding: 20px;\n  z-index: 100;\n}\n\n.header{\n  display: flex;\n  align-items: center;\n  justify-content: space-between; \n  border-bottom: 1px solid rgba(189, 195, 199,1.0);\n}\n.header h4{\n  color: rgb(17 24 39 0.3);\n  font-size: 20px;\n  font-weight: 600;\n  margin-bottom: 13px;\n}\n\n.body{\n  padding-top: 10px;\n}\n.body p{\n  color: rgba(116, 125, 140,1.0);\n  font-size: 14px;\n  line-height: 28px;\n  text-align: left;\n}\n.overflow{\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n  transition: 1;\n}\n\n.btn {\n  padding: 8px 18px;\n  cursor: pointer;\n  border: 0px solid rgb(14, 158, 62);\n  border-radius: 3px;\n  color: rgba(255, 255, 255,1.0);\n  font-size: 16px;\n  border-radius: 5px;\n  background: rgb(14, 158, 62);  \n}\n.btn:hover{\n  background: rgb(9, 99, 39); \n}\n\n.groupbtn{\n  display: flex;\n  justify-content: flex-end;\n}\n.cancleBtn{\n  padding: 10px 20px;\n  margin: 0px 10px;\n  cursor: pointer;\n  border: 0px solid rgba(231, 76, 60,1.0);\n  border-radius: 3px;\n  color: rgba(255, 255, 255,1.0);\n  font-size: 16px;\n  border-radius: 5px;\n  background: rgba(231, 76, 60,1.0); \n}\n.reactontent {\n  margin: 20px 0px;\n}<\/pre>\n\n\n\n
Step 4:<\/strong> Import the ClientPortal component in the pages\/index.tsx file in the root directory.<\/strong><\/p>\n\n\n\n
\/\/-----pages\/index.tsx-----\/\/\n\nimport { useState } from "react";\nimport styles from "@\/styles\/Home.module.css";\nimport ClientPortal from "..\/components\/ClientPortal";\nexport default function Home() {\n  const [showPortal, setShowPortal] = useState(false);\n  const handleModal = () => {\n    setShowPortal(!showPortal);\n  };\n  \n\n  return (\n    <>\n      <main className={`${styles.main}`}>\n        <h1>Implementation portal in next JS<\/h1>\n        <button onClick={handleModal} className={styles.btn}>\n          Read Blog\n        <\/button>\n      <\/main>\n      <ClientPortal\n        selector="myportal"\n        show={showPortal}\n      >\n        <div className={styles.overflow}>\n          <div className={styles.modal}>\n            <div className={styles.header}>\n              <h4>Lorem Ipsum<\/h4>\n              <button onClick={handleModal} className={styles.removeButton}>\n              {\/* <button className={styles.removeButton}> *\/}\n                <svg\n                  xmlns="http:\/\/www.w3.org\/2000\/svg"\n                  height="1em"\n                  viewBox="0 0 384 512"\n                >\n                  <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" \/>\n                <\/svg>\n              <\/button>\n            <\/div>\n            <div className={styles.body}>\n              <p>\n                Basically, React Portal is a powerful technique to create a\n                first-class way to render children into a DOM (Document object\n                modal) Node from outside of their parent component hierarchy.\n              <\/p>\n              <div className={styles.reactontent}>\n                <h4>Industry's stand 1960s with the release<\/h4>\n                <p>\n                  has been the industry's stand 1960s with the release of\n                  Letraset sheets containing Lorem Ipsum passages, and more\n                  recently with desktop publishing software like Aldus PageMaker\n                  including versions of Lorem Ipsum.\n                <\/p>\n              <\/div>\n              <div className={styles.reactontent}>\n                <p>\n                  Lorem Ipsum is simply dummy text of the printing It has\n                  survived not only five centuries, but also the leap into\n                  electronic typesetting, remaining essentially unchanged. It\n                  was popularised in the 1960s with the release of Letraset\n                  sheets containing Lorem Ipsum passages, and more recently\n                <\/p>\n              <\/div>\n              <div className={styles.reactontent}>\n                <p>\n                  Lorem Ipsum is simply dummy text of the printing and\n                  typesetting industry. Lorem Ipsum has been the industry's\n                  standard dummy text ever since the 1500s, when an unknown\n                  printer took a galley of type and Lorem Ipsum.\n                <\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/ClientPortal>\n    <\/>\n  );\n}<\/pre>\n\n\n\n
You can see the result on localhost.<\/p>\n\n\n\n
\"React<\/figure>\n\n\n\n
\n
\"Screenshot-from-2023-11-03-14-57-39\"<\/figure>\n<\/figure>\n\n\n\n
\n
\"Screenshot-from-2023-11-03-14-25-59\"<\/figure>\n<\/figure>\n\n\n\n
Start your Headless Development<\/a> with Webkul.<\/p>\n\n\n\n
Happy Coding!!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we are going to explore the react portal and how can create the portal in NextJs. So first we’ll set up the NextJs App. Understanding the react portal? Basically, the React portal is a powerful technique to create a first-class way to render children into a DOM (Document object modal) Node from […]<\/a><\/p>\n","protected":false},"author":545,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13575,6357],"tags":[14315,14316,15269,12572,14311,14312,6359,14310,14313,14314],"class_list":["post-385443","post","type-post","status-publish","format-standard","hentry","category-next-js","category-react-js","tag-client-portal","tag-create-portal","tag-next-js-2","tag-next-js","tag-portal-react","tag-portals-in-react","tag-react-js","tag-react-portal","tag-react-portal-example","tag-react-portals"],"yoast_head":"\nHow to create a React Portal in Next Js<\/title>\n<meta name=\"description\" content=\"React Portal is a powerful technique to create a first-class way to render children from outside of their parent component hierarchy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a React Portal in Next Js\" \/>\n<meta property=\"og:description\" content=\"React Portal is a powerful technique to create a first-class way to render children from outside of their parent component hierarchy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-03T09:47:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-23T07:49:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1-1200x544.png\" \/>\n<meta name=\"author\" content=\"Abhishek Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/\"},\"author\":{\"name\":\"Abhishek Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\"},\"headline\":\"How to create a React Portal in Next Js?\",\"datePublished\":\"2023-11-03T09:47:05+00:00\",\"dateModified\":\"2026-02-23T07:49:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/\"},\"wordCount\":263,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1-1200x544.png\",\"keywords\":[\"client portal\",\"create portal\",\"next js\",\"Next.js\",\"portal react\",\"portals in react\",\"react js\",\"react portal\",\"react portal example\",\"react portals\"],\"articleSection\":[\"next js\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/\",\"name\":\"How to create a React Portal in Next Js\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1-1200x544.png\",\"datePublished\":\"2023-11-03T09:47:05+00:00\",\"dateModified\":\"2026-02-23T07:49:44+00:00\",\"description\":\"React Portal is a powerful technique to create a first-class way to render children from outside of their parent component hierarchy.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1.png\",\"width\":1366,\"height\":619,\"caption\":\"portal2-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a React Portal in Next Js?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\",\"name\":\"Abhishek Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Abhishek Kumar\"},\"description\":\"Abhishek Kumar, a skilled software engineer, specializes in crafting immersive digital experiences. With a focus on frontend development, he excels in creating headless themes . Proficient in JavaScript and next.js, Abhishek's expertise adds a unique and dynamic dimension to any project, ensuring a seamless and engaging user journey.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/abhishekkumar-mg121\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a React Portal in Next Js","description":"React Portal is a powerful technique to create a first-class way to render children from outside of their parent component hierarchy.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"How to create a React Portal in Next Js","og_description":"React Portal is a powerful technique to create a first-class way to render children from outside of their parent component hierarchy.","og_url":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-11-03T09:47:05+00:00","article_modified_time":"2026-02-23T07:49:44+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1-1200x544.png","type":"","width":"","height":""}],"author":"Abhishek Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Abhishek Kumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/"},"author":{"name":"Abhishek Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9"},"headline":"How to create a React Portal in Next Js?","datePublished":"2023-11-03T09:47:05+00:00","dateModified":"2026-02-23T07:49:44+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/"},"wordCount":263,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1-1200x544.png","keywords":["client portal","create portal","next js","Next.js","portal react","portals in react","react js","react portal","react portal example","react portals"],"articleSection":["next js","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/","url":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/","name":"How to create a React Portal in Next Js","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1-1200x544.png","datePublished":"2023-11-03T09:47:05+00:00","dateModified":"2026-02-23T07:49:44+00:00","description":"React Portal is a powerful technique to create a first-class way to render children from outside of their parent component hierarchy.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/06\/portal2-1.png","width":1366,"height":619,"caption":"portal2-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-a-react-portal-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create a React Portal in Next Js?"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9","name":"Abhishek Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Abhishek Kumar"},"description":"Abhishek Kumar, a skilled software engineer, specializes in crafting immersive digital experiences. With a focus on frontend development, he excels in creating headless themes . Proficient in JavaScript and next.js, Abhishek's expertise adds a unique and dynamic dimension to any project, ensuring a seamless and engaging user journey.","url":"https:\/\/webkul.com\/blog\/author\/abhishekkumar-mg121\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/385443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/545"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=385443"}],"version-history":[{"count":84,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/385443\/revisions"}],"predecessor-version":[{"id":527582,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/385443\/revisions\/527582"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=385443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=385443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=385443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}