NextJS Material-UI Layout starter

Supercharge your new Material-UI project with Mui Treasury Layout.

v4 just came out in May 2020 with whole new cool stuffs.

• Reduce JS calculation and leverage css-in-js for server side rendering (no more blip at first paint)
• Keep the library lean as much as possible. Get rid of lodash and don't rely on specific css-in-js lib (jss is still used internally in Material-UI, so we cannot remove it)
• Improve developer experience by rewriting with typescript and design new API
• Add more documentation & troubleshoot requested from developers (thanks everyone)
• Reduce bundle size and make it tree shakeable!

Why you need this? 🤔

with power of gatsby and superb Material-UI, you can build your next project super fast but! do you want to start the whole layout from scratch?

Layout is not easy as it is, that's why need to use Mui Treasury Layout.

Features 🛠

Mui Treasury Layout provides wide range of layout that you can customize to fit your need.

• Persistent behavior
• Auto collapse
• Header Magnet

Documentation 📖

• Intro to layout
• Tutorials
• Advanced usage
• Features
• API reference
• Examples
• Clones

Examples 👍

Here is some clone examples that we made from this lib.

• React JS official

• Messenger

• Shopping cart

Get started 🚀

First, clone this repo

$ git clone https://github.com/mui-treasury/nextjs-mui-layout-starter.git
$ cd nextjs-mui-layout-starter

Run the project and see the result in http://localhost:3000/ 😃

$ yarn dev

Using NextJS, you might need to understand about SSR. These are all setup for this starter,

• babelrc (added babel-plugin-styled-components for styled-components)
• /pages/_app.js from material-ui official doc. Note that in order to work properly with styled-components, <StylesProvider injectFirst >...</StylesProvider> is required.
• /pages/_document.js from this repo but theme is removed.

Need help?

If you need help or stuck at installation, open an issue here.

But if you have an issue about Mui Treasury Layout, open an issue here.

Contributing 💪

PR is welcome if you want to add more examples in pages or improve anything no matter how small it is.

License 📝

MIT.