[examples] Next.js v13 app router with Material UI (#37315)

examples/material-next-app-router-ts/.gitignore

@@ -0,0 +1,36 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+# next-env.d.ts

examples/material-next-app-router-ts/README.md

@@ -0,0 +1,31 @@
+# Material UI - Next.js App Router example in TypeScript
+
+## 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/material-next-ts
+cd material-next-app-router-ts
+```
+
+Install it and run:
+
+```sh
+npm install
+npm run dev
+```
+
+## 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](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+
+## 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.

examples/material-next-app-router-ts/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/material-next-app-router-ts/next.config.js

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  modularizeImports: {
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}',
+    },
+  },
+};
+
+module.exports = nextConfig;

examples/material-next-app-router-ts/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "material-next-app-router-ts",
+  "version": "5.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
+  },
+  "dependencies": {
+    "@emotion/cache": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "latest",
+    "@mui/material": "latest",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "typescript": "latest"
+  }
+}

examples/material-next-app-router-ts/src/app/about/page.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import About from '@/layouts/About/About';
+
+export default function AboutPage() {
+  return <About />;
+}

examples/material-next-app-router-ts/src/app/fonts/fonts.ts

@@ -0,0 +1,12 @@
+// Fonts Example
+import { Inter } from 'next/font/google';
+
+const GoogleInterFont = Inter({ subsets: ['latin'] });
+
+export default GoogleInterFont;
+
+// Local Fonts example
+// more details here: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts
+// import localFont from 'next/font/local';
+// const LocalFont = localFont({src: [{path: './path-of-font-file-regular.woff', weight: '400', style: 'normal'}], fallback: ['Arial', 'sans-serif']})
+// export default LocalFont;

examples/material-next-app-router-ts/src/app/layout.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import ThemeRegistry from '@/components/Theme/ThemeRegistry/ThemeRegistry';
+
+export const metadata = {
+  title: 'Next App with MUI5',
+  description: 'next app with mui5',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <ThemeRegistry>{children}</ThemeRegistry>
+      </body>
+    </html>
+  );
+}

examples/material-next-app-router-ts/src/app/page.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Home from '@/layouts/Home/Home';
+
+export default function RootPage() {
+  return <Home />;
+}

examples/material-next-app-router-ts/src/components/CopyRight/Copyright.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+
+export default function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <Link color="inherit" href="https://mui.com/">
+        Your Website
+      </Link>
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}

examples/material-next-app-router-ts/src/components/ProTip/ProTip.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+function LightBulbIcon(props: SvgIconProps) {
+  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> in
+      the MUI documentation.
+    </Typography>
+  );
+}

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/EmotionCache.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import * as React from 'react';
+import createCache from '@emotion/cache';
+import { useServerInsertedHTML } from 'next/navigation';
+import { CacheProvider as DefaultCacheProvider } from '@emotion/react';
+import type { EmotionCache, Options as OptionsOfCreateCache } from '@emotion/cache';
+
+export type NextAppDirEmotionCacheProviderProps = {
+  /** This is the options passed to createCache() from 'import createCache from "@emotion/cache"' */
+  options: Omit<OptionsOfCreateCache, 'insertionPoint'>;
+  /** By default <CacheProvider /> from 'import { CacheProvider } from "@emotion/react"' */
+  CacheProvider?: (props: {
+    value: EmotionCache;
+    children: React.ReactNode;
+  }) => React.JSX.Element | null;
+  children: React.ReactNode;
+};
+
+// This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
+export function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {
+  const { options, CacheProvider = DefaultCacheProvider, children } = props;
+
+  const [{ cache, flush }] = React.useState(() => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = '';
+    // eslint-disable-next-line no-restricted-syntax
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+}

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/ThemeRegistry.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { NextAppDirEmotionCacheProvider } from '@/components/Theme/ThemeRegistry/EmotionCache';
+import theme from './theme';
+
+export default function ThemeRegistry({ children }: { children: React.ReactNode }) {
+  return (
+    <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </NextAppDirEmotionCacheProvider>
+  );
+}

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/theme.ts

@@ -0,0 +1,16 @@
+'use client';
+
+import { createTheme } from '@mui/material/styles';
+import GoogleInterFont from '@/app/fonts/fonts';
+
+// When needed::: first argument is needed if you have common enterprise theme, and second argument is to override your enterprise theme.
+// apply fonts to all other typography options like headings, subtitles, etc...
+const defaultTheme = createTheme({
+  typography: {
+    fontFamily: GoogleInterFont.style.fontFamily,
+    body1: { fontFamily: GoogleInterFont.style.fontFamily },
+    body2: { fontFamily: GoogleInterFont.style.fontFamily },
+  },
+});
+
+export default defaultTheme;

examples/material-next-app-router-ts/src/layouts/About/About.tsx

@@ -0,0 +1,32 @@
+'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 Link from 'next/link';
+import ProTip from '@/components/ProTip/ProTip';
+import Copyright from '@/components/CopyRight/Copyright';
+
+export default function About() {
+  return (
+    <Container maxWidth="lg">
+      <Box
+        sx={{
+          my: 4,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          Material UI - Next.js example using App Router in TypeScript
+        </Typography>
+        <Link href="/">Go to the main page</Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}

examples/material-next-app-router-ts/src/layouts/Home/Home.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Copyright from '@/components/CopyRight/Copyright';
+import ProTip from '@/components/ProTip/ProTip';
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <Container maxWidth="lg">
+      <Box
+        sx={{
+          my: 4,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          Material UI - Next.js example using App Router in TypeScript
+        </Typography>
+        <Link href="/about">Go to the about page</Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}