How do i remove the div with id="__next" in Next.js

Viewed 3374

I am making a website with Next.js. I want to have a header with position: sticky; behavior.

However, Next.js automatically generates a div with the attribute id="__next" at the root of my website without my permission.

enter image description here

I need to remove that div so that the position: sticky; behavior of my header can work the way it is expected to do. How can I do that?

2 Answers
body {
  display: flex;
  min-height: 100vh;
}

#__next {
  flex: 1 1 auto;
}

// do whatever you want here and it'll work as expected

You cannot remove it, next.js needs it to render your web app. position: sticky always look for it's parent element's height. You can assign height: 100%; position: relative; to the __Next id. So, it will work as body. And then, your position sticky will work.

Related