Fixed #1549: Modified _app and _document to ensure matching styling between client and server #1550
Conversation
tonyvugithub
requested review from
chrispinkney,
HyperTHD,
manekenpix and
PedroFonsecaDEV
tonyvugithub
requested review from
cindyorangis
and removed request for
chrispinkney,
HyperTHD,
manekenpix,
cindyorangis and
PedroFonsecaDEV
tonyvugithub
force-pushed
the
next-issue1549
branch
from
edfd3f6
to
bfa10e6
Compare
tonyvugithub
requested review from
chrispinkney,
cindyorangis,
PedroFonsecaDEV and
HyperTHD
src/frontend/next/src/pages/_app.tsx
Outdated
| import { AppProps } from 'next/app'; | ||
| import '../styles/globals.css'; | ||
|
|
||
| const App = ({ Component, pageProps }: AppProps) => { | ||
| const AppComponent = ({ Component, pageProps }: AppProps) => { |
There was a problem hiding this comment.
Why the rename from App to AppComponent?
There was a problem hiding this comment.
@chrispinkney : I try to make everything more in React world. Everything is a component including the App. But the name does not affect any functionality
There was a problem hiding this comment.
But to Chris' point, were not going to include a Component suffix on all our components, right? TypeScript provides this via typing, so we don't need to explicitly label it in the names.
There was a problem hiding this comment.
@humphd : got it. I changed it back to App now
| @@ -0,0 +1,49 @@ | |||
| import { Children } from 'react'; | |||
| import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'; | |||
There was a problem hiding this comment.
What is _document.tsx used for? Is it similar to create-react-app's public/index.html file? Does this replace that?
There was a problem hiding this comment.
@chrispinkney Yes, you are right Chris. In Next SSR, by default we skip the definition of the surrounding document's markup. So to include extra links or script or do sth like remove the server's JSS class name, we need to create a custom document.
More about document here: https://nextjs.org/docs/advanced-features/custom-document
src/frontend/next/src/pages/_app.tsx
Outdated
| import { AppProps } from 'next/app'; | ||
| import '../styles/globals.css'; | ||
|
|
||
| const App = ({ Component, pageProps }: AppProps) => { | ||
| const AppComponent = ({ Component, pageProps }: AppProps) => { |
There was a problem hiding this comment.
But to Chris' point, were not going to include a Component suffix on all our components, right? TypeScript provides this via typing, so we don't need to explicitly label it in the names.
tonyvugithub
force-pushed
the
next-issue1549
branch
from
bfa10e6
to
5315146
Compare
tonyvugithub
force-pushed
the
next-issue1549
branch
from
5315146
to
f6a0946
Compare
tonyvugithub
force-pushed
the
next-issue1549
branch
from
f6a0946
to
1849fa7
Compare
Issue This PR Addresses
Fixed #1549
Type of Change
Description
For those JSS that generating class names at run time like MUI, Next renders different class names on server vs client. In this PR, I have modified the _app.tsx and _document.tsx following the recommended example on MUI's website as well as how to do it with Next. More information can be found below.
References:
https://material-ui.com/guides/server-rendering/
https://github.com/mui-org/material-ui/tree/master/examples/nextjs
Checklist