[core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router #37656

mj12albert · 2023-06-20T15:02:03Z

This PR adds the "use-client" directive to components/hooks exported from core libraries, and a CI step to check it.

Here's a basic demo with some @mui/material components with (using default imports) working in Next.js 13's app dir, ThemeProvider is not used, no (additional) use client directives are needed in page or layout files.

Here's the same one but using named imports – turns out 'use client' is needed on all the index.js|ts to make this work.

Summary of other changes:

Added guides on how to set up and use MUI libraries with Next 13
- Base UI (preview)
- Material UI (preview)
- Joy UI (preview)
Updated the Material UI/Next 13 example - built out the layout and page, and simplified the project structure to be a bit closer to the output of create-next-app
Added examples for Joy UI and Base UI with Next 13
Material UI's umd build is built with rollup which ignores use client, but based on the CDN example I think it shouldn't matter (there is no server environment)
The @mui/icons-material build script needs to be run and changes committed, but I will do it in a separate PR (it results in 20k+ changed files and will make the GitHub UI lag like no tomorrow)

To try out the new example repos, replace the @mui packages from package.json with the latest version built by CI:

 "dependencies": {
-  "@mui/material": "latest",
-  "@mui/base": "latest",
-  "@mui/joy": "latest",
+  "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/0fb89e43/@mui/material",
+  "@mui/base": "https://pkg.csb.dev/mui/material-ui/commit/0fb89e43/@mui/base",
+  "@mui/joy": "https://pkg.csb.dev/mui/material-ui/commit/0fb89e43/@mui/joy",
 },

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2023-06-20T15:05:07Z

Netlify deploy preview

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 5bb5abd

mnajdova

This looks like a great start! I would recommend including the @mui/material-next and @mui/system packages too. Would be interesting to investigate if we have a component or hook that support RSC, so that we can add logic in the script to skip some files.

mj12albert · 2023-07-03T12:20:23Z

This looks like a great start! I would recommend including the @mui/material-next and @mui/system packages too. Would be interesting to investigate if we have a component or hook that support RSC, so that we can add logic in the script to skip some files.

Updated the packages covered here!

I will look into enhancing the script in a separate PR - while testing the changes so far I found that some functions (e.g. our styled) need the directive too for some components to work, so it may end up we can't simply reuse findComponents and findHooks 😅

samuelsycamore

Docs review here. This was a massive undertaking! Thanks for owning it @mj12albert ! Mostly copy edits here but also some bigger picture questions scattered around. I'll circle back to the actual examples later.

docs/data/base/getting-started/quickstart/quickstart.md

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

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

siriwatknp

👍 Great work @mj12albert

oliviertassinari · 2023-07-24T00:57:14Z

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

+        display: 'flex',
+      }}
+    >
+      <Box>
+        <Alert severity="info" sx={{ mt: 2, mb: 5 }}>
+          <AlertTitle>Hello 👋</AlertTitle>
+          This app uses the Next.js App Router and Material UI v5.
+        </Alert>
+
+        <Grid container rowSpacing={3} columnSpacing={3}>
+          <Grid xs={6}>
+            <MediaCard
+              heading="CMYK"
+              text="The CMYK color model (also known as process color, or four color) is a subtractive color model, based on the CMY color model, used in color printing, and is also used to describe the printing process itself."
+            />
+          </Grid>
+          <Grid xs={6}>
+            <MediaCard
+              heading="HSL and HSV"
+              text="HSL (for hue, saturation, lightness) and HSV (for hue, saturation, value; also known as HSB, for hue, saturation, brightness) are alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers."


I imagine this change was helpful to test the whole PR end-to-end but examples are not templates. Could we revert these changes? Thanks

It would be nice to circle back to a conversation we had a couple months ago about standardizing the layout for boilerplate examples. cc @danilo-leal

Next.js approach makes a lot of sense for me, once the setup works, they link you a template https://vercel.com/templates?framework=next.js.

@samuelsycamore I believe we already have a standard layout, do you mean improving it and enforcing it to all the examples?

Yep that's the idea, standardize something a little more neat and polished like the pretty startup pages used by Vercel, Vite, etc. (Mainly just about reinforcing our branding)

Adding to the list ⎯ I think this adds tons of value! 👍 Also, having a global "Templates" page, complementary to the individual ones found in each product's docs, also looks like a good idea!

I added the idea to https://www.notion.so/mui-org/example-Simplify-them-to-link-to-templates-546e5a4574ae4a32b0e684ad1c1a54d0

mj12albert added the core Infrastructure work going on behind the scenes label Jun 20, 2023

mj12albert force-pushed the prepend-client-directive branch from 5b062ba to 23df1b1 Compare June 20, 2023 16:56

mnajdova reviewed Jun 21, 2023

View reviewed changes

mj12albert force-pushed the prepend-client-directive branch 6 times, most recently from 5183455 to c3202bc Compare June 29, 2023 09:11

mj12albert force-pushed the prepend-client-directive branch 9 times, most recently from b5f6d4a to 5055d4d Compare July 3, 2023 05:21

