[examples] Swap Next.js examples between App Router and Pages Router; update naming convention (#38204)

Signed-off-by: Olivier Tassinari <[email protected]>
Co-authored-by: Olivier Tassinari <[email protected]>

Author: 2 people

.codesandbox/ci.json

@@ -36,10 +36,10 @@
   },
   "sandboxes": [
     "material-ui-issue-latest-s2dsx",
-    "/examples/material-cra",
-    "/examples/material-cra-ts",
-    "/examples/joy-cra-ts",
-    "/examples/base-cra-ts"
+    "/examples/material-ui-cra",
+    "/examples/material-ui-cra-ts",
+    "/examples/joy-ui-cra-ts",
+    "/examples/base-ui-cra-ts"
   ],
   "silent": true
 }

.eslintignore

@@ -4,10 +4,10 @@
 /coverage
 /docs/export
 /docs/pages/playground/
-/examples/material-cra*/src/serviceWorker.js
-/examples/material-gatsby/public/
-/examples/material-preact/config
-/examples/material-preact/scripts
+/examples/material-ui-cra*/src/serviceWorker.js
+/examples/material-ui-gatsby/public/
+/examples/material-ui-preact/config
+/examples/material-ui-preact/scripts
 /packages/mui-codemod/lib
 /packages/mui-codemod/src/*/*.test/*
 /packages/mui-icons-material/fixtures

CHANGELOG.md

@@ -129,7 +129,7 @@ A big thanks to the 23 contributors who made this release possible.
 - &#8203;<!-- 19 -->[docs][joy] Add adjustments to the color inversion page (#37143) @danilo-leal
 - &#8203;<!-- 18 -->[docs][material] Improve documentation about adding custom colors (#37743) @DiegoAndai
 - &#8203;<!-- 17 -->[examples] Fix Joy UI Next.js App Router font loading (#38095) @IgnacioUtrilla
-- &#8203;<!-- 16 -->[examples] Fix material-next-app-router Font Usage with next/font (#38026) @onderonur
+- &#8203;<!-- 16 -->[examples] Fix material-next Font Usage with next/font (#38026) @onderonur
 
 ### Core
 
@@ -401,7 +401,7 @@ _Jun 21, 2023_
 A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨:
 
 - 💫 Added [Slider](https://mui.com/material-ui/react-slider/#material-you-version) component using the new Material You design language (#37520) @DiegoAndai.
-- 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043
+- 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043
 
 ### `@mui/[email protected]`
 
@@ -462,7 +462,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
 - &#8203;<!-- 19 -->[docs-infra] Add analyticsTags to Algolia (#37600) @Janpot
 - &#8203;<!-- 18 -->[docs-infra] Simplify product id handling (#37593) @oliviertassinari
 - &#8203;<!-- 35 -->[CHANGELOG] Add missing release date for v5.13.5 @oliviertassinari
-- &#8203;<!-- 16 -->[examples] Shell command fix in the readme file of material-next-app-router-ts example (#37675) @bablukpik
+- &#8203;<!-- 16 -->[examples] Shell command fix in the readme file of material-next-ts example (#37675) @bablukpik
 - &#8203;<!-- 15 -->[examples] Next.js v13 app router with Material UI (#37315) @smo043
 
 ### Core
@@ -5109,7 +5109,7 @@ _Feb 1, 2022_
 
 A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
 
-- 🛠 @goncalovf added an example project using [Material UI with Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) (#28241)
+- 🛠 @goncalovf added an example project using [Material UI with Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite) (#28241)
 - Number of 🐛 bug fixes and 📚 documentation improvements.
 
 ### `@mui/[email protected]`

docs/data/base/guides/next-js-app-router/next-js-app-router.md

@@ -5,7 +5,7 @@
 :::info
 Starting fresh on a new App Router-based project?
 
-Jump right into the code with [this example: Base UI - Next.js App Router with Tailwind CSS example in TypeScript](https://github.com/mui/material-ui/tree/master/examples/base-next-app-router-tailwind-ts).
+Jump right into the code with [this example: Base UI - Next.js App Router with Tailwind CSS example in TypeScript](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts).
 :::
 
 ## Next.js and React Server Components
@@ -47,7 +47,7 @@ module.exports = {
 };
 ```
 
-Refer to this [example repo](https://github.com/mui/material-ui/tree/master/examples/base-next-app-router-tailwind-ts) for a full working demo of a Next.js 13 app using Base UI and Tailwind CSS.
+Refer to this [example repo](https://github.com/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts) for a full working demo of a Next.js 13 app using Base UI and Tailwind CSS.
 
 ### Emotion
 

docs/data/base/guides/working-with-tailwind-css/PlayerFinal.js

@@ -4,7 +4,7 @@ export default function PlayerFinal() {
   return (
     <iframe
       title="codesandbox"
-      src="https://codesandbox.io/embed/github/mui/material-ui/tree/master/examples/base-cra-ts?hidenavigation=1&fontsize=14&view=preview"
+      src="https://codesandbox.io/embed/github/mui/material-ui/tree/master/examples/base-ui-cra-tailwind-ts?hidenavigation=1&fontsize=14&view=preview"
       style={{
         width: '100%',
         height: 400,

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css-pt.md

@@ -489,4 +489,4 @@ These are the things we covered in this guide:
 ✅ How to create custom components for specific slots in more complex customization scenarios. We used the `component` prop to pass them into the parent component.\
 ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `componentsProps` prop.
 
-Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-cra-ts) example project.
+Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-ui-cra-tailwind-ts) example project.

docs/data/base/guides/working-with-tailwind-css/working-with-tailwind-css.md

@@ -510,4 +510,4 @@ These are the things we covered in this guide:
 We used the `component` prop to pass them into the parent component.\
 ✅ How to apply conditional styling based on the owner component's state using a callback as value for the `slotProps` prop.
 
-Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-cra-ts) example project.
+Get all the code used in this guide in the [Base UI with Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/base-ui-cra-tailwind-ts) example project.

docs/data/joy/guides/next-js-app-router/next-js-app-router.md

@@ -5,7 +5,7 @@
 :::info
 Starting fresh on a new App Router-based project?
 
-Jump right into the code with [this example: Joy UI - Next.js App Router with TypeScript](https://github.com/mui/material-ui/tree/master/examples/joy-next-app-router-ts).
+Jump right into the code with [this example: Joy UI - Next.js App Router with TypeScript](https://github.com/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts).
 :::
 
 ## Next.js and React Server Components

docs/data/material/getting-started/example-projects/example-projects-pt.md

@@ -8,17 +8,17 @@ Você pode encontrar alguns exemplos de projetos no repositório [GitHub](https:
 
 <!-- #default-branch-switch -->
 
-- [Next.js](https://github.com/mui/material-ui/tree/master/examples/material-next) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-next-ts))
-- [Create React App](https://github.com/mui/material-ui/tree/master/examples/material-cra) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts))
-- [Remix](https://github.com/mui/material-ui/tree/master/examples/material-remix-ts)
-- [Gatsby](https://github.com/mui/material-ui/tree/master/examples/material-gatsby)
-- [Preact](https://github.com/mui/material-ui/tree/master/examples/material-preact)
-- [CDN](https://github.com/mui/material-ui/tree/master/examples/material-via-cdn)
-- [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/material-express-ssr)
-- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts)
-- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-vite) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-vite-ts))
-- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts))
-- [Next.js + @mui/styles (v5 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration)
+- [Next.js](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts))
+- [Create React App](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts))
+- [Remix](https://github.com/mui/material-ui/tree/master/examples/material-ui-remix-ts)
+- [Gatsby](https://github.com/mui/material-ui/tree/master/examples/material-ui-gatsby)
+- [Preact](https://github.com/mui/material-ui/tree/master/examples/material-ui-preact)
+- [CDN](https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn)
+- [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/material-ui-express-ssr)
+- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts)
+- [Vite.js](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-ui-vite-ts))
+- [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts))
+- [Next.js + @mui/styles (v5 migration helper)](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)
 
 Create React App é um projeto incrível para aprender React. Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs.
 

docs/data/material/getting-started/installation/installation.md

@@ -154,7 +154,7 @@ For instance, via Google Web Fonts:
 ## CDN
 
 You can start using Material UI right away with minimal front-end infrastructure by installing it via CDN, which is a great option for rapid prototyping.
-Follow [this CDN example](https://github.com/mui/material-ui/tree/master/examples/material-via-cdn) to get started.
+Follow [this CDN example](https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn) to get started.
 
 :::error
 We do _not_ recommend using this approach in production.

docs/data/material/guides/interoperability/interoperability.md

@@ -294,8 +294,8 @@ however, you would like to use `styled-components`, you can configure your app b
 
 <!-- #default-branch-switch -->
 
-- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components)
-- [Create React App with styled-components and typescript](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)
+- [Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
+- [Create React App with styled-components and typescript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
 
 Following this approach reduces the bundle size, and removes the need to configure the CSS injection order.
 
@@ -612,7 +612,7 @@ It works exactly like styled components. You can [use the same guide](/material-
 
 ### Setup
 
-If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts) example project.
+If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
 If you use a different framework, or already have set up your project, follow these steps:
 
 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.

docs/data/material/guides/next-js-app-router/next-js-app-router.md

@@ -5,7 +5,7 @@
 :::info
 Starting fresh on a new App Router-based project?
 
-Jump right into the code with [this example: Material UI - Next.js App Router example in TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts).
+Jump right into the code with [this example: Material UI - Next.js App Router example in TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts).
 :::
 
 ## Next.js and React Server Components

docs/data/material/guides/routing/routing.md

@@ -99,9 +99,9 @@ const LinkBehavior = React.forwardRef((props, ref) => (
 
 ### Next.js
 
-The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with Material UI.
+The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with Material UI.
 
-- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/-/examples/material-next-ts/src/Link.tsx) component.
+- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/-/examples/material-ui-nextjs-ts/src/Link.tsx) component.
   This component is unstyled and only responsible for handling the navigation.
   The prop `href` was renamed `to` to avoid a naming conflict.
   This is similar to react-router's Link component.

docs/data/material/guides/server-rendering/server-rendering.md

@@ -215,9 +215,9 @@ ReactDOM.hydrate(<Main />, document.querySelector('#root'));
 
 We host different reference implementations which you can find in the [GitHub repository](https://github.com/mui/material-ui) under the [`/examples`](https://github.com/mui/material-ui/tree/HEAD/examples) folder:
 
-- [The reference implementation of this tutorial](https://github.com/mui/material-ui/tree/HEAD/examples/material-express-ssr)
-- [Gatsby](https://github.com/mui/material-ui/tree/HEAD/examples/material-gatsby)
-- [Next.js](https://github.com/mui/material-ui/tree/HEAD/examples/material-next) ([TypeScript version](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts))
+- [The reference implementation of this tutorial](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-express-ssr)
+- [Gatsby](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-gatsby)
+- [Next.js](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs) ([TypeScript version](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-ts))
 
 ## Troubleshooting
 

docs/data/material/guides/styled-engine/styled-engine.md

@@ -104,8 +104,8 @@ You can use these `styled-component` examples as a reference:
 
 <!-- #default-branch-switch -->
 
-- [create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components)
-- [create-react-app with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts)
+- [create-react-app](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
+- [create-react-app with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
 - [and many others](https://github.com/mui/material-ui/tree/master/examples)
 
 :::warning

docs/data/material/guides/typescript/typescript.md

@@ -6,7 +6,7 @@
 
 <!-- #default-branch-switch -->
 
-Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-cra-ts) example.
+Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts) example.
 
 For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`:
 

docs/data/material/migration/migration-v4/migrating-from-jss.md

@@ -18,7 +18,7 @@ Note that you may continue to use JSS for adding overrides for the components (e
 Then, if at any point you want to move over to the new styling engine, you can refactor your components progressively.
 
 :::info
-If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration).
+If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration).
 :::
 
 This document reviews all the steps necessary to migrate away from JSS.

docs/data/material/migration/migration-v4/migration-v4.md

@@ -28,7 +28,7 @@ Need to refer back to an older version of the docs? Check out [the v4 documentat
 :::
 
 :::info
-If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-next-ts-v4-v5-migration).
+If you are using Next.js and you are not sure how to configure SSR to work with both Emotion & JSS, take a look a this [example project](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration).
 :::
 
 ## Why you should migrate

docs/pages/blog/2020-q3-update.md

@@ -105,7 +105,7 @@ Here are the most significant improvements since June 2020. This was a dense qua
 
 - 👩‍🎨 We have completed the first iteration of the new styling solution of v5.<br />
   You can find a [new version](/material-ui/react-slider/) of the slider in the lab powered by [Emotion](https://emotion.sh/docs/introduction).<br />
-  If you are already using styled-components in your application, you can swap Emotion for styled-components 💅. Check this [CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) or [CRA](https://github.com/mui/material-ui/tree/HEAD/examples/material-cra-styled-components/) for a demo. It relies on aliases to prevent any bundle size overhead.<br />
+  If you are already using styled-components in your application, you can swap Emotion for styled-components 💅. Check this [CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) or [CRA](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-cra-styled-components/) for a demo. It relies on aliases to prevent any bundle size overhead.<br />
   The new styling solution saves 2kB+ gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using styled-components or Emotion.<br />
   Last but not least, this change allows us to take advantage of dynamic style props. We will use them for dynamic color props, variant props, and new style props available in the core components.
 

docs/pages/blog/material-ui-v4-is-out.md

@@ -163,7 +163,7 @@ import {
 
 <p class="blog-description">Fine level tracking</p>
 
-- **Preact X.** We have introduced a working [integration example with Preact](https://github.com/mui/material-ui/blob/HEAD/examples/material-preact/README.md). Preact is a fast, 1/10 smaller alternative to React, with the same modern API. We will do our best to support it.
+- **Preact X.** We have introduced a working [integration example with Preact](https://github.com/mui/material-ui/blob/HEAD/examples/material-ui-preact/README.md). Preact is a fast, 1/10 smaller alternative to React, with the same modern API. We will do our best to support it.
 - **Runtime performance**. We have heard that some people struggle with the runtime cost of using Material UI. We have solved a few problems reported, but nothing systematic. We have observed [a slight gain](https://github.com/mui/material-ui/pull/15023) by moving from the classes API to the hooks API. However, it's hard to make progress as we lack a properly setup performance bench. It's something to consider for v5.
 
 ### Preparing for the future