En este artículo, aprenderemos algunos pasos necesarios adicionales que se deben realizar para integrar Material-UI con el proyecto Next.js.
Primero Comencemos creando un proyecto Next.js.
Cree el proyecto Next.js: ejecute el siguiente comando en la terminal
npx create-next-app gfg-next-mui
Estructura del proyecto: Se verá así.
Instale Material-UI: para instalar las dependencias y guardarlas en su archivo package.json, ejecute:
npm install @mui/material @emotion/react @emotion/styled @emotion/server
Ahora sigue los siguientes pasos:
Paso 1: cree un archivo personalizado /pages/_document.js y agréguele el siguiente código.
_document.js
import * as 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';
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
{/* PWA primary color */}
<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"
/>
{/* Inject MUI styles first to match with the prepend: true configuration. */}
{this.props.emotionStyleTags}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
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-org/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,
};
};
Paso 2: cree una carpeta src , agregue los archivos theme.js y createEmotionCache.js como se muestra a continuación
Theme.js
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';
// Create a theme instance.
const theme = createTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
},
});
export default theme;
createEmotionCache.js
import createCache from '@emotion/cache';
export default function createEmotionCache() {
return createCache({ key: 'css', prepend: true });
}
Paso 3: actualice el archivo /pages/_app.js con el siguiente código
_app.js
import * as React from 'react';
import PropTypes from 'prop-types';
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';
// 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;
return (
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport"
content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant,
consistent, and simple baseline to
build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};
Paso 4: actualice el archivo /pages/index.js con el siguiente código
index.js
import Head from "next/head";
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">
Next.js!</a> integrated with{" "}
<a href="https://mui.com/">Material-UI!</a>
</h1>
<p className={styles.description}>
Get started by editing{" "}
<code className={styles.code}>
pages/index.js</code>
</p>
</main>
</div>
);
}
Pasos para ejecutar la aplicación: Para ejecutar la aplicación, escriba el siguiente comando en la terminal.
npm run dev
Producción:
Publicación traducida automáticamente
Artículo escrito por divyanshuparwal2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA