Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tashuo/nextjs-mui-learn

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/tashuo/nextjs-mui-learn
Owner: tashuo
Created: 2023-07-18T15:29:40.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2023-11-19T15:07:22.000Z (about 1 year ago)
Last Synced: 2023-11-19T16:25:48.126Z (about 1 year ago)
Language: TypeScript
Homepage: https://nextjs-mui-learn.vercel.app
Size: 417 KB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Material UI - Next.js example in TypeScript

## How to use

Download the example [or clone the repo](https://github.com/mui/material-ui):

```sh

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-next-ts

cd material-next-ts

```

Install it and run:

```sh

npm install

npm run dev

```

or:

[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-next-ts)

[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-next-ts)

## The idea behind the example

The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps.

It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).

## The link component

The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-next-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with MUI.

More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js).

## What's next?

You now have a working example project.

You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section.