init project

examples/material-ui-nextjs-pages-router/.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+/.next

examples/material-ui-nextjs-pages-router/README.md

@@ -0,0 +1,54 @@
+# Material UI - Next.js Pages Router example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #target-branch-reference -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs-pages-router
+cd material-ui-nextjs-pages-router
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+or:
+
+<!-- #target-branch-reference -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router)
+
+## The idea behind the example
+
+**Note:** This example is set up to use the Next.js Pages Router.
+As of Next.js 13.4, the newer App Router pattern is stable.
+We recommend starting new projects with the [Material UI with Next.js (App Router) example](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs) unless you need (or prefer) the Pages Router.
+
+<!-- #host-reference -->
+
+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.
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
+
+## The Link component
+
+<!-- #target-branch-reference -->
+<!-- #host-reference -->
+
+The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI.
+More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router).
+
+## What's next?
+
+<!-- #host-reference -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

examples/material-ui-nextjs-pages-router/next.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  reactStrictMode: true,
+};

examples/material-ui-nextjs-pages-router/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "material-ui-nextjs-pages-router",
+  "version": "7.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest"
+  },
+  "dependencies": {
+    "@emotion/cache": "latest",
+    "@emotion/react": "latest",
+    "@emotion/server": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "latest",
+    "@mui/material": "latest",
+    "@mui/material-nextjs": "latest",
+    "clsx": "latest",
+    "next": "^15.0.5",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "eslint": "latest",
+    "eslint-config-next": "latest"
+  }
+}

examples/material-ui-nextjs-pages-router/pages/_app.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Head from 'next/head';
+import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from '../src/theme';
+
+export default function MyApp(props) {
+  const { Component, pageProps } = props;
+
+  return (
+    <AppCacheProvider {...props}>
+      <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>
+    </AppCacheProvider>
+  );
+}

examples/material-ui-nextjs-pages-router/pages/_document.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Html, Head, Main, NextScript } from 'next/document';
+import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v15-pagesRouter';
+import theme from '../src/theme';
+
+export default function MyDocument(props) {
+  return (
+    <Html lang="en">
+      <Head>
+        {/* PWA primary color */}
+        <meta name="theme-color" content={theme.palette.primary.main} />
+        <link rel="icon" href="/favicon.ico" />
+        <meta name="emotion-insertion-point" content="" />
+        <DocumentHeadTags {...props} />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+
+MyDocument.getInitialProps = async (ctx) => {
+  const finalProps = await documentGetInitialProps(ctx);
+  return finalProps;
+};

examples/material-ui-nextjs-pages-router/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" sx={{ mb: 2 }}>
+          Material UI - Next.js example
+        </Typography>
+        <Button variant="contained" component={Link} noLinkStyle href="/">
+          Go to the main page
+        </Button>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}

examples/material-ui-nextjs-pages-router/pages/index.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+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" sx={{ mb: 2 }}>
+          Material UI - Next.js example
+        </Typography>
+        <Link href="/about" color="secondary">
+          Go to the about page
+        </Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}

examples/material-ui-nextjs-pages-router/src/Copyright.js

@@ -0,0 +1,21 @@
+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"
+      align="center"
+      sx={{
+        color: 'text.secondary',
+      }}
+    >
+      {'Copyright © '}
+      <MuiLink color="inherit" href="https://mui.com/">
+        Your Website
+      </MuiLink>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  );
+}

examples/material-ui-nextjs-pages-router/src/Link.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import NextLink from 'next/link';
+import MuiLink from '@mui/material/Link';
+
+export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) {
+  const { to, linkAs, ...other } = props;
+
+  return <NextLink href={to} as={linkAs} ref={ref} {...other} />;
+});
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/pages/api-reference/components/link
+export const Link = React.forwardRef(function Link(props, ref) {
+  const {
+    activeClassName = 'active',
+    as,
+    className: classNameProps,
+    href,
+    linkAs: linkAsProp,
+    noLinkStyle,
+    ...other
+  } = props;
+
+  const router = useRouter();
+  const pathname = typeof href === 'string' ? href : href?.pathname;
+
+  const className = clsx(classNameProps, {
+    [activeClassName]: router.pathname === pathname && activeClassName,
+  });
+
+  const linkAs = linkAsProp || as || href;
+  const nextjsProps = {
+    to: href,
+    linkAs,
+  };
+
+  if (noLinkStyle) {
+    return <NextLinkComposed className={className} ref={ref} {...nextjsProps} {...other} />;
+  }
+
+  return (
+    <MuiLink
+      component={NextLinkComposed}
+      className={className}
+      ref={ref}
+      {...nextjsProps}
+      {...other}
+    />
+  );
+});

examples/material-ui-nextjs-pages-router/src/ProTip.js

@@ -0,0 +1,23 @@
+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/material-ui/getting-started/templates/">templates</Link>
+      {' in the Material UI documentation.'}
+    </Typography>
+  );
+}

examples/material-ui-nextjs-pages-router/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';
+
+const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+// Create a theme instance.
+const theme = createTheme({
+  cssVariables: true,
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+  typography: {
+    fontFamily: roboto.style.fontFamily,
+  },
+});
+
+export default theme;