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

[examples] Use material-nextjs integration package #40199

Merged
merged 10 commits into from
Jan 9, 2024
Merged

[examples] Use material-nextjs integration package #40199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b3364da
update material-ui-nextjs example
siriwatknp Dec 13, 2023
26a3448
update material-ui-nextjs-ts example
siriwatknp Dec 13, 2023
0524e7d
enableCssLayer
siriwatknp Dec 13, 2023
82ae0b4
update material-ui-nextjs-pages-router examples
siriwatknp Dec 13, 2023
cf71191
update nextjs-v4-v5-migration example
siriwatknp Dec 13, 2023
4eeefe7
add missing dep
siriwatknp Dec 13, 2023
fb79cce
Merge branch 'master' of https://github.com/mui/material-ui into exam…
siriwatknp Jan 4, 2024
0978bb1
add "use client"; for app dir examples
siriwatknp Jan 4, 2024
7575ce8
Merge branch 'master' of https://github.com/mui/material-ui into exam…
siriwatknp Jan 8, 2024
96bbe2d
set legacyBehavior to true by default
siriwatknp Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/material-ui-nextjs-pages-router-ts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@emotion/styled": "latest",
"@mui/icons-material": "latest",
"@mui/material": "latest",
"@mui/material-nextjs": "latest",
"next": "latest",
"react": "latest",
"react-dom": "latest"
Expand Down
18 changes: 5 additions & 13 deletions examples/material-ui-nextjs-pages-router-ts/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,15 @@
import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies if I'm missing something, but why do we have these versioned paths (v13-* and v14-*)? It looks like v14- just re-exports everything from v13- so wondering if there's a reason we couldn't have @mui/material-nextjs/pagesRouter and @mui/material-nextjs/appRouter?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the question. It's the versioning flexibility for us to maintain. If Nextjs releases a new major (e.g. v15) with breaking changes but Material UI is still in v5, we still have room to create a new integration with Nextjs v15 and people can just bump the material-nextjs version and switch to v15-* APIs.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For developers, they just need to use material-nextjs with the same version as Material UI and import the integration from the folder that matches your Nextjs version.

Copy link
Contributor

@DonikaV DonikaV Jan 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can not find a module or declarations for
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';

That works
import { AppRouterCacheProvider } from '@mui/material-nextjs/build/v14-appRouter';

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export interface MyAppProps extends AppProps {
emotionCache?: EmotionCache;
}

export default function MyApp(props: MyAppProps) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
export default function MyApp(props: AppProps) {
const { Component, pageProps } = props;
return (
<CacheProvider value={emotionCache}>
<AppCacheProvider {...props}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
Expand All @@ -26,6 +18,6 @@ export default function MyApp(props: MyAppProps) {
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
</AppCacheProvider>
);
}
81 changes: 5 additions & 76 deletions examples/material-ui-nextjs-pages-router-ts/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,17 @@
import * as React from 'react';
import Document, {
Html,
Head,
Main,
NextScript,
DocumentProps,
DocumentContext,
} from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import { AppType } from 'next/app';
import { Html, Head, Main, NextScript, DocumentProps } from 'next/document';
import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v14-pagesRouter';
import theme, { roboto } from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';
import { MyAppProps } from './_app';

interface MyDocumentProps extends DocumentProps {
emotionStyleTags: JSX.Element[];
}

export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
export default function MyDocument(props: DocumentProps) {
return (
<Html lang="en" className={roboto.className}>
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="emotion-insertion-point" content="" />
{emotionStyleTags}
<DocumentHeadTags {...props} />
</Head>
<body>
<Main />
Expand All @@ -35,61 +21,4 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
);
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx: DocumentContext) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render

const originalRenderPage = ctx.renderPage;

// You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);

ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType> & MyAppProps>) =>
function EnhanceApp(props) {
return <App emotionCache={cache} {...props} />;
},
});

const initialProps = await Document.getInitialProps(ctx);
// This is important. It prevents Emotion to render invalid HTML.
// See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
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,
};
};
MyDocument.getInitialProps = documentGetInitialProps;
19 changes: 0 additions & 19 deletions examples/material-ui-nextjs-pages-router-ts/src/createEmotionCache.ts
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions examples/material-ui-nextjs-pages-router/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@emotion/styled": "latest",
"@mui/icons-material": "latest",
"@mui/material": "latest",
"@mui/material-nextjs": "latest",
"next": "latest",
"prop-types": "latest",
"react": "latest",
Expand Down
13 changes: 4 additions & 9 deletions examples/material-ui-nextjs-pages-router/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
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';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
const { Component, pageProps } = props;

return (
<CacheProvider value={emotionCache}>
<AppCacheProvider {...props}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
Expand All @@ -23,12 +19,11 @@ export default function MyApp(props) {
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
</AppCacheProvider>
);
}

MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};
73 changes: 4 additions & 69 deletions examples/material-ui-nextjs-pages-router/pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import { Html, Head, Main, NextScript } from 'next/document';
import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v14-pagesRouter';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

export default function MyDocument(props) {
const { emotionStyleTags } = props;

return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="emotion-insertion-point" content="" />
{emotionStyleTags}
<DocumentHeadTags {...props} />
</Head>
<body>
<Main />
Expand All @@ -25,65 +21,4 @@ export default function MyDocument(props) {
);
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render

const originalRenderPage = ctx.renderPage;

// You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
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);
// This is important. It prevents Emotion to render invalid HTML.
// See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
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,
};
};

MyDocument.propTypes = {
emotionStyleTags: PropTypes.array.isRequired,
};
MyDocument.getInitialProps = documentGetInitialProps;
17 changes: 0 additions & 17 deletions examples/material-ui-nextjs-pages-router/src/createEmotionCache.js
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions examples/material-ui-nextjs-ts-v4-v5-migration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@emotion/styled": "latest",
"@mui/icons-material": "latest",
"@mui/material": "latest",
"@mui/material-nextjs": "latest",
"@mui/styles": "latest",
"autoprefixer": "latest",
"clean-css": "latest",
Expand Down
18 changes: 5 additions & 13 deletions examples/material-ui-nextjs-ts-v4-v5-migration/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export interface MyAppProps extends AppProps {
emotionCache?: EmotionCache;
}

export default function MyApp(props: MyAppProps) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
export default function MyApp(props: AppProps) {
const { Component, pageProps } = props;

React.useEffect(() => {
// Remove the server-side injected CSS.
Expand All @@ -26,7 +18,7 @@ export default function MyApp(props: MyAppProps) {
}, []);

return (
<CacheProvider value={emotionCache}>
<AppCacheProvider {...props}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
Expand All @@ -35,6 +27,6 @@ export default function MyApp(props: MyAppProps) {
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
</AppCacheProvider>
);
}
Loading