Now that CSS grid is out and we're finally able to implement sites semantically and lay out stuff nicely without enormous amounts of divs and hacks it would be very nice to see this principle followed in frameworks such as next.js. Unfortunately that's not the case at the moment.
I'm currently following the tutorial and I already have....
<body>
<div>
<div id="__next">
<div data-reactroot="" data-reactid="1" data-react-checksum="315191458">
<!-- my content full of wrapper divs because of react.js -->
</div>
<div id="__next-error"><!-- guess this exists only in dev mode -->
</div>
</div>
<div>
<script>...</script>
...
</div>
<script>...</script>
</body>
Expected Behavior
I think only div we should have is the react root div.
Current Behavior
I see a few unnecessary looking divs.
Steps to Reproduce (for bugs)
- Follow the first tutorial until it works.
cmhakkim
All 8 comments
Using Bootstrap themes is really difficult because of this. Especially when one needs to use styles like "height:100%" on first child "div" after body.
whogaurav
on 15 Aug 2017
Added this to normalize:
body>div, #__next, #__next>div, #__next>div>div {
height: 100%;
}
lancejpollard
on 15 Oct 2017
Not sure how CSS Grids is related to this but I'm pretty sure now with React v16 we could get rid of the div with the ID __next and just render an array, what do you think @timneutkens?
sergiodxa
on 15 Oct 2017
@sergiodxa You're right 馃憤
timneutkens
on 15 Oct 2017
would recommend a small edit to the workaround by @lancejpollard:
/* normalize divs surrounding the content*/
body > div:first-child,
#__next,
#__next > div,
#__next > div > div {
height: 100%;
}
This is to avoid the #__next-error div blowing up to 100% as well.
This is pretty darn hacky though. :( I would rlly appreciate it if the div inside of body could at least have a className, so I don't have to try to target it using body > div:first-child which feels bad to do
juliettepretot
on 11 Nov 2017
@laurajuliette Thank you for a quick hack, it would indeed be nice if the divs had classes so you could make them 100% height easier
kevinsimper
on 14 Dec 2017
Why can't this be adjusted? I don't see the point for generating the divs. The new React fragment syntax should also be possible to use:
class X extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
julmot
on 1 Feb 2018
Fixed in canary. <> can't be used yet because it requires the beta version of babel. Which we'll integrate in next.js v6.
timneutkens
on 1 Feb 2018
Related issues
nvartolomei
路
78Comments
timneutkens
路
250Comments
Knaackee
路
122Comments
baldurh
路
74Comments
Timer
路
90Comments
Most helpful comment
would recommend a small edit to the workaround by @lancejpollard:
This is to avoid the #__next-error div blowing up to 100% as well.
This is pretty darn hacky though. :( I would rlly appreciate it if the div inside of body could at least have a className, so I don't have to try to target it using body > div:first-child which feels bad to do