parent
14c553c932
commit
743248f177
8 changed files with 2 additions and 287 deletions
|
@ -1,36 +1,3 @@
|
|||
# Next.js example
|
||||
# material-ui example
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [ZEIT Now](https://zeit.co/now):
|
||||
|
||||
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-material-ui)
|
||||
|
||||
## How to use
|
||||
|
||||
Download the example [or clone the repo](https://github.com/mui-org/material-ui):
|
||||
|
||||
```sh
|
||||
curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs
|
||||
cd nextjs
|
||||
```
|
||||
|
||||
Install it and run:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
# or
|
||||
yarn
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
|
||||
|
||||
```bash
|
||||
now
|
||||
```
|
||||
|
||||
## The idea behind the example
|
||||
|
||||
[Next.js](https://github.com/zeit/next.js) is a framework for server-rendered React apps.
|
||||
This example have been moved here: [mui-org/material-ui](https://github.com/mui-org/material-ui/blob/master/examples/nextjs)
|
||||
|
|
|
@ -1,20 +0,0 @@
|
|||
{
|
||||
"name": "nextjs",
|
||||
"version": "4.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "latest",
|
||||
"@material-ui/styles": "latest",
|
||||
"@next/plugin-material-ui": "latest",
|
||||
"clsx": "latest",
|
||||
"next": "latest",
|
||||
"prop-types": "latest",
|
||||
"react": "latest",
|
||||
"react-dom": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
}
|
||||
}
|
|
@ -1,25 +0,0 @@
|
|||
import React from 'react'
|
||||
import App from 'next/app'
|
||||
import Head from 'next/head'
|
||||
import { ThemeProvider } from '@material-ui/styles'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import theme from '../src/theme'
|
||||
|
||||
export default class MyApp extends App {
|
||||
render() {
|
||||
const { Component, pageProps } = this.props
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Head>
|
||||
<title>My page</title>
|
||||
</Head>
|
||||
<ThemeProvider theme={theme}>
|
||||
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
|
||||
<CssBaseline />
|
||||
<Component {...pageProps} />
|
||||
</ThemeProvider>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -1,44 +0,0 @@
|
|||
import React from 'react'
|
||||
import Container from '@material-ui/core/Container'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Box from '@material-ui/core/Box'
|
||||
import MuiLink from '@material-ui/core/Link'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import ProTip from '../src/ProTip'
|
||||
import Link from '../src/Link'
|
||||
|
||||
function Copyright() {
|
||||
return (
|
||||
<Typography variant="body2" color="textSecondary" align="center">
|
||||
{'Copyright © '}
|
||||
<MuiLink color="inherit" href="https://material-ui.com/">
|
||||
Your Website
|
||||
</MuiLink>{' '}
|
||||
{new Date().getFullYear()}
|
||||
{'.'}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<Container maxWidth="sm">
|
||||
<Box my={4}>
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
Next.js example
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
component={Link}
|
||||
naked
|
||||
href="/"
|
||||
>
|
||||
Go to the main page
|
||||
</Button>
|
||||
<ProTip />
|
||||
<Copyright />
|
||||
</Box>
|
||||
</Container>
|
||||
)
|
||||
}
|
|
@ -1,37 +0,0 @@
|
|||
import React from 'react'
|
||||
import Container from '@material-ui/core/Container'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Box from '@material-ui/core/Box'
|
||||
import MuiLink from '@material-ui/core/Link'
|
||||
import ProTip from '../src/ProTip'
|
||||
import Link from '../src/Link'
|
||||
|
||||
function Copyright() {
|
||||
return (
|
||||
<Typography variant="body2" color="textSecondary" align="center">
|
||||
{'Copyright © '}
|
||||
<MuiLink color="inherit" href="https://material-ui.com/">
|
||||
Your Website
|
||||
</MuiLink>{' '}
|
||||
{new Date().getFullYear()}
|
||||
{'.'}
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Container maxWidth="sm">
|
||||
<Box my={4}>
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
Next.js example
|
||||
</Typography>
|
||||
<Link href="/about" color="secondary">
|
||||
Go to the about page
|
||||
</Link>
|
||||
<ProTip />
|
||||
<Copyright />
|
||||
</Box>
|
||||
</Container>
|
||||
)
|
||||
}
|
|
@ -1,67 +0,0 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import clsx from 'clsx'
|
||||
import { useRouter } from 'next/router'
|
||||
import NextLink from 'next/link'
|
||||
import MuiLink from '@material-ui/core/Link'
|
||||
|
||||
const NextComposed = React.forwardRef(function NextComposed(props, ref) {
|
||||
const { as, href, prefetch, ...other } = props
|
||||
|
||||
return (
|
||||
<NextLink href={href} prefetch={prefetch} as={as}>
|
||||
<a ref={ref} {...other} />
|
||||
</NextLink>
|
||||
)
|
||||
})
|
||||
|
||||
NextComposed.propTypes = {
|
||||
as: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
prefetch: PropTypes.bool,
|
||||
}
|
||||
|
||||
// A styled version of the Next.js Link component:
|
||||
// https://nextjs.org/docs/#with-link
|
||||
function Link(props) {
|
||||
const {
|
||||
activeClassName = 'active',
|
||||
className: classNameProps,
|
||||
innerRef,
|
||||
naked,
|
||||
...other
|
||||
} = props
|
||||
const router = useRouter()
|
||||
|
||||
const className = clsx(classNameProps, {
|
||||
[activeClassName]: router.pathname === props.href && activeClassName,
|
||||
})
|
||||
|
||||
if (naked) {
|
||||
return <NextComposed className={className} ref={innerRef} {...other} />
|
||||
}
|
||||
|
||||
return (
|
||||
<MuiLink
|
||||
component={NextComposed}
|
||||
className={className}
|
||||
ref={innerRef}
|
||||
{...other}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Link.propTypes = {
|
||||
activeClassName: PropTypes.string,
|
||||
as: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
||||
naked: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
prefetch: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default React.forwardRef((props, ref) => (
|
||||
<Link {...props} innerRef={ref} />
|
||||
))
|
|
@ -1,37 +0,0 @@
|
|||
import React from 'react'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import Link from '@material-ui/core/Link'
|
||||
import SvgIcon from '@material-ui/core/SvgIcon'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
|
||||
function LightBulbIcon(props) {
|
||||
return (
|
||||
<SvgIcon {...props}>
|
||||
<path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
|
||||
</SvgIcon>
|
||||
)
|
||||
}
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
margin: theme.spacing(6, 0, 3),
|
||||
},
|
||||
lightBulb: {
|
||||
verticalAlign: 'middle',
|
||||
marginRight: theme.spacing(1),
|
||||
},
|
||||
}))
|
||||
|
||||
export default function ProTip() {
|
||||
const classes = useStyles()
|
||||
return (
|
||||
<Typography className={classes.root} color="textSecondary">
|
||||
<LightBulbIcon className={classes.lightBulb} />
|
||||
Pro tip: See more{' '}
|
||||
<Link href="https://material-ui.com/getting-started/templates/">
|
||||
templates
|
||||
</Link>{' '}
|
||||
on the Material-UI documentation.
|
||||
</Typography>
|
||||
)
|
||||
}
|
|
@ -1,22 +0,0 @@
|
|||
import { createMuiTheme } from '@material-ui/core/styles'
|
||||
import { red } from '@material-ui/core/colors'
|
||||
|
||||
// Create a theme instance.
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: '#556cd6',
|
||||
},
|
||||
secondary: {
|
||||
main: '#19857b',
|
||||
},
|
||||
error: {
|
||||
main: red.A400,
|
||||
},
|
||||
background: {
|
||||
default: '#fff',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export default theme
|
Loading…
Reference in a new issue