Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[examples] Update Next.js examples Next.js and React versions #44852

Merged
merged 3 commits into from
Dec 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -541,6 +541,7 @@ module.exports = /** @type {Config} */ ({
'import/order': 'off',
// Reset the default until https://github.com/jsx-eslint/eslint-plugin-react/issues/3672 is fixed.
'react/jsx-no-target-blank': ['error', { allowReferrer: false }],
'react/prop-types': 'off',
},
},
{
Expand Down
5 changes: 0 additions & 5 deletions examples/material-ui-nextjs-pages-router-ts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,6 @@ If you prefer, you can [use styled-components instead](https://mui.com/material-
The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) 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).

## Upgrading to Next.js 15

This example uses Next.js 14.
To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.

## What's next?

<!-- #default-branch-switch -->
Expand Down
10 changes: 5 additions & 5 deletions examples/material-ui-nextjs-pages-router-ts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@
"@mui/material": "latest",
"@mui/material-nextjs": "latest",
"clsx": "latest",
"next": "^14.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"next": "^15.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@types/node": "latest",
"@types/react": "latest",
"@types/react": "^19.0.0",
"eslint": "latest",
"eslint-config-next": "^14.0.0",
"eslint-config-next": "^15.0.0",
"typescript": "latest"
}
}
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-pages-router-ts/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
DocumentHeadTags,
DocumentHeadTagsProps,
documentGetInitialProps,
} from '@mui/material-nextjs/v14-pagesRouter';
} from '@mui/material-nextjs/v15-pagesRouter';
import theme, { roboto } from '../src/theme';

export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) {
Expand Down
5 changes: 0 additions & 5 deletions examples/material-ui-nextjs-pages-router/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,6 @@ If you prefer, you can [use styled-components instead](https://mui.com/material-
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).

## Upgrading to Next.js 15

This example uses Next.js 14.
To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.

## What's next?

<!-- #default-branch-switch -->
Expand Down
9 changes: 4 additions & 5 deletions examples/material-ui-nextjs-pages-router/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,12 @@
"@mui/material": "latest",
"@mui/material-nextjs": "latest",
"clsx": "latest",
"next": "^14.0.0",
"prop-types": "latest",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"next": "^15.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"eslint": "latest",
"eslint-config-next": "^14.0.0"
"eslint-config-next": "^15.0.0"
}
}
8 changes: 1 addition & 7 deletions examples/material-ui-nextjs-pages-router/pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
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';
Expand All @@ -22,8 +21,3 @@ export default function MyApp(props) {
</AppCacheProvider>
);
}

MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
pageProps: PropTypes.object.isRequired,
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { Html, Head, Main, NextScript } from 'next/document';
import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v14-pagesRouter';
import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v15-pagesRouter';
import theme from '../src/theme';

export default function MyDocument(props) {
Expand Down
30 changes: 0 additions & 30 deletions examples/material-ui-nextjs-pages-router/src/Link.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useRouter } from 'next/router';
import NextLink from 'next/link';
Expand Down Expand Up @@ -39,19 +38,6 @@ export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props
);
});

NextLinkComposed.propTypes = {
href: PropTypes.any,
legacyBehavior: PropTypes.bool,
linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
locale: PropTypes.string,
passHref: PropTypes.bool,
prefetch: PropTypes.bool,
replace: PropTypes.bool,
scroll: PropTypes.bool,
shallow: PropTypes.bool,
to: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
};

// A styled version of the Next.js Link component:
// https://nextjs.org/docs/pages/api-reference/components/link
const Link = React.forwardRef(function Link(props, ref) {
Expand Down Expand Up @@ -105,20 +91,4 @@ const Link = React.forwardRef(function Link(props, ref) {
);
});

Link.propTypes = {
activeClassName: PropTypes.string,
as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
className: PropTypes.string,
href: PropTypes.any,
legacyBehavior: PropTypes.bool,
linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
locale: PropTypes.string,
noLinkStyle: PropTypes.bool,
prefetch: PropTypes.bool,
replace: PropTypes.bool,
role: PropTypes.string,
scroll: PropTypes.bool,
shallow: PropTypes.bool,
};

export default Link;
5 changes: 0 additions & 5 deletions examples/material-ui-nextjs-ts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,6 @@ or:

[![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-ts)

## Upgrading to Next.js 15

This example uses Next.js 14.
To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.

## Learn more

To learn more about this example:
Expand Down
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-ts/next-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
12 changes: 6 additions & 6 deletions examples/material-ui-nextjs-ts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,16 @@
"@mui/icons-material": "latest",
"@mui/material": "latest",
"@mui/material-nextjs": "latest",
"next": "^14.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"next": "^15.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@types/node": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"eslint": "latest",
"eslint-config-next": "^14.0.0",
"eslint-config-next": "^15.0.0",
"typescript": "latest"
}
}
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs-ts/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '@/theme';
Expand Down
5 changes: 0 additions & 5 deletions examples/material-ui-nextjs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,6 @@ or:

[![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)

## Upgrading to Next.js 15

This example uses Next.js 14.
To upgrade to version 15, please follow the [official upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading/version-15) in the Next.js docs.

## Learn more

To learn more about this example:
Expand Down
8 changes: 4 additions & 4 deletions examples/material-ui-nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"@mui/material": "latest",
"@mui/material-nextjs": "latest",
"eslint": "latest",
"eslint-config-next": "^14.0.0",
"next": "^14.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"eslint-config-next": "^15.0.0",
"next": "^15.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
}
}
2 changes: 1 addition & 1 deletion examples/material-ui-nextjs/src/app/layout.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '@/theme';
Expand Down
Loading