Skip to content

Commit ab336b1

Browse files
sakulstrasakulstra
committed
initial commit
0 parents  commit ab336b1

17 files changed

+2875
-0
lines changed

‎.gitignore

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel
35+
36+
.out

‎README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Next.js with TypeScript example
2+
3+
## How to use
4+
5+
Download the example [or clone the repo](https://github.com/mui-org/material-ui):
6+
7+
<!-- #default-branch-switch -->
8+
9+
```sh
10+
curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs-with-typescript
11+
cd nextjs-with-typescript
12+
```
13+
14+
Install it and run:
15+
16+
```sh
17+
npm install
18+
npm run dev
19+
```
20+
21+
or:
22+
23+
<!-- #default-branch-switch -->
24+
25+
[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui-org/material-ui/tree/master/examples/nextjs-with-typescript)
26+
27+
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/nextjs-with-typescript)
28+
29+
## The idea behind the example
30+
31+
The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps.
32+
It includes `@mui/material` and its peer dependencies, including `emotion`, the default style engine in MUI v5. If you prefer, you can [use styled-components instead](https://mui.com/guides/interoperability/#styled-components).
33+
34+
## The link component
35+
36+
Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link).
37+
The example folder provides adapters for usage with MUI.
38+
More information [in the documentation](https://mui.com/guides/routing/#next-js).
39+
40+
## What's next?
41+
42+
<!-- #default-branch-switch -->
43+
44+
You now have a working example project.
45+
You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/getting-started/templates/) section.

‎next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎next.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @type {import('next').NextConfig} */
2+
module.exports = {
3+
reactStrictMode: true,
4+
assetPrefix: "./",
5+
exportTrailingSlash: true,
6+
};

‎package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "nextjs-with-typescript",
3+
"version": "5.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"export": "next export",
9+
"start": "next start",
10+
"lint": "next lint",
11+
"post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest"
12+
},
13+
"dependencies": {
14+
"@emotion/cache": "latest",
15+
"@emotion/react": "latest",
16+
"@emotion/server": "latest",
17+
"@emotion/styled": "latest",
18+
"@mui/icons-material": "latest",
19+
"@mui/material": "latest",
20+
"next": "latest",
21+
"react": "latest",
22+
"react-dom": "latest"
23+
},
24+
"devDependencies": {
25+
"@types/react": "latest",
26+
"eslint": "latest",
27+
"eslint-config-next": "latest",
28+
"typescript": "latest"
29+
}
30+
}

‎pages/_app.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
import Head from 'next/head';
3+
import { AppProps } from 'next/app';
4+
import { ThemeProvider } from '@mui/material/styles';
5+
import CssBaseline from '@mui/material/CssBaseline';
6+
import { CacheProvider, EmotionCache } from '@emotion/react';
7+
import theme from '../src/theme';
8+
import createEmotionCache from '../src/createEmotionCache';
9+
10+
// Client-side cache, shared for the whole session of the user in the browser.
11+
const clientSideEmotionCache = createEmotionCache();
12+
13+
interface MyAppProps extends AppProps {
14+
emotionCache?: EmotionCache;
15+
}
16+
17+
export default function MyApp(props: MyAppProps) {
18+
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
19+
return (
20+
<CacheProvider value={emotionCache}>
21+
<Head>
22+
<meta name="viewport" content="initial-scale=1, width=device-width" />
23+
</Head>
24+
<ThemeProvider theme={theme}>
25+
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
26+
<CssBaseline />
27+
<Component {...pageProps} />
28+
</ThemeProvider>
29+
</CacheProvider>
30+
);
31+
}

