I am working on a NextJS site that has some custom styling that is being applied via MaterialUI's makeStyles. It works fine on the first load and then undoes all of the custom work on the second. It seems that it has something to do with the route as the only time that it works is when I first am directed to the page itself. It is happening on 2 different pages one is being directed via href='/login'and the other is being directed via next/router router.push('/register')
I am assuming that this has to do with the way that Next loads the page? But I will say that both of these are prerendered pages according to the icon at the bottom right.
import React, {useState} from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { login } from '../store/user/action'
import { useRouter } from 'next/router'
import TextField from '#material-ui/core/TextField';
import { makeStyles } from '#material-ui/core/styles';
const style = makeStyles({
root: {
marginBottom: '20px',
textAlign: 'center'
},
});
function Signin({login}) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const router = useRouter();
const clickRegister = (e) => {
e.preventDefault();
router.push('/register')
}
const classStyle = style();
return (
<div className='flex flex-column center m-20 w-750'>
<h3 className='m-20'>Login</h3>
<form className='flex flex-column w-750 center' onSubmit={e=>login(e, {email, password})} >
<TextField
className={classStyle.root}
required
type='email'
id="email"
label="Email"
variant="outlined"
onChange={e=>setEmail(e.target.value)}
/>
<TextField
className={classStyle.root}
required
type='password'
id="password"
label="Password"
variant="outlined"
onChange={e=>setPassword(e.target.value)}
/>
<input
type='submit'
className='purple-button mt-20 h-3'
onClick={e=>login(e)}
value='Login' />
</form>
<p>Don't Have an account?</p>
<form onSubmit='/register'>
<input value='Register' type='submit' className='flex flex-column w-750 center purple-button h-3' onClick={e=>clickRegister(e)} />
</form>
</div>
)
}
const mapStateToProps = (state) => ({
email: state.user.email,
token: state.user.token,
isLoggedIn: state.user.isLoggedIn,
})
const mapDispatchToProps = (dispatch) => {
return {
login: bindActionCreators(login, dispatch),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Signin)
"dependencies": {
"#material-ui/core": "4.11.3",
"axios": "0.21.1",
"material-ui": "0.20.2",
"next": "9.4.1",
"next-redux-wrapper": "^6.0.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "7.1.3",
"redux": "4.0.5",
"redux-devtools-extension": "2.13.8",
"redux-thunk": "2.3.0"
},
You need additional setup for Material-UI stylesheets in pages/_document.js to support SSR styling.
From MaterialUI v5
If you don't have a custom _document yet, create one with the following code:
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '#emotion/server/create-instance';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const originalRenderPage = ctx.renderPage;
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => function EnhanceApp(props) {
return <App emotionCache={cache} {...props} />;
}
});
const initialProps = await Document.getInitialProps(ctx);
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={`${style.key} ${style.ids.join(' ')}`}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));
return {
...initialProps,
emotionStyleTags,
};
}
render() {
return (
<Html lang="en">
<Head>
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="shortcut icon" href="/static/favicon.ico" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
{this.props.emotionStyleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
};
Then, in your _app.
import React from 'react';
import Head from 'next/head';
import { ThemeProvider } from '#mui/material/styles';
import CssBaseline from '#mui/material/CssBaseline';
import { CacheProvider } from '#emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
const clientSideEmotionCache = createEmotionCache();
export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}
Before MaterialUI v5
If you don't have a custom _document.js yet, create one with the following code:
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '#material-ui/core/styles';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement()
]
};
}
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
You can then remove the server-side injected styles in your custom _app.js.
useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
For further details check Material-UI official documentation.
Related
This question already has an answer here:
NextJs dynamic open graph meta tags not rendering for facebook debugger
(1 answer)
Closed 11 months ago.
I want to change the Head tag dynamically using next-seo.
Browser validation will reflect NEXTSeo for individual pages, but Twitter, Firebase's card validation tool, etc. will respond to the default next-seo-config.js.
Does anyone know what to do?
Similar problems:
Facebook debugger does not pick up Next.js next-seo meta tags
https://github.com/garmeeh/next-seo/issues/113
https://github.com/garmeeh/next-seo/issues/99
_app.js
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import Script from 'next/script'
import Head from 'next/head'
import * as gtag from '../lib/gtag.js'
import { GA_TRACKING_ID } from '../lib/gtag'
import { Provider } from "react-redux"
import { PersistGate } from 'redux-persist/integration/react'
import redux, { persistor } from '../components/store/redux.js'
import { DefaultSeo } from 'next-seo'
import SEO from '../../next-seo.config'
import Header from '../components/block/Header'
import Footer from '../components/block/Footer'
import { config } from '#fortawesome/fontawesome-svg-core'
import '#fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false
export default function App({ Component, pageProps }) {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url)
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return (
<>
<Head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</Head>
{/* Analytics */}
<Script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>
<Script
id="analytics"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
<DefaultSeo {...SEO} />
<Provider store={redux}>
<PersistGate loading={null} persistor={persistor}>
<Header />
<Component {...pageProps} />
<Footer />
</PersistGate>
</Provider>
</>
)
}
_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="ja">
<Head>
<meta charSet="UTF-8" />
<meta name="theme-color" content="#000000" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
Page.js
import { NextSeo } from 'next-seo'
const Page = () => {
const title = "title"
const description = "description"
const url = "https://test.com/"
return (
<div>
<NextSeo
title={title}
description={description}
url={url}
canonical={url}
openGraph={{
ur: url,
title: title,
description: description,
type: "article"
}}
/>
<div>contents</div>
</div>
)
}
export default Page
Self resolved.
The cause of not being reflected was redux-persist.
Reference ↓
https://qiita.com/miyabiya/items/14e4f133d5df5d53cd77
I am trying to access LaunchDarkly flags from my App context. The code looks like:
import { useState, useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { MuiPickersUtilsProvider } from '#material-ui/pickers';
import DateFnsUtils from '#date-io/date-fns';
import { ApolloProvider } from 'react-apollo';
import { Route, Router, Switch } from 'react-router-dom';
import { withLDProvider } from 'launchdarkly-react-client-sdk';
import { Loading } from '#ap/owl-ui-controls';
import { useAuth0 } from './context/Authentication';
import LabelContext from './context/LabelContext';
import { CommunityByNameContext } from './context/CommunityByNameContext';
import { segment_init } from './utils/segment';
import withConfig, { ConfigEnum } from './utils/withConfig';
import client from './utils/graphQLClient';
import labels from './config/labels';
import CurrentUser from './services/CurrentUser';
import Layout from './Layout';
import history from './utils/history';
import { SearchCommunity } from './common/Filters/SearchNameFilter/findCommunitiesQuery';
import AmplitudeContext, { AmplitudeData } from './context/AmplitudeContext';
import { DisclosuresContextProvider } from './context/DisclosuresContext';
import placeService from './services/placesService';
import { FeaturedCommunitiesIdsProvider } from './context/FeaturedCommunitiesIdsContext';
import { optimizelyInit } from './utils/optimizely';
import { FamilyFileContextProvider } from './context/FamilyFileContext';
const segmentKey = withConfig(ConfigEnum.SEGMENT_KEY);
const currentUserString = localStorage.getItem('CURRENT_USER');
const App = () => {
const { loading } = useAuth0();
const [currentUser, setCurrentUser] = useState(currentUserString ? JSON.parse(currentUserString) : null);
const [communityByName, setCommunityByName] = useState<SearchCommunity | null>(null);
const [amplitude, setAmplitude] = useState<AmplitudeData>({});
useEffect(() => {
placeService.init();
}, []);
if (loading) {
return <Loading />;
}
return (
<>
<Helmet>
<title>Beacon</title>
<script type="text/javascript">{optimizelyInit(flags)}</script>
<script type="text/javascript">{segment_init(segmentKey, currentUser)}</script>
</Helmet>
<LabelContext.Provider value={labels}>
<CommunityByNameContext.Provider value={{ communityByName, setCommunityByName }}>
<FeaturedCommunitiesIdsProvider>
<AmplitudeContext.Provider value={{ amplitude, setAmplitude }}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<ApolloProvider client={client}>
{/* #ts-ignore */}
<CurrentUser onUserChanged={(currentUser: any) => setCurrentUser(currentUser)}>
<FamilyFileContextProvider>
<DisclosuresContextProvider>
<Router history={history}>
<Switch>
<Route path="/communities" component={Layout} />
</Switch>
</Router>
</DisclosuresContextProvider>
</FamilyFileContextProvider>
</CurrentUser>
</ApolloProvider>
</MuiPickersUtilsProvider>
</AmplitudeContext.Provider>
</FeaturedCommunitiesIdsProvider>
</CommunityByNameContext.Provider>
</LabelContext.Provider>
</>
);
};
export default withLDProvider({
clientSideID: withConfig(ConfigEnum.LD_CLIENT_SIDE_ID),
})(App);
My nested components, like for example <CurrentUser /> get LD flags, and I am able to access them as:
const CurrentUser = ({ children, flags, onUserChanged })
However, I also need LD flags inside <App /> so I could do:
<Helmet>
<title>Beacon</title>
{flags.optimizely && <script type="text/javascript">{optimizelyInit(flags)}</script>}
<script type="text/javascript">{segment_init(segmentKey, currentUser)}</script>
</Helmet>
I have tried accessing flags with const App = ({ flags }), but the value is always undefined.
I even tried sticking the below into a component
const DocumentHead = ({ flags, segmentKey, currentUser }) => (
<Helmet>
<title>Beacon</title>
<script type="text/javascript">{optimizelyInit(flags)}</script>
<script type="text/javascript">{segment_init(segmentKey, currentUser)}</script>
</Helmet>
);
Flags are still undefined.
Suggestions?
Apparently, there is a useFlags hook. We can get flags as:
const flags = useFlags();
This can be called from the <App /> component.
I have copied over the _document.js from the next styled components example and I am using the babel plugin from the styled components docs, but I am still getting the error.
_document.js
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
}
} finally {
sheet.seal()
}
}
}
.babelrc
{
"presets": [
"next/babel"
],
"plugins": [
[
"babel-plugin-styled-components"
]
]
}
Just started using next on wednesday so still fairly new with the technology, but I've looked through all the docs and this seems to be what is supposed to work, but I am still getting the error, any thoughts?
You aren't rendering() then returning () any jsx. That's your issue here most likely. You should also be importing Html, Head, Main, and NextScript from "next/document".
To resolve your issue, try refactoring as follows:
import Document { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
)
};
} finally {
sheet.seal()
}
}
render() {
return (
<Html lang='en'>
<Head>
<meta charSet='utf-8' />
{this.props.styles}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
Then in _app.jsx you will import { ThemeProvider } from styled-components. ThemeProvider wraps the custom styled-components GlobalTheme JSX Element imported from another file. The following snippet is in typescript from a project I built a couple months ago. Most is relevant with the exception of the AppProps tidbit:
import Head from "next/head";
import { AppProps } from "next/app";
import { ThemeProvider } from "styled-components";
import { GlobalStyle, theme } from "../shared";
export default function App({ Component, pageProps }: AppProps) {
return (
<ThemeProvider theme={theme}>
<GlobalStyle theme={theme} />
<Head>
<title>Next.js</title>
</Head>
<main className="main">
<Component {...pageProps} />
</main>
</ThemeProvider>
)
}
I've a problem to integrate the theming functionality inside my next.js project who use react-jss. I tried the ThemeProvider who I've found inside the documentation.
Everytime, my front-end page refresh two times. The first times, I can see that the CSS theme is apply but fews milliseconds later, the page refresh and the theme disappear.
Do you have an idea to fix my problem? Here are my files:
_document.jsx
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import {
SheetsRegistry,
JssProvider,
ThemeProvider,
} from 'react-jss';
const theme = {
colorPrimary: 'green',
};
export default class JssDocument extends Document {
static getInitialProps(ctx) {
const registry = new SheetsRegistry();
const page = ctx.renderPage(App => props => (
<ThemeProvider theme={theme}>
<JssProvider registry={registry}>
<App {...props} />
</JssProvider>
</ThemeProvider>
));
return {
...page,
registry,
};
}
render() {
return (
<html lang="en">
<Head>
<style id="server-side-styles">
{this.props.registry.toString()}
</style>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
index.jsx
import React from 'react';
import injectSheet from 'react-jss';
import PropTypes from 'prop-types';
const styles = theme => ({
myButton: {
backgroundColor: 'black',
color: theme.colorPrimary,
},
});
const Index = ({ classes }) => (
<div className={classes.myButton}>Welcome to Novatopo website!</div>
);
Index.propTypes = {
classes: PropTypes.shape({
myButton: PropTypes.string,
}).isRequired,
};
export default injectSheet(styles)(Index);
_app.jsx
import App from 'next/app';
export default class MyApp extends App {
componentDidMount() {
const style = document.getElementById('server-side-styles');
if (style) {
style.parentNode.removeChild(style);
}
}
}
Here a CodeSandbox to reproduce the problem: codesandbox.io/s/pyrznxkr1j
2 things you could do:
prepare a codesandbox example
use ThemeProvider inside of JssProvider
I resolved the problem. You need to integrate the ThemeProvider logic inside the _app.jsx file.
Like that:
export default class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
);
}
}
I am using material UI with Next.js. I am running onnpm run dev. My problem is that the styling on the site completely breaks whenever I press the reloading button on the browser. Is this normal behavior? Seems like Material-UI stops working.
Here is my code.
I have an index.js and a component.
index
import React, { Component } from 'react'
import CssBaseline from '#material-ui/core/CssBaseline';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import AppBar from '../components/NavBar/NavBar';
const theme = createMuiTheme({
palette: {
primary: {
main: '#f28411',
},
},
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<CssBaseline />
<AppBar />
</React.Fragment>
</MuiThemeProvider>
)
}
}
export default App
component
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar'
import Toolbar from '#material-ui/core/Toolbar'
import Typography from '#material-ui/core/Typography'
class NavBar extends Component {
render() {
const { classes } = this.props;
return(
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="title" color="inherit">
Test
</Typography>
</Toolbar>
</AppBar>
</div>
);
}
}
const styles = theme => ({
title: {
color: '#FFF',
},
});
NavBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(NavBar);
I had this same issue but was not using styled-components so the above answer did not apply, so I thought I would post in case this helps anyone else. To fix this, I just had to add the _document.js file under the pages/ directory included in the material-ui sample:
import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheets } from '#material-ui/core/styles'
import theme from '../shared/utils/theme'
export default class MyDocument extends Document {
render() {
return (
<Html lang='en'>
<Head>
<meta name='theme-color' content={theme.palette.primary.main} />
<link
rel='stylesheet'
href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
MyDocument.getInitialProps = async (ctx) => {
const sheets = new ServerStyleSheets()
const originalRenderPage = ctx.renderPage
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement(),
],
}
}
It could be possible that you need a babel plugin for this.
In your package, add
npm install --save-dev babel-plugin-styled-components
In your .babelrc, add
{
"plugins": [
[ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
]
}
Let me know if this works.
As it turns out, you cannot use all of the third-party libraries for Next JS in the same way as you would use for React apps. You need to modify your pages/_document.js and pages/_app.js. Also, you will need theme.js for configuring Material UI colors and other default styles. You can include theme.js to any folder, in my case it is in helpers folder.
_app.js
import React from "react";
import App from "next/app";
import theme from '../helpers/theme'; // needed for Material UI
import CssBaseline from '#material-ui/core/CssBaseline';
import {ThemeProvider} from '#material-ui/core/styles';
class MyApp extends App {
static async getInitialProps({Component, ctx}) {
const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
//Anything returned here can be accessed by the client
return {pageProps: pageProps};
}
render() {
const {Component, pageProps, router} = this.props;
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{/* default by next js */}
<Component {...pageProps}/>
</ThemeProvider>
)
}
}
export default MyApp
_document.js
import Document, {Html, Head, Main, NextScript} from "next/document";
import theme from '../helpers/theme';
import { ServerStyleSheets } from '#material-ui/core/styles';
import React from "react";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
let props = {...initialProps};
return props;
}
render() {
return (
<Html>
<Head>
<meta name="theme-color" content={theme.palette.primary.main} />
</Head>
<body>
<Main/>
<NextScript/>
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and register rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
theme.js
import { createMuiTheme } from '#material-ui/core/styles';
import { red } from '#material-ui/core/colors';
// Create a theme instance.
const theme = createMuiTheme({
palette: {
primary: {
main: '#FFF212',
},
secondary: {
main: '#FFF212',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
});
export default theme;
There is an amazing repository in Github https://github.com/vercel/next.js/tree/canary/examples
There you can find a list of libraries with the correct way of using them in Next JS apps.
For your case here is the link: https://github.com/vercel/next.js/tree/canary/examples/with-material-ui.