2017-02-02 13:10:59 +01:00
# Example app with react-md
2020-01-16 23:23:56 +01:00
This example features how you use [react-md ](https://react-md.mlaursen.com/ ) (React Material Design) with Next.js.
I recommend reading [layout-component ](../layout-component ) example next to learn how to reuse the layout across the pages.
2017-03-18 11:45:48 +01:00
![Screenshot ](https://cloud.githubusercontent.com/assets/304265/22472564/b2e04ff0-e7de-11e6-921e-d0c9833ac805.png )
2019-11-27 17:40:58 +01:00
## Deploy your own
Deploy the example using [ZEIT Now ](https://zeit.co/now ):
2020-02-25 01:08:34 +01:00
[![Deploy with ZEIT Now ](https://zeit.co/button )](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-react-md)
2019-11-27 17:40:58 +01:00
2017-02-02 13:10:59 +01:00
## How to use
2017-12-03 05:30:17 +01:00
### Using `create-next-app`
2020-01-16 23:23:56 +01:00
Execute [`create-next-app` ](https://github.com/zeit/next.js/tree/canary/packages/create-next-app ) with [npm ](https://docs.npmjs.com/cli/init ) or [Yarn ](https://yarnpkg.com/lang/en/docs/cli/create/ ) to bootstrap the example:
2017-12-03 05:30:17 +01:00
2018-03-14 09:09:46 +01:00
```bash
2020-01-16 23:23:56 +01:00
npm init next-app --example with-react-md with-react-md-app
2018-03-14 09:09:46 +01:00
# or
yarn create next-app --example with-react-md with-react-md-app
2017-12-03 05:30:17 +01:00
```
### Download manually
2018-07-11 23:56:15 +02:00
Download the example:
2017-02-02 13:10:59 +01:00
```bash
2017-12-07 03:12:42 +01:00
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-md
2017-02-02 13:10:59 +01:00
cd with-react-md
```
Install it and run:
```bash
npm install
2019-10-11 11:50:06 +02:00
ln -f -s ../node_modules/react-md/dist/react-md.light_blue-yellow.min.css public/react-md.light_blue-yellow.min.css
2017-02-02 13:10:59 +01:00
npm run dev
2018-04-03 14:19:05 +02:00
# or
yarn
2019-10-11 11:50:06 +02:00
ln -f -s ../node_modules/react-md/dist/react-md.light_blue-yellow.min.css public/react-md.light_blue-yellow.min.css
2018-04-03 14:19:05 +02:00
yarn dev
2017-02-02 13:10:59 +01:00
```
2020-02-25 01:08:34 +01:00
Deploy it to the cloud with [ZEIT Now ](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example ) ([Documentation](https://nextjs.org/docs/deployment)).