diff --git a/examples/nextjs-13/.gitignore b/examples/nextjs-13/.gitignore
new file mode 100644
index 00000000000000..1437c53f70bc21
--- /dev/null
+++ b/examples/nextjs-13/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/nextjs-13/README.md b/examples/nextjs-13/README.md
new file mode 100644
index 00000000000000..50159307630c0c
--- /dev/null
+++ b/examples/nextjs-13/README.md
@@ -0,0 +1,46 @@
+# Next.js example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```sh
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs-13
+cd nextjs
+```
+
+Install it and run:
+
+```sh
+npm install
+npm run dev
+```
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs-13)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/nextjs-13)
+
+## The idea behind the example
+
+The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps.
+It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5.
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+This examples uses the new experimental features of Next.js 13 - the app directory and client components.
+
+## The link component
+
+The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.
+More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js).
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section.
diff --git a/examples/nextjs-13/app/emotion.js b/examples/nextjs-13/app/emotion.js
new file mode 100644
index 00000000000000..b34f6a1487c564
--- /dev/null
+++ b/examples/nextjs-13/app/emotion.js
@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CacheProvider } from '@emotion/react';
+import { useServerInsertedHTML } from 'next/navigation';
+import createEmotionCache from '../src/createEmotionCache';
+
+export default function RootStyleRegistry({ children }) {
+  const [cache] = React.useState(() => {
+    const c = createEmotionCache();
+    c.compat = true;
+    return c;
+  });
+
+  useServerInsertedHTML(() => {
+    return (
+      <style
+        data-emotion={`${cache.key} ${Object.keys(cache.inserted).join(' ')}`}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: Object.values(cache.inserted).join(' '),
+        }}
+      />
+    );
+  });
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+}
+
+RootStyleRegistry.propTypes = {
+  children: PropTypes.node,
+};
diff --git a/examples/nextjs-13/app/layout.js b/examples/nextjs-13/app/layout.js
new file mode 100644
index 00000000000000..c1641024f6a3be
--- /dev/null
+++ b/examples/nextjs-13/app/layout.js
@@ -0,0 +1,30 @@
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import RootStyleRegistry from './emotion';
+import theme, { roboto } from '../src/theme';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={roboto.className}>
+      <head>
+        <meta name="emotion-insertion-point" content="" />
+      </head>
+      <body>
+        <RootStyleRegistry>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            {children}
+          </ThemeProvider>
+        </RootStyleRegistry>
+      </body>
+    </html>
+  );
+}
+
+RootLayout.propTypes = {
+  children: PropTypes.node,
+};
diff --git a/examples/nextjs-13/app/next13/page.js b/examples/nextjs-13/app/next13/page.js
new file mode 100644
index 00000000000000..c99c55d58ec843
--- /dev/null
+++ b/examples/nextjs-13/app/next13/page.js
@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ProTip from '../../src/ProTip';
+import Link from '../../src/Link';
+import Copyright from '../../src/Copyright';
+
+export default function About() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Next.js app page example
+        </Typography>
+        <Button variant="outlined" component={Link} noLinkStyle href="/">
+          Go to the main page
+        </Button>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}
diff --git a/examples/nextjs-13/next.config.js b/examples/nextjs-13/next.config.js
new file mode 100644
index 00000000000000..d0fc4916e8105b
--- /dev/null
+++ b/examples/nextjs-13/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  reactStrictMode: true,
+  experimental: {
+    appDir: true,
+  },
+};
diff --git a/examples/nextjs-13/package.json b/examples/nextjs-13/package.json
new file mode 100644
index 00000000000000..e5fcbbf89b8ef1
--- /dev/null
+++ b/examples/nextjs-13/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "nextjs-13",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "latest",
+    "@emotion/server": "latest",
+    "@emotion/styled": "latest",
+    "@mui/material": "latest",
+    "@next/font": "latest",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "eslint": "latest",
+    "eslint-config-next": "latest"
+  }
+}
diff --git a/examples/nextjs-13/pages/_app.js b/examples/nextjs-13/pages/_app.js
new file mode 100644
index 00000000000000..31a9f91e9a96ad
--- /dev/null
+++ b/examples/nextjs-13/pages/_app.js
@@ -0,0 +1,34 @@
+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,
+};
diff --git a/examples/nextjs-13/pages/_document.js b/examples/nextjs-13/pages/_document.js
new file mode 100644
index 00000000000000..f1c83a9250ae77
--- /dev/null
+++ b/examples/nextjs-13/pages/_document.js
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+import createEmotionServer from '@emotion/server/create-instance';
+import theme, { roboto } from '../src/theme';
+import createEmotionCache from '../src/createEmotionCache';
+
+export default class MyDocument extends Document {
+  render() {
+    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="" />
+          {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) => {
+  // 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,
+  };
+};
diff --git a/examples/nextjs-13/pages/about.js b/examples/nextjs-13/pages/about.js
new file mode 100644
index 00000000000000..af22feadea9549
--- /dev/null
+++ b/examples/nextjs-13/pages/about.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import ProTip from '../src/ProTip';
+import Link from '../src/Link';
+import Copyright from '../src/Copyright';
+
+export default function About() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Next.js example
+        </Typography>
+        <Button variant="outlined" component={Link} noLinkStyle href="/">
+          Go to the main page
+        </Button>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}
diff --git a/examples/nextjs-13/pages/api/hello.js b/examples/nextjs-13/pages/api/hello.js
new file mode 100644
index 00000000000000..d49a2572c6a911
--- /dev/null
+++ b/examples/nextjs-13/pages/api/hello.js
@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: 'John Doe' });
+}
diff --git a/examples/nextjs-13/pages/index.js b/examples/nextjs-13/pages/index.js
new file mode 100644
index 00000000000000..a95e3d5f9c9d3f
--- /dev/null
+++ b/examples/nextjs-13/pages/index.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import ProTip from '../src/ProTip';
+import Link from '../src/Link';
+import Copyright from '../src/Copyright';
+
+export default function Index() {
+  return (
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Next.js example
+        </Typography>
+        <Stack gap={1}>
+          <Link href="/about" color="secondary">
+            Go to the about page
+          </Link>
+          <Link href="/next13" color="secondary">
+            Go to an app page
+          </Link>
+        </Stack>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}
diff --git a/examples/nextjs-13/public/favicon.ico b/examples/nextjs-13/public/favicon.ico
new file mode 100644
index 00000000000000..718d6fea4835ec
Binary files /dev/null and b/examples/nextjs-13/public/favicon.ico differ
diff --git a/examples/nextjs-13/public/vercel.svg b/examples/nextjs-13/public/vercel.svg
new file mode 100644
index 00000000000000..fbf0e25a651c28
--- /dev/null
+++ b/examples/nextjs-13/public/vercel.svg
@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
\ No newline at end of file
diff --git a/examples/nextjs-13/src/Copyright.js b/examples/nextjs-13/src/Copyright.js
new file mode 100644
index 00000000000000..cfab5168a3f182
--- /dev/null
+++ b/examples/nextjs-13/src/Copyright.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import MuiLink from '@mui/material/Link';
+
+export default function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <MuiLink color="inherit" href="https://mui.com/">
+        Your Website
+      </MuiLink>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}
diff --git a/examples/nextjs-13/src/Link.js b/examples/nextjs-13/src/Link.js
new file mode 100644
index 00000000000000..66abb2863e6ab0
--- /dev/null
+++ b/examples/nextjs-13/src/Link.js
@@ -0,0 +1,142 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import { usePathname } from 'next/navigation';
+import NextLink from 'next/link';
+import MuiLink from '@mui/material/Link';
+import { styled } from '@mui/material/styles';
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled('a')({});
+
+export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) {
+  const {
+    to,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior = true,
+    locale,
+    ...other
+  } = props;
+
+  return (
+    <NextLink
+      href={to}
+      prefetch={prefetch}
+      as={linkAs}
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+      passHref
+      legacyBehavior={legacyBehavior}
+      locale={locale}
+    >
+      <Anchor ref={ref} {...other} />
+    </NextLink>
+  );
+});
+
+NextLinkComposed.propTypes = {
+  href: PropTypes.any,
+  legacyBehavior: PropTypes.bool,
+  linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  locale: PropTypes.string,
+  passHref: PropTypes.bool,
+  prefetch: PropTypes.bool,
+  replace: PropTypes.bool,
+  scroll: PropTypes.bool,
+  shallow: PropTypes.bool,
+  to: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+};
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/api-reference/next/link
+const Link = React.forwardRef(function Link(props, ref) {
+  const {
+    activeClassName = 'active',
+    as,
+    className: classNameProps,
+    href,
+    legacyBehavior,
+    linkAs: linkAsProp,
+    locale,
+    noLinkStyle,
+    prefetch,
+    replace,
+    role, // Link don't have roles.
+    scroll,
+    shallow,
+    ...other
+  } = props;
+
+  const router = useRouter();
+  // Next.js 13 pathname
+  const next13Pathname = usePathname();
+
+  const pathname = typeof href === 'string' ? href : href.pathname;
+  const className = clsx(classNameProps, {
+    [activeClassName]:
+      ((router && router.pathname === pathname) ||
+        (next13Pathname && next13Pathname === pathname)) &&
+      activeClassName,
+  });
+
+  const isExternal =
+    typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0);
+
+  if (isExternal) {
+    if (noLinkStyle) {
+      return <Anchor className={className} href={href} ref={ref} {...other} />;
+    }
+
+    return <MuiLink className={className} href={href} ref={ref} {...other} />;
+  }
+
+  const linkAs = linkAsProp || as;
+  const nextjsProps = {
+    to: href,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior,
+    locale,
+  };
+
+  if (noLinkStyle) {
+    return <NextLinkComposed className={className} ref={ref} {...nextjsProps} {...other} />;
+  }
+
+  return (
+    <MuiLink
+      component={NextLinkComposed}
+      className={className}
+      ref={ref}
+      {...nextjsProps}
+      {...other}
+    />
+  );
+});
+
+Link.propTypes = {
+  activeClassName: PropTypes.string,
+  as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  className: PropTypes.string,
+  href: PropTypes.any,
+  legacyBehavior: PropTypes.bool,
+  linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  locale: PropTypes.string,
+  noLinkStyle: PropTypes.bool,
+  prefetch: PropTypes.bool,
+  replace: PropTypes.bool,
+  role: PropTypes.string,
+  scroll: PropTypes.bool,
+  shallow: PropTypes.bool,
+};
+
+export default Link;
diff --git a/examples/nextjs-13/src/ProTip.js b/examples/nextjs-13/src/ProTip.js
new file mode 100644
index 00000000000000..6d81f33b0a0dad
--- /dev/null
+++ b/examples/nextjs-13/src/ProTip.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import SvgIcon from '@mui/material/SvgIcon';
+import Typography from '@mui/material/Typography';
+
+function LightBulbIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  );
+}
+
+export default function ProTip() {
+  return (
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+      Pro tip: See more <Link href="https://mui.com/getting-started/templates/">templates</Link> on
+      the MUI documentation.
+    </Typography>
+  );
+}
diff --git a/examples/nextjs-13/src/createEmotionCache.js b/examples/nextjs-13/src/createEmotionCache.js
new file mode 100644
index 00000000000000..a1f11107d2ed06
--- /dev/null
+++ b/examples/nextjs-13/src/createEmotionCache.js
@@ -0,0 +1,17 @@
+import createCache from '@emotion/cache';
+
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint });
+}
diff --git a/examples/nextjs-13/src/theme.js b/examples/nextjs-13/src/theme.js
new file mode 100644
index 00000000000000..4d6b9526bc6e6f
--- /dev/null
+++ b/examples/nextjs-13/src/theme.js
@@ -0,0 +1,30 @@
+import { Roboto } from '@next/font/google';
+import { createTheme } from '@mui/material/styles';
+import { red } from '@mui/material/colors';
+
+export const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+  fallback: ['Helvetica', 'Arial', 'sans-serif'],
+});
+
+// Create a theme instance.
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
+});
+
+export default theme;