<html lang="en">
<head></head>
<body>

<form id="mainForm" method="post" action="https://stackblitz.com/run" target="_self">
<input type="hidden" name="project[files][README.md]" value="# Material UI - Next.js App Router example

This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Material UI installed.

## How to use

Download the example [or clone the repo](https://github.com/mui/material-ui):

&lt;!-- #target-branch-reference --&gt;

```bash
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-nextjs
cd material-ui-nextjs
```

Install it and run:

```bash
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

or:

&lt;!-- #target-branch-reference --&gt;

[![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)

[![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)

## Learn more

To learn more about this example:

&lt;!-- #host-reference --&gt;

- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI.

## What&#39;s next?

&lt;!-- #host-reference --&gt;

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.
">
<input type="hidden" name="project[files][jsconfig.json]" value="{
  &quot;compilerOptions&quot;: {
    &quot;paths&quot;: {
      &quot;@/*&quot;: [&quot;./src/*&quot;]
    }
  }
}
">
<input type="hidden" name="project[files][next.config.mjs]" value="/** @type {import(&#39;next&#39;).NextConfig} */
const nextConfig = {};

export default nextConfig;
">
<input type="hidden" name="project[files][package.json]" value="{&quot;name&quot;:&quot;material-ui-nextjs&quot;,&quot;version&quot;:&quot;7.0.0&quot;,&quot;private&quot;:true,&quot;scripts&quot;:{&quot;dev&quot;:&quot;next dev&quot;,&quot;build&quot;:&quot;next build&quot;,&quot;start&quot;:&quot;next start&quot;,&quot;lint&quot;:&quot;next lint&quot;},&quot;dependencies&quot;:{&quot;@emotion/cache&quot;:&quot;latest&quot;,&quot;@emotion/react&quot;:&quot;latest&quot;,&quot;@emotion/styled&quot;:&quot;latest&quot;,&quot;@mui/icons-material&quot;:&quot;https://pkg.pr.new/mui/material-ui/@mui/icons-material@bbc5a6f8505451d49300232cf7dee3a87e50ff18&quot;,&quot;@mui/material&quot;:&quot;https://pkg.pr.new/mui/material-ui/@mui/material@bbc5a6f8505451d49300232cf7dee3a87e50ff18&quot;,&quot;@mui/material-nextjs&quot;:&quot;https://pkg.pr.new/mui/material-ui/@mui/material-nextjs@bbc5a6f8505451d49300232cf7dee3a87e50ff18&quot;,&quot;eslint&quot;:&quot;latest&quot;,&quot;eslint-config-next&quot;:&quot;^15.0.0&quot;,&quot;next&quot;:&quot;^15.0.0&quot;,&quot;react&quot;:&quot;^19.0.0&quot;,&quot;react-dom&quot;:&quot;^19.0.0&quot;}}">
<input type="hidden" name="project[files][src/theme.js]" value="&#39;use client&#39;;
import { Roboto } from &#39;next/font/google&#39;;
import { createTheme } from &#39;@mui/material/styles&#39;;

const roboto = Roboto({
  weight: [&#39;300&#39;, &#39;400&#39;, &#39;500&#39;, &#39;700&#39;],
  subsets: [&#39;latin&#39;],
  display: &#39;swap&#39;,
});

const theme = createTheme({
  cssVariables: true,
  palette: {
    mode: &#39;light&#39;,
  },
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
  components: {
    MuiAlert: {
      styleOverrides: {
        root: {
          variants: [
            {
              props: { severity: &#39;info&#39; },
              style: {
                backgroundColor: &#39;#60a5fa&#39;,
              },
            }
          ],
        },
      },
    },
  },
});

export default theme;
">
<input type="hidden" name="project[files][src/app/favicon.ico]" value="https://pkg.pr.new/template/ea11dd2f-14ea-4098-b305-25d8b9bbdf50">
<input type="hidden" name="project[files][src/app/layout.js]" value="import * as React from &#39;react&#39;;
import { AppRouterCacheProvider } from &#39;@mui/material-nextjs/v15-appRouter&#39;;
import { ThemeProvider } from &#39;@mui/material/styles&#39;;
import CssBaseline from &#39;@mui/material/CssBaseline&#39;;
import theme from &#39;@/theme&#39;;

export default function RootLayout(props) {
  return (
    &lt;html lang=&quot;en&quot;&gt;
      &lt;body&gt;
        &lt;AppRouterCacheProvider options={{ enableCssLayer: true }}&gt;
          &lt;ThemeProvider theme={theme}&gt;
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            &lt;CssBaseline /&gt;
            {props.children}
          &lt;/ThemeProvider&gt;
        &lt;/AppRouterCacheProvider&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  );
}
">
<input type="hidden" name="project[files][src/app/page.js]" value="import * as React from &#39;react&#39;;
import Container from &#39;@mui/material/Container&#39;;
import Typography from &#39;@mui/material/Typography&#39;;
import Box from &#39;@mui/material/Box&#39;;
import Link from &#39;@mui/material/Link&#39;;
import NextLink from &#39;next/link&#39;;
import ProTip from &#39;@/components/ProTip&#39;;
import Copyright from &#39;@/components/Copyright&#39;;

export default function Home() {
  return (
    &lt;Container maxWidth=&quot;lg&quot;&gt;
      &lt;Box
        sx={{
          my: 4,
          display: &#39;flex&#39;,
          flexDirection: &#39;column&#39;,
          justifyContent: &#39;center&#39;,
          alignItems: &#39;center&#39;,
        }}
      &gt;
        &lt;Typography variant=&quot;h4&quot; component=&quot;h1&quot; sx={{ mb: 2 }}&gt;
          Material UI - Next.js App Router example in JavaScript
        &lt;/Typography&gt;
        &lt;Link href=&quot;/about&quot; color=&quot;secondary&quot; component={NextLink}&gt;
          Go to the about page
        &lt;/Link&gt;
        &lt;ProTip /&gt;
        &lt;Copyright /&gt;
      &lt;/Box&gt;
    &lt;/Container&gt;
  );
}
">
<input type="hidden" name="project[files][src/components/Copyright.js]" value="import * as React from &#39;react&#39;;
import Typography from &#39;@mui/material/Typography&#39;;
import MuiLink from &#39;@mui/material/Link&#39;;

export default function Copyright() {
  return (
    (&lt;Typography variant=&quot;body2&quot; align=&quot;center&quot; sx={{
      color: &quot;text.secondary&quot;
    }}&gt;
      {&#39;Copyright © &#39;}
      &lt;MuiLink color=&quot;inherit&quot; href=&quot;https://mui.com/&quot;&gt;
        Your Website
      &lt;/MuiLink&gt;{&#39; &#39;}
      {new Date().getFullYear()}.&lt;/Typography&gt;)
  );
}
">
<input type="hidden" name="project[files][src/components/ProTip.js]" value="import * as React from &#39;react&#39;;
import Link from &#39;@mui/material/Link&#39;;
import SvgIcon from &#39;@mui/material/SvgIcon&#39;;
import Typography from &#39;@mui/material/Typography&#39;;

function LightBulbIcon(props) {
  return (
    &lt;SvgIcon {...props}&gt;
      &lt;path d=&quot;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&quot; /&gt;
    &lt;/SvgIcon&gt;
  );
}

export default function ProTip() {
  return (
    &lt;Typography sx={{ mt: 6, mb: 3, color: &#39;text.secondary&#39; }}&gt;
      &lt;LightBulbIcon sx={{ mr: 1, verticalAlign: &#39;middle&#39; }} /&gt;
      {&#39;Pro tip: See more &#39;}
      &lt;Link href=&quot;https://mui.com/material-ui/getting-started/templates/&quot;&gt;templates&lt;/Link&gt;
      {&#39; in the Material UI documentation.&#39;}
    &lt;/Typography&gt;
  );
}
">
<input type="hidden" name="project[files][src/app/about/page.js]" value="import * as React from &#39;react&#39;;
import Container from &#39;@mui/material/Container&#39;;
import Typography from &#39;@mui/material/Typography&#39;;
import Box from &#39;@mui/material/Box&#39;;
import Button from &#39;@mui/material/Button&#39;;
import NextLink from &#39;next/link&#39;;
import ProTip from &#39;@/components/ProTip&#39;;
import Copyright from &#39;@/components/Copyright&#39;;

export default function About() {
  return (
    &lt;Container maxWidth=&quot;lg&quot;&gt;
      &lt;Box
        sx={{
          my: 4,
          display: &#39;flex&#39;,
          flexDirection: &#39;column&#39;,
          justifyContent: &#39;center&#39;,
          alignItems: &#39;center&#39;,
        }}
      &gt;
        &lt;Typography variant=&quot;h4&quot; component=&quot;h1&quot; sx={{ mb: 2 }}&gt;
          Material UI - Next.js example in TypeScript
        &lt;/Typography&gt;
        &lt;Box sx={{ maxWidth: &#39;sm&#39; }}&gt;
          &lt;Button variant=&quot;contained&quot; component={NextLink} href=&quot;/&quot;&gt;
            Go to the home page
          &lt;/Button&gt;
        &lt;/Box&gt;
        &lt;ProTip /&gt;
        &lt;Copyright /&gt;
      &lt;/Box&gt;
    &lt;/Container&gt;
  );
}
">
<input type="hidden" name="project[description]" value="generated by https://pkg.pr.new">
<input type="hidden" name="project[template]" value="node">
<input type="hidden" name="project[title]" value="material-ui-nextjs">
</form>
<script>document.getElementById("mainForm").submit();</script>

</body></html>