Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve integration with Next.js #26561

Closed
xaiborweb opened this issue Jun 2, 2021 · 11 comments
Closed

Improve integration with Next.js #26561

xaiborweb opened this issue Jun 2, 2021 · 11 comments
Labels
docs Improvements or additions to the documentation examples Relating to /examples nextjs status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it

Comments

@xaiborweb
Copy link

xaiborweb commented Jun 2, 2021 •
edited by oliviertassinari

Currently the version of next.js 10.2.3, does not recommend using getInitialProps, in addition to most frameworks to integrate them with next.js it is enough to import in _app.js and wrap <Component {... pageProps} />

But the example of integration of material-ui with next.js is more than 1 year old, it uses getInitialProps and forces us to edit _document.js in addition to adding an effect to _app.js to remove jssStyles.

I suggest if you could please review this and update the integration with next.js thanks.
@xaiborweb xaiborweb added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 2, 2021
@eps1lon eps1lon added docs Improvements or additions to the documentation new feature New feature or request and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jun 2, 2021
@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 3, 2021 •
edited

does not recommend using getInitialProp

@xaiborweb How would you solve the inlining of critical CSS in the <head> problem? Our example reproduces the pattern used in the official styled-components example. I'm not aware of any alternatives.

@re-thc

This comment was marked as resolved.

Sign in to view
@ghost

This comment was marked as resolved.

Sign in to view
@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 5, 2021 •
edited

Here is why <style> should be under the <head> and not the <body>:

@re-thc
Copy link

re-thc commented Jun 6, 2021

@oliviertassinari are the emotion docs also incorrect?

This only applies if you’re using vanilla Emotion or a version of Emotion prior to v10. For v10 and above, SSR just works in Next.js.

I assume that's what Chakra UI, the quoted example followed.

@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 6, 2021 •
edited

are the emotion docs also incorrect?

@re-thc IMHO, yes, Emotion docs is incorrect. I understand the great DX in having SSR work without any configurations but it's great for end-ussers. A configuration step is required and it didn't stop styled-components to be popular.

I'm closing we haven't identified further opportunities to improve the integration with Next.js

@oliviertassinari oliviertassinari mentioned this issue Jul 5, 2021
Closed
@oliviertassinari oliviertassinari changed the title Update integration with next.js Improve integration with next.js Jul 6, 2021
@oliviertassinari oliviertassinari changed the title Improve integration with next.js Improve integration with Next.js Jul 6, 2021
@oliviertassinari oliviertassinari mentioned this issue Jul 16, 2021
Closed
This was referenced Jul 28, 2021
Merged
Closed
Closed
This was referenced Sep 21, 2021
Closed
Closed
@jordan-choi jordan-choi mentioned this issue Mar 5, 2022
Closed
@3x071c 3x071c mentioned this issue Apr 6, 2022
Closed
This was referenced Apr 22, 2022
Closed
Merged
kodiakhq bot pushed a commit to 3x071c/lsg-remix that referenced this issue Apr 23, 2022
@3x071c
fix: emotion bug (#230)
cd6796d 
🙈 Fix `<style>` elements bleeding into the document `<body>`, a place where they [do not belong](mui/material-ui#26561 (comment))
ℹ️ Removed Remix/React control of the entire document to drastically simplify emotion logic. This also means the Remix `meta`/`link` features no longer work -> [react-helmet](https://github.com/nfl/react-helmet)

Closes #221
@MonstraG MonstraG mentioned this issue May 31, 2022
Closed
2 tasks
@henriqueholtz henriqueholtz mentioned this issue Jun 21, 2022
Closed
@guidorice

This comment was marked as outdated.

Sign in to view
@mathura333 mathura333 mentioned this issue Sep 21, 2022
Closed
2 tasks
@gottfired

This comment was marked as outdated.

Sign in to view
@mxcrtgn mxcrtgn mentioned this issue Oct 11, 2022
Closed
2 tasks
@fuomag9

This comment was marked as resolved.

Sign in to view
@oliviertassinari

This comment was marked as resolved.

Sign in to view
@oliviertassinari oliviertassinari added status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it nextjs examples Relating to /examples and removed new feature New feature or request v5.x labels Feb 27, 2024
@famdude
Copy link

famdude commented Apr 20, 2024 •
edited

does this issue have any relation to the delay for styles to be applied on next js ssr?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs Improvements or additions to the documentation examples Relating to /examples nextjs status: expected behavior Does not imply the behavior is intended. Just that we know about it and can't work around it
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@guidorice @fuomag9 @oliviertassinari @gottfired @xaiborweb @eps1lon @re-thc @famdude