‎pages/_document.tsx

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import * as React from 'react';
2+
import Document, { Html, Head, Main, NextScript } from 'next/document';
3+
import createEmotionServer from '@emotion/server/create-instance';
4+
import theme from '../src/theme';
5+
import createEmotionCache from '../src/createEmotionCache';
6+
7+
export default class MyDocument extends Document {
8+
render() {
9+
return (
10+
<Html lang="en">
11+
<Head>
12+
{/* PWA primary color */}
13+
<meta name="theme-color" content={theme.palette.primary.main} />
14+
<link rel="shortcut icon" href="/static/favicon.ico" />
15+
<link
16+
rel="stylesheet"
17+
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
18+
/>
19+
{/* Inject MUI styles first to match with the prepend: true configuration. */}
20+
{(this.props as any).emotionStyleTags}
21+
</Head>
22+
<body>
23+
<Main />
24+
<NextScript />
25+
</body>
26+
</Html>
27+
);
28+
}
29+
}
30+
31+
// `getInitialProps` belongs to `_document` (instead of `_app`),
32+
// it's compatible with static-site generation (SSG).
33+
MyDocument.getInitialProps = async (ctx) => {
34+
// Resolution order
35+
//
36+
// On the server:
37+
// 1. app.getInitialProps
38+
// 2. page.getInitialProps
39+
// 3. document.getInitialProps
40+
// 4. app.render
41+
// 5. page.render
42+
// 6. document.render
43+
//
44+
// On the server with error:
45+
// 1. document.getInitialProps
46+
// 2. app.render
47+
// 3. page.render
48+
// 4. document.render
49+
//
50+
// On the client
51+
// 1. app.getInitialProps
52+
// 2. page.getInitialProps
53+
// 3. app.render
54+
// 4. page.render
55+
56+
const originalRenderPage = ctx.renderPage;
57+
58+
// You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
59+
// However, be aware that it can have global side effects.
60+
const cache = createEmotionCache();
61+
const { extractCriticalToChunks } = createEmotionServer(cache);
62+
63+
ctx.renderPage = () =>
64+
originalRenderPage({
65+
enhanceApp: (App: any) =>
66+
function EnhanceApp(props) {
67+
return <App emotionCache={cache} {...props} />;
68+
},
69+
});
70+
71+
const initialProps = await Document.getInitialProps(ctx);
72+
// This is important. It prevents emotion to render invalid HTML.
73+
// See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
74+
const emotionStyles = extractCriticalToChunks(initialProps.html);
75+
const emotionStyleTags = emotionStyles.styles.map((style) => (
76+
<style
77+
data-emotion={`${style.key} ${style.ids.join(' ')}`}
78+
key={style.key}
79+
// eslint-disable-next-line react/no-danger
80+
dangerouslySetInnerHTML={{ __html: style.css }}
81+
/>
82+
));
83+
84+
return {
85+
...initialProps,
86+
emotionStyleTags,
87+
};
88+
};

‎pages/about.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react';
2+
import type { NextPage } from 'next';
3+
import Container from '@mui/material/Container';
4+
import Typography from '@mui/material/Typography';
5+
import Box from '@mui/material/Box';
6+
import Button from '@mui/material/Button';
7+
import Link from '../src/Link';
8+
import ProTip from '../src/ProTip';
9+
import Copyright from '../src/Copyright';
10+
11+
const About: NextPage = () => {
12+
return (
13+
<Container maxWidth="lg">
14+
<Box
15+
sx={{
16+
my: 4,
17+
display: 'flex',
18+
flexDirection: 'column',
19+
justifyContent: 'center',
20+
alignItems: 'center',
21+
}}
22+
>
23+
<Typography variant="h4" component="h1" gutterBottom>
24+
MUI v5 + Next.js with TypeScript example
25+
</Typography>
26+
<Box maxWidth="sm">
27+
<Button variant="contained" component={Link} noLinkStyle href="/">
28+
Go to the home page
29+
</Button>
30+
</Box>
31+
<ProTip />
32+
<Copyright />
33+
</Box>
34+
</Container>
35+
);
36+
};
37+
38+
export default About;

‎pages/index.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import * as React from 'react';
2+
import type { NextPage } from 'next';
3+
import Container from '@mui/material/Container';
4+
import Typography from '@mui/material/Typography';
5+
import Box from '@mui/material/Box';
6+
import Link from '../src/Link';
7+
import ProTip from '../src/ProTip';
8+
import Copyright from '../src/Copyright';
9+
10+
const Home: NextPage = () => {
11+
return (
12+
<Container maxWidth="lg">
13+
<Box
14+
sx={{
15+
my: 4,
16+
display: 'flex',
17+
flexDirection: 'column',
18+
justifyContent: 'center',
19+
alignItems: 'center',
20+
}}
21+
>
22+
<Typography variant="h4" component="h1" gutterBottom>
23+
MUI v5 + Next.js with TypeScript example
24+
</Typography>
25+
<Link href="/about" color="secondary">
26+
Go to the about page
27+
</Link>
28+
<ProTip />
29+
<Copyright />
30+
</Box>
31+
</Container>
32+
);
33+
};
34+
35+
export default Home;

‎public/favicon.ico

25.3 KB
Binary file not shown.

‎src/Copyright.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import * as React from 'react';
2+
import Typography from '@mui/material/Typography';
3+
import MuiLink from '@mui/material/Link';
4+
5+
export default function Copyright() {
6+
return (
7+
<Typography variant="body2" color="text.secondary" align="center">
8+
{'Copyright © '}
9+
<MuiLink color="inherit" href="https://mui.com/">
10+
Your Website
11+
</MuiLink>{' '}
12+
{new Date().getFullYear()}.
13+
</Typography>
14+
);
15+
}

0 commit comments

Comments
 (0)