How to use portals in Next.js in getting the child element outside the immediate parent container?

Question

Current Implementation

Container

export const FormContainer = () => {
    return (<Form/>);
  }

Component

export const Form = () => {
    return ReactDOM.createPortal(
      <aside>
        <div>{"I am a component"}<div/>
      </aside>,
      document.body
    );
  }

Errors

ReferenceError: document is not defined

Expectation

I want the Form to be out of FormContainer DOM hierarchy.

Answer 1

ReferenceError: document is not defined

ReactDOM.createPortal is more like a "BrowserSide only" component because it needs document and in serverSide Rendering, it's undefined.

I want the Form to be out of FormContainer DOM hierarchy.

easiest solution: set a condition to check for BrowserOnly rendering of createPortal component :

according to saimeunt answer, something like

export const FormContainer = () => {
    return (
        {process.browser?
            <Form/>:null
        }
    );
}

will make the day.

another way around will be using nextJs dynamic import and disable SSR on module

import dynamic from "next/dynamic";
const Form = dynamic(() => import("path/to/FormModule"), { ssr: false });


export const FormContainer = () => {
    return (<Form/>);
  }