potential extraneous div surrounding #__next #822

alexnewmannn · 2017-01-18T22:53:15Z

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:

Before 1.x.x

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!

The text was updated successfully, but these errors were encountered:

timneutkens · 2017-01-18T23:30:27Z

cc @nkzawa

alexnewmannn · 2017-01-19T00:12:20Z

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.

arunoda · 2017-01-19T00:46:40Z

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

alexnewmannn · 2017-01-19T08:37:09Z

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

yunyu · 2017-09-09T14:04:50Z

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;
        }

tgdn · 2017-10-20T17:55:02Z

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

timneutkens · 2017-10-20T18:06:01Z

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

TooTallNate · 2017-11-29T21:44:08Z

This is still an issue with Next.js 4

timneutkens · 2017-11-30T11:25:18Z

Fixed in #3327, will be released soon 👍

julkue · 2018-05-18T20:00:35Z

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

Soundvessel · 2018-08-16T16:31:02Z

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

timneutkens · 2018-08-16T16:57:23Z

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

ijjk · 2019-10-05T03:57:02Z

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: a918d4e

timneutkens added the Type: Question label Jan 18, 2017

arunoda added good first issue Easy to fix issues, good for newcomers Nice to have labels Jan 19, 2017

alexnewmannn mentioned this issue Jan 19, 2017

Move nextdata into nextScript and make Main return a single el #831

Merged

arunoda closed this as completed in #831 Jan 20, 2017

TooTallNate reopened this Nov 29, 2017

timneutkens closed this as completed Nov 30, 2017

timneutkens reopened this Nov 30, 2017

timneutkens closed this as completed Nov 30, 2017

lock bot locked as resolved and limited conversation to collaborators Aug 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

potential extraneous div surrounding #__next #822

potential extraneous div surrounding #__next #822

alexnewmannn commented Jan 18, 2017

timneutkens commented Jan 18, 2017

alexnewmannn commented Jan 19, 2017

arunoda commented Jan 19, 2017

alexnewmannn commented Jan 19, 2017

yunyu commented Sep 9, 2017 •

edited

Loading

tgdn commented Oct 20, 2017

timneutkens commented Oct 20, 2017

TooTallNate commented Nov 29, 2017

timneutkens commented Nov 30, 2017

julkue commented May 18, 2018

Soundvessel commented Aug 16, 2018

timneutkens commented Aug 16, 2018

ijjk commented Oct 5, 2019

potential extraneous div surrounding #__next #822

potential extraneous div surrounding #__next #822

Comments

alexnewmannn commented Jan 18, 2017

timneutkens commented Jan 18, 2017

alexnewmannn commented Jan 19, 2017

arunoda commented Jan 19, 2017

alexnewmannn commented Jan 19, 2017

yunyu commented Sep 9, 2017 • edited Loading

tgdn commented Oct 20, 2017

timneutkens commented Oct 20, 2017

TooTallNate commented Nov 29, 2017

timneutkens commented Nov 30, 2017

julkue commented May 18, 2018

Soundvessel commented Aug 16, 2018

timneutkens commented Aug 16, 2018

ijjk commented Oct 5, 2019

Stats from current PR

yunyu commented Sep 9, 2017 •

edited

Loading