Next.js: potential extraneous div surrounding #__next

Created on 18 Jan 2017  ·  13Comments  ·  Source: vercel/next.js

Hey guys, so I've just started using next.js on version 1 and decided to try out version 2 tonight so I could use some of the document stuff. I upgraded and noticed, before implementing a custom document, that there is an extra div now rendering around the #__next element.
Below are some images of the issue:
image
Before 1.x.x

image
After 2.x.x ^

It appears the line was added here https://github.com/zeit/next.js/blob/master/server/document.js#L73
whereas it used to be like
https://github.com/zeit/next.js/blob/43b0e6f51420325abf2aed1157a197392364b25d/lib/document.js#L16

So it looks like its because now its rendering as its own component, instead of being nested inside html, wondering if we could instead make the containing element the __next element, and put the following line (https://github.com/zeit/next.js/blob/master/server/document.js#L75) within the __next component?

Reason being, theres an extra div now that seems pointless, its creating further nests for CSS if you want to make body a flex container as you need to propagate down until __next to match the width/height dimensions of body plus it will give cleaner markup.

I'm up for hearing suggestions/discussions around this and would be willing to help fix this issue, in the mean time I will have a play around and see what i can come up with.

Cheers!

good first issue
Source
picture alexnewmannn

Most helpful comment

I'm still seeing this at several layers in 3.2.2:

There are two extraneous layers until I get to the content (which is the main element I'm exporting). In order to have non-VH using full height content, I need to do something ridiculous like this:

        html, body, body > div:first-child, #__next, #__next > div:first-child  {
        height: 100%;
        margin: 0;
        }
picture yunyu on 9 Sep 2017
👍4

All 13 comments

cc @nkzawa

timneutkens picture timneutkens on 19 Jan 2017

I can see why this is happening and might be a tricky one to fix as because it utilises dangerouslySetInnerHTML it can't have a child which means we cant have the rendering element be the _next element. We could move <body> into Main but then that means that NextScript would need to be nested within Main too which wouldn't be ideal. Let me know your thoughts and I can try crack on.

alexnewmannn picture alexnewmannn on 19 Jan 2017

@alexnewmann Actually, we could move Next Data script to NextScript.
Then we can fix this issue.

arunoda picture arunoda on 19 Jan 2017

good shout, i'll pick this up tonight after work!

alexnewmannn picture alexnewmannn on 19 Jan 2017
🎉2

I'm still seeing this at several layers in 3.2.2:

There are two extraneous layers until I get to the content (which is the main element I'm exporting). In order to have non-VH using full height content, I need to do something ridiculous like this:

        html, body, body > div:first-child, #__next, #__next > div:first-child  {
        height: 100%;
        margin: 0;
        }
yunyu picture yunyu on 9 Sep 2017
👍4

I got the same this is a pain for full height components as noted by @yunyu and I'm running v4.0.3

tgdn picture tgdn on 20 Oct 2017

@tgdn will merge the removal of all extra divs soon 👍

timneutkens picture timneutkens on 20 Oct 2017
🎉3

This is still an issue with Next.js 4

TooTallNate picture TooTallNate on 29 Nov 2017
👍2

Fixed in #3327, will be released soon 👍

timneutkens picture timneutkens on 30 Nov 2017

So the <div> around <div id="__next"> was removed, but the latter is still there? Why is that?

julmot picture julmot on 18 May 2018

Could we have the option to remove <div id="__next"> as well?

Soundvessel picture Soundvessel on 16 Aug 2018
👍3

React needs a nested root. It can't render inside <body> itself. So we can't remove it.

timneutkens picture timneutkens on 16 Aug 2018
😕1

Stats from current PR


Default Server Mode



General

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| buildDuration | 16.4s | 16.3s | -120ms |
| nodeModulesSize | 48.3 MB | 48.3 MB | ✓ |


Client Bundles (main, webpack, commons)

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| main-HASH.js | 18.9 kB | 18.9 kB | ✓ |
| main-HASH.js gzip | 6.79 kB | 6.79 kB | ✓ |
| webpack-HASH.js | 1.53 kB | 1.53 kB | ✓ |
| webpack-HASH.js gzip | 746 B | 746 B | ✓ |
| 4952ddcd88e7..2b8407376.js | 21.9 kB | 21.9 kB | ✓ |
| 4952ddcd88e7..7376.js gzip | 7.81 kB | 7.81 kB | ✓ |
| de003c3a9d30..6604acae7.js | 43.2 kB | 43.2 kB | ✓ |
| de003c3a9d30..cae7.js gzip | 15.5 kB | 15.5 kB | ✓ |
| framework.5b..dbaff70d3.js | 125 kB | 125 kB | ✓ |
| framework.5b..70d3.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 211 kB | 211 kB | ✓ |


Client Bundles (main, webpack, commons) Modern

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| main-HASH.module.js | 17.2 kB | 17.2 kB | ✓ |
| main-HASH.module.js gzip | 6.52 kB | 6.52 kB | ✓ |
| webpack-HASH.module.js | 1.53 kB | 1.53 kB | ✓ |
| webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..42.module.js | 45.6 kB | 45.6 kB | ✓ |
| de003c3a9d30..dule.js gzip | 16.5 kB | 16.5 kB | ✓ |
| framework.5b..d3.module.js | 125 kB | 125 kB | ✓ |
| framework.5b..dule.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 190 kB | 190 kB | ✓ |


Client Pages

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _app.js | 1.81 kB | 1.81 kB | ✓ |
| _app.js gzip | 873 B | 873 B | ✓ |
| _error.js | 12 kB | 12 kB | ✓ |
| _error.js gzip | 4.73 kB | 4.73 kB | ✓ |
| hooks.js | 12.7 kB | 12.7 kB | ✓ |
| hooks.js gzip | 4.79 kB | 4.79 kB | ✓ |
| index.js | 318 B | 318 B | ✓ |
| index.js gzip | 222 B | 222 B | ✓ |
| link.js | 8.14 kB | 8.14 kB | ✓ |
| link.js gzip | 3.5 kB | 3.5 kB | ✓ |
| routerDirect.js | 408 B | 408 B | ✓ |
| routerDirect.js gzip | 281 B | 281 B | ✓ |
| withRouter.js | 419 B | 419 B | ✓ |
| withRouter.js gzip | 280 B | 280 B | ✓ |
| Overall change | 35.8 kB | 35.8 kB | ✓ |


Client Pages Modern

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _app.module.js | 1.7 kB | 1.7 kB | ✓ |
| _app.module.js gzip | 832 B | 832 B | ✓ |
| _error.module.js | 23.3 kB | 23.3 kB | ✓ |
| _error.module.js gzip | 8.59 kB | 8.59 kB | ✓ |
| hooks.module.js | 1.52 kB | 1.52 kB | ✓ |
| hooks.module.js gzip | 793 B | 793 B | ✓ |
| index.module.js | 294 B | 294 B | ✓ |
| index.module.js gzip | 223 B | 223 B | ✓ |
| link.module.js | 8.53 kB | 8.53 kB | ✓ |
| link.module.js gzip | 3.68 kB | 3.68 kB | ✓ |
| routerDirect.module.js | 394 B | 394 B | ✓ |
| routerDirect..dule.js gzip | 281 B | 281 B | ✓ |
| withRouter.module.js | 404 B | 404 B | ✓ |
| withRouter.m..dule.js gzip | 278 B | 278 B | ✓ |
| Overall change | 36.1 kB | 36.1 kB | ✓ |


Client Build Manifests

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _buildManifest.js | 81 B | 81 B | ✓ |
| _buildManifest.js gzip | 61 B | 61 B | ✓ |
| _buildManifest.module.js | 81 B | 81 B | ✓ |
| _buildManife..dule.js gzip | 61 B | 61 B | ✓ |
| Overall change | 162 B | 162 B | ✓ |


Rendered Page Sizes

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| index.html | 3.62 kB | 3.62 kB | ✓ |
| index.html gzip | 946 B | 946 B | ✓ |
| link.html | 3.66 kB | 3.66 kB | ✓ |
| link.html gzip | 954 B | 954 B | ✓ |
| withRouter.html | 3.67 kB | 3.67 kB | ✓ |
| withRouter.html gzip | 942 B | 942 B | ✓ |
| Overall change | 10.9 kB | 10.9 kB | ✓ |




Serverless Mode



General

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| buildDuration | 16.4s | 16.6s | ⚠️ +237ms |
| nodeModulesSize | 48.3 MB | 48.3 MB | ✓ |


Client Bundles (main, webpack, commons)

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| main-HASH.js | 18.9 kB | 18.9 kB | ✓ |
| main-HASH.js gzip | 6.79 kB | 6.79 kB | ✓ |
| webpack-HASH.js | 1.53 kB | 1.53 kB | ✓ |
| webpack-HASH.js gzip | 746 B | 746 B | ✓ |
| 4952ddcd88e7..2b8407376.js | 21.9 kB | 21.9 kB | ✓ |
| 4952ddcd88e7..7376.js gzip | 7.81 kB | 7.81 kB | ✓ |
| de003c3a9d30..6604acae7.js | 43.2 kB | 43.2 kB | ✓ |
| de003c3a9d30..cae7.js gzip | 15.5 kB | 15.5 kB | ✓ |
| framework.5b..dbaff70d3.js | 125 kB | 125 kB | ✓ |
| framework.5b..70d3.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 211 kB | 211 kB | ✓ |


Client Bundles (main, webpack, commons) Modern

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| main-HASH.module.js | 17.2 kB | 17.2 kB | ✓ |
| main-HASH.module.js gzip | 6.52 kB | 6.52 kB | ✓ |
| webpack-HASH.module.js | 1.53 kB | 1.53 kB | ✓ |
| webpack-HASH..dule.js gzip | 746 B | 746 B | ✓ |
| de003c3a9d30..42.module.js | 45.6 kB | 45.6 kB | ✓ |
| de003c3a9d30..dule.js gzip | 16.5 kB | 16.5 kB | ✓ |
| framework.5b..d3.module.js | 125 kB | 125 kB | ✓ |
| framework.5b..dule.js gzip | 39.4 kB | 39.4 kB | ✓ |
| Overall change | 190 kB | 190 kB | ✓ |


Client Pages

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _app.js | 1.81 kB | 1.81 kB | ✓ |
| _app.js gzip | 873 B | 873 B | ✓ |
| _error.js | 12 kB | 12 kB | ✓ |
| _error.js gzip | 4.73 kB | 4.73 kB | ✓ |
| hooks.js | 12.7 kB | 12.7 kB | ✓ |
| hooks.js gzip | 4.79 kB | 4.79 kB | ✓ |
| index.js | 318 B | 318 B | ✓ |
| index.js gzip | 222 B | 222 B | ✓ |
| link.js | 8.14 kB | 8.14 kB | ✓ |
| link.js gzip | 3.5 kB | 3.5 kB | ✓ |
| routerDirect.js | 408 B | 408 B | ✓ |
| routerDirect.js gzip | 281 B | 281 B | ✓ |
| withRouter.js | 419 B | 419 B | ✓ |
| withRouter.js gzip | 280 B | 280 B | ✓ |
| Overall change | 35.8 kB | 35.8 kB | ✓ |


Client Pages Modern

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _app.module.js | 1.7 kB | 1.7 kB | ✓ |
| _app.module.js gzip | 832 B | 832 B | ✓ |
| _error.module.js | 23.3 kB | 23.3 kB | ✓ |
| _error.module.js gzip | 8.59 kB | 8.59 kB | ✓ |
| hooks.module.js | 1.52 kB | 1.52 kB | ✓ |
| hooks.module.js gzip | 793 B | 793 B | ✓ |
| index.module.js | 294 B | 294 B | ✓ |
| index.module.js gzip | 223 B | 223 B | ✓ |
| link.module.js | 8.53 kB | 8.53 kB | ✓ |
| link.module.js gzip | 3.68 kB | 3.68 kB | ✓ |
| routerDirect.module.js | 394 B | 394 B | ✓ |
| routerDirect..dule.js gzip | 281 B | 281 B | ✓ |
| withRouter.module.js | 404 B | 404 B | ✓ |
| withRouter.m..dule.js gzip | 278 B | 278 B | ✓ |
| Overall change | 36.1 kB | 36.1 kB | ✓ |


Client Build Manifests

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _buildManifest.js | 81 B | 81 B | ✓ |
| _buildManifest.js gzip | 61 B | 61 B | ✓ |
| _buildManifest.module.js | 81 B | 81 B | ✓ |
| _buildManife..dule.js gzip | 61 B | 61 B | ✓ |
| Overall change | 162 B | 162 B | ✓ |


Serverless bundles

| | zeit/next.js canary | zeit/next.js canary | Change |
| - | - | - | - |
| _error.js | 253 kB | 253 kB | ✓ |
| _error.js gzip | 67.9 kB | 67.9 kB | ✓ |
| hooks.html | 3.75 kB | 3.75 kB | ✓ |
| hooks.html gzip | 979 B | 979 B | ✓ |
| index.js | 254 kB | 254 kB | ✓ |
| index.js gzip | 68.2 kB | 68.2 kB | ✓ |
| link.js | 261 kB | 261 kB | ✓ |
| link.js gzip | 70.3 kB | 70.3 kB | ✓ |
| routerDirect.js | 255 kB | 255 kB | ✓ |
| routerDirect.js gzip | 68.3 kB | 68.3 kB | ✓ |
| withRouter.js | 254 kB | 254 kB | ✓ |
| withRouter.js gzip | 68.4 kB | 68.4 kB | ✓ |
| Overall change | 1.28 MB | 1.28 MB | ✓ |

Commit: a918d4ecb2951bb6501a940ca01d42b6f1da7de3

ijjk picture ijjk on 5 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

irrigator picture irrigator  ·  3Comments
formula349 picture formula349  ·  3Comments
jesselee34 picture jesselee34  ·  3Comments
olifante picture olifante  ·  3Comments
sospedra picture sospedra  ·  3Comments