mj12albert changed the title ~~Prepend client directive~~ [core] Prepend use-client directive + add docs and examples for using MUI libraries with Next.js App Router Jul 3, 2023

mj12albert force-pushed the prepend-client-directive branch from 9c8986b to bd3a9bd Compare July 3, 2023 10:24

mj12albert marked this pull request as ready for review July 3, 2023 10:36

mj12albert force-pushed the prepend-client-directive branch from 8ed50fc to 3ddadbd Compare July 3, 2023 10:37

mj12albert changed the title ~~[core] Prepend use-client directive + add docs and examples for using MUI libraries with Next.js App Router~~ [core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router Jul 3, 2023

mj12albert requested review from mnajdova and a team July 3, 2023 12:20

samuelsycamore mentioned this pull request Jul 3, 2023

[docs] Next.js App Router example - font folder in wrong location #37690

Closed

1 task

samuelsycamore linked an issue Jul 3, 2023 that may be closed by this pull request

[docs] Next.js App Router example - font folder in wrong location #37690

Closed

1 task

samuelsycamore reviewed Jul 3, 2023

View reviewed changes

mj12albert added 14 commits July 11, 2023 13:54

Update mui-material index

287652a

Process all the index files too

17515a4

Fix markdownlint error

70aa729

Fix default import

82a7d1f

Update script to process all index files

be836fd

Process all index files

fa8f181

Fix createSvgIcon

74886e0

Fix Grid2

ea77ee0

More docs review fixes

e38f5ce

Add Grid to material example

8f90b87

Update findComponents and api build script to handle Grid2

4eaf397

Another round of docs edits

c801d2b

Update Base UI emotion section

6cbd126

Final docs edits

6be0964

mj12albert force-pushed the prepend-client-directive branch from c86e897 to 6be0964 Compare July 11, 2023 05:54

mj12albert mentioned this pull request Jul 11, 2023

v5.14.0 #37917

Merged

1 task

brijeshb42 approved these changes Jul 11, 2023

View reviewed changes

siriwatknp added 2 commits July 11, 2023 17:15

update content

97696c2

add link

5bb5abd

siriwatknp approved these changes Jul 11, 2023

View reviewed changes

siriwatknp merged commit a4afa9f into mui:master Jul 11, 2023
21 checks passed

mj12albert mentioned this pull request Jul 14, 2023

Add use client directive to useSliderElementsOverlap #37955

Merged

1 task

oliviertassinari reviewed Jul 24, 2023

View reviewed changes

mj12albert deleted the prepend-client-directive branch July 27, 2023 09:33

mj12albert mentioned this pull request Jul 31, 2023

Examples/material next13 #38243

Closed

samuelsycamore mentioned this pull request Aug 3, 2023

[base-ui][docs] Create more examples for Base UI #36193

Open

9 tasks

oliviertassinari mentioned this pull request Sep 13, 2023

[joy-ui][GlobalStyles] Ensure compatibility with RSC #38955

Merged

1 task

samuelsycamore added the nextjs label Oct 23, 2023

christianvuerings mentioned this pull request Oct 23, 2023

Interactive components: enable after hydration completes Cambly/syntax#262

Merged

sanjaiyan-dev mentioned this pull request Nov 1, 2023

React 18 Support Enhancement with use client Directive ⚒ adobe/react-spectrum#5340

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router #37656

[core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router #37656

mj12albert commented Jun 20, 2023 •

edited by oliviertassinari

mui-bot commented Jun 20, 2023 •

edited

mnajdova left a comment

mj12albert commented Jul 3, 2023

samuelsycamore left a comment

siriwatknp left a comment

oliviertassinari Jul 24, 2023 •

edited

samuelsycamore Jul 24, 2023

oliviertassinari Jul 24, 2023

samuelsycamore Jul 24, 2023 •

edited

danilo-leal Jul 31, 2023

oliviertassinari Aug 20, 2023

[core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router #37656

[core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router #37656

Conversation

mj12albert commented Jun 20, 2023 • edited by oliviertassinari

mui-bot commented Jun 20, 2023 • edited

Netlify deploy preview

Bundle size report

mnajdova left a comment

Choose a reason for hiding this comment

mj12albert commented Jul 3, 2023

samuelsycamore left a comment

Choose a reason for hiding this comment

siriwatknp left a comment

Choose a reason for hiding this comment

oliviertassinari Jul 24, 2023 • edited

Choose a reason for hiding this comment

samuelsycamore Jul 24, 2023

Choose a reason for hiding this comment

oliviertassinari Jul 24, 2023

Choose a reason for hiding this comment

samuelsycamore Jul 24, 2023 • edited

Choose a reason for hiding this comment

danilo-leal Jul 31, 2023

Choose a reason for hiding this comment

oliviertassinari Aug 20, 2023

Choose a reason for hiding this comment

mj12albert commented Jun 20, 2023 •

edited by oliviertassinari

mui-bot commented Jun 20, 2023 •

edited

oliviertassinari Jul 24, 2023 •

edited

samuelsycamore Jul 24, 2023 •

edited