Next.js & Material UI: A Disagreeable Pair

Jul 22, 2020 · Brittani S Avery

coder
Share:

I have been on a personal-coding-project kick lately. Two projects are currently in the works and one is muddling about in my mind. The project discussed in this blog post will be a database for the lineages of my digital dragons from the site DragCave.net. It is as nerdy as it sounds. You collect pixel dragons and can breed them together to create all sorts of lines and combinations. The reasoning for this project is that I was tired of using a Google Sheet that took forever and a day to load. Also, searching for anything more complex than name or breed was hard.

I decided that I would also make this a bit of a learning opportunity, so I picked a new React framework to use. I decided to go with Next.js, an apparently developer-friendly framework that supports server-side rendering out of the box. It’s easy to get started using create-next-app with npm (or yarn if you prefer).

npx create-next-app

I made progress on my site, setting up pages and adding routes. Eventually, I needed to style the app because things need to be pretty. I originally went with Material UI since I have enjoyed using it for work. It has a wide variety of components, which can be easily customized. Normally to use Material UI, you only have to include the @material-ui/core package to your React app, add a ThemeProvider around the start of your app (normally located in app.js), and you're good to go. However, there is a bit more needed to get Material UI to render sever-side with Next.js. You have to add the following to the _document.js.

MuiDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

Once I added that, things went smooth enough. But then as I kept building out the app, I ran into a more and more errors, like console warnings and npm errors when adding other packages or starting the development server. Eventually, I got frustrated enough to restart building it with a different styling solution.

I found Bulma, a free, open source CSS framework based on Flexbox. It was included in the template I used for the second personal coding project I'm working on. I like how it has variables to easily customize it, has components similar to Material UI, and it works seamlessly with Next.js. I added the necessarily packages and the .scss file for customization. And...that's it.

Since it has been easier to work with Bulma, I've been able to change the colors and fiddle with the wording a bit, but here's the home page in the two different styling frameworks.

A comparison of the home page using the Material UI Framework and the Bulma Framework

If you're a non-coder and made it to the end, thank you for reading my complaints of software development. Let me know which home page you like. Until next time!

Share:

Related Posts

If you enjoyed this post, check these related posts. Or better yet, join my newsletter to get updates right to your inbox!

Code Fix: The SIBA Website's Move from Create-React-App to Astro 1.0

Oct 30, 2023

coder

The website for the fictional basketball league I run with my dad, SIBA, was built with the abandoned and broken Create-React-App. Wanting to move onto something newer, I decided to give the Astro framework a try.

Mailchimp in "The Attack of the Bots"

Sep 30, 2022

coder

The spam bots finally found my little piece of the internet and flooded my newsletter with thousands of sign-ups from a "Hot Alisa". This post describes the steps I took to make sure that the spamming can never happen again.