[material-ui-nextjs] Add `Link` integration component #40265

siriwatknp · 2023-12-21T05:35:33Z

Preview: https://deploy-preview-40265--material-ui.netlify.app/material-ui/guides/nextjs/#link

Summary

Added Link for App Router and Pages Router (Both routers have different import for useRouter, so the split is required).

Usage:

// src/app/*
import { Link } from '@mui/material-nextjs/v14-appRouter';


// src/pages/*
import { Link } from '@mui/material-nextjs/v14-pagesRouter';

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

Related to #30858

mui-bot · 2023-12-21T05:38:47Z

Netlify deploy preview

docs/data/material/guides/nextjs/nextjs.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2c4af10

mnajdova · 2023-12-22T10:12:47Z

packages/mui-material-nextjs/src/v13-appRouter/Link.tsx

+      }}
+      // below props are required for NextLink to work with MUI Link
+      passHref
+      legacyBehavior


Maybe we should see if we can avoid this?

I don't think so based on Next.js docs.

…rial-ui/nextjs-link

siriwatknp · 2024-01-10T02:45:10Z

@mnajdova @mj12albert in case you missed the notification, please review it.

oliviertassinari · 2024-01-15T23:59:22Z

packages/mui-material-nextjs/src/v13-appRouter/Link/Link.tsx

+  /**
+   * Extra class name to apply to the link.
+   */


What we usually use for the className:

Suggested change

/**

* Extra class name to apply to the link.

*/

Did this mui/mui-x#11693 accordingly.

oliviertassinari · 2024-01-16T00:03:44Z

packages/mui-material-nextjs/src/v13-appRouter/Link/Link.tsx

+      }}
+      // below props are required for NextLink to work with MUI Link
+      passHref
+      legacyBehavior


I think we should update to the latest stable API, part of is:

Suggested change

legacyBehavior

I don't see why it's needed, I would expect <MdLink component={NextLink}> to work fine.

It seems to work without legacyBehavior, e.g. https://github.com/mui/material-ui/pull/40661/files#diff-a6d4f073876950175d7c8a264331432489c8f9317e2a6f6b845248c0f7945314R25

oliviertassinari · 2024-01-16T00:05:25Z

docs/data/material/guides/nextjs/nextjs.md

+For pages router, use the Link only from `@mui/material-nextjs/*-pagesRouter`:
+
+```js
+import { Link } from '@mui/material-nextjs/v13-pagesRouter'; // or `v14-pagesRouter` if you are using Next.js v14


I think we should also document how to use a Link with a Button.

import Button from '@mui/material/Button'; import NextLink from 'next/link'; <Button component={NextLink} href="/foo">

Actually, I don't know if this works (maybe types issue, maybe href prop conflict) but this is definitely an important use case.

Also it should be possible to pass in NextLink via a theme, right? Should we have that example as well?

oliviertassinari · 2024-01-16T00:21:26Z

docs/data/material/guides/nextjs/nextjs.md

+:::warning
+Do not use the Link from <b>`@mui/material-nextjs/*-pagesRouter`</b> for App Router.
+:::
+


Is this needed?

Suggested change

:::warning

Do not use the Link from <b>`@mui/material-nextjs/*-pagesRouter`</b> for App Router.

:::

Because we import the router, it will crash if it uses the wrong API

oliviertassinari · 2024-01-16T00:31:21Z

docs/data/material/guides/nextjs/nextjs.md

+You can pass any props supported by both components to the Link.
+
+```js
+import { Link } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14


This creates a horizontal scrollbar, and I think better if set to be generic.

Suggested change

import { Link } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14

import { Link } from '@mui/material-nextjs/v13-appRouter';

// or `v1X-appRouter` if you are using Next.js v1X

oliviertassinari · 2024-02-05T21:10:26Z

The Link implementation we use on our docs got a bit simpler #40940, the gap with this one is reduced.

siriwatknp · 2024-03-13T12:30:02Z

I'll move this to v6.

add Link to material-nextjs

b738d42

siriwatknp added new feature New feature or request package: material-ui Specific to @mui/material nextjs labels Dec 21, 2023

siriwatknp added 5 commits December 21, 2023 12:41

add material-ui ref to tsconfig.build.json

1521d24

add Link spec

1016743

move Link to both App and Pages router

130cf09

add Link doc

8c2f7d5

forward ref

d390e38

siriwatknp requested review from mnajdova and mj12albert December 22, 2023 08:59

siriwatknp marked this pull request as ready for review December 22, 2023 09:00

mnajdova reviewed Dec 22, 2023

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 3, 2024

siriwatknp added 2 commits January 8, 2024 09:57

Merge branch 'master' of https://github.com/mui/material-ui into mate…

f1ee9b9

…rial-ui/nextjs-link

move to Link folder

c0024f1

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 8, 2024

siriwatknp requested a review from mnajdova January 8, 2024 02:59

add clsx dep

2c4af10

siriwatknp mentioned this pull request Jan 15, 2024

[system] Polish @mui/material-nextjs #40473

Merged

oliviertassinari reviewed Jan 16, 2024

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 26, 2024

siriwatknp added the v6.x label Mar 13, 2024

siriwatknp closed this Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui-nextjs] Add `Link` integration component #40265

[material-ui-nextjs] Add `Link` integration component #40265

siriwatknp commented Dec 21, 2023 •

edited by oliviertassinari

Loading

mui-bot commented Dec 21, 2023 •

edited

Loading

mnajdova Dec 22, 2023

siriwatknp Jan 8, 2024

siriwatknp commented Jan 10, 2024

oliviertassinari Jan 15, 2024

oliviertassinari Jan 16, 2024 •

edited

Loading

oliviertassinari Jan 18, 2024

oliviertassinari Jan 16, 2024

sgoodrow Mar 6, 2024

oliviertassinari Jan 16, 2024

oliviertassinari Jan 16, 2024

oliviertassinari commented Feb 5, 2024

siriwatknp commented Mar 13, 2024

	:::warning
	Do not use the Link from <b>`@mui/material-nextjs/*-pagesRouter`</b> for App Router.
	:::

	import { Link } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14
	import { Link } from '@mui/material-nextjs/v13-appRouter';
	// or `v1X-appRouter` if you are using Next.js v1X

[material-ui-nextjs] Add Link integration component #40265

[material-ui-nextjs] Add Link integration component #40265

Conversation

siriwatknp commented Dec 21, 2023 • edited by oliviertassinari Loading

Summary

mui-bot commented Dec 21, 2023 • edited Loading

Netlify deploy preview

Bundle size report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp commented Jan 10, 2024

Choose a reason for hiding this comment

oliviertassinari Jan 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari commented Feb 5, 2024

siriwatknp commented Mar 13, 2024

[material-ui-nextjs] Add `Link` integration component #40265

[material-ui-nextjs] Add `Link` integration component #40265

siriwatknp commented Dec 21, 2023 •

edited by oliviertassinari

Loading

mui-bot commented Dec 21, 2023 •

edited

Loading

oliviertassinari Jan 16, 2024 •

edited

Loading