What would be the best NextJS method of creating components that would work on a screen wide overlay, such as a modal or loading spinner? In the past, I would have created a div as a child of the HTML element, and then transposed code there to show up. However, I also recognize, technically as long as I set the z index properly, I can have any child element be full screen/on top of everything.

For a modal, I feel like I am overthinking this. Do I just create a component that has said high z index, fixed, and full viewport? Then just hide/show as necessary? But for common components, such as a login modal or a loading spinner, should I just make said components at the top level and then control them via a context?