Next.js 16 + Material UI Setup Guide for App Router + RSC: Dev Diary #2

Christopher Olsen — Mon, 01 Jun 2026 11:00:00 +0000

In Part 1 of this two-part series, we walked through scaffolding a brand-new React application with Next.js. The result was a bare bones application with no styling to speak of. Early in any web application project, you have an important decision to make: are you going to build the look and feel of your app from scratch with custom CSS and JavaScript, or are you going to leverage a third-party solution to achieve a more professional-looking UI than you would with a custom solution and with less development effort? Most people choose the latter, and we will too.

At DMC, our preferred UI library is Material UI, a component library maintained by Google. I first used Material UI nearly a decade ago, before it even reached version 1.0. Since then, the library has evolved significantly and now includes first-class support for Next.js and React Server Components. In this post, we’ll walk through how to add Material UI to a new Next.js 16 application. At the time of writing, Material UI v9.0.0 is the version in use.

Installing the NPM Packages for Material UI

First, run the following command to install the core Material UI packages using Yarn:

yarn add @mui/material @emotion/react @emotion/styled

yarn add @mui/material @emotion/react @emotion/styled

The Material UI documentation recommends installing @fontsource/roboto to use the Roboto font in your application. However, at the time of writing this post, that package causes the TypeScript server in my project to crash, resulting in the loss of IntelliSense support in Visual Studio Code. Because of this, I recommend skipping that package. Later in this post, we’ll import the Roboto font using a different approach.

Next, run the following command to install the packages required to integrate Material UI with Next.js App Router:

yarn add @mui/material-nextjs @emotion/cache

yarn add @mui/material-nextjs @emotion/cache

Setting Up a Material UI Theme

One of Material UI’s most useful features is its customizable themes. Material UI includes a default theme that can be extensively customized—everything from spacing, color palettes, and even border radius can be modified based on your design sensibilities.

For this application, we’ll primarily use the default Material UI theme while enabling built-in light/dark mode functionality. We can initialize the theme using the createTheme() function:

// src/theme.tsx
"use client";
import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    fontFamily: "var(--font-roboto)",
  },
  cssVariables: {
    colorSchemeSelector: "class",
  },
  colorSchemes: {
    dark: true,
  },
});

export default theme;

// src/theme.tsx
"use client";
import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    fontFamily: "var(--font-roboto)",
  },
  cssVariables: {
    colorSchemeSelector: "class",
  },
  colorSchemes: {
    dark: true,
  },
});

export default theme;

This theme configuration does three things:

Sets Roboto as the default font family for all Typography components.
Enables dark mode support. Light mode is enabled by default.
Enables CSS variables and configures the colorSchemeSelector to use CSS classes.

The final configuration helps prevent SSR flickering, which can occur because the server cannot detect a user’s preferred color mode during the initial render. With this setup, Material UI applies either a light or dark class to the element on the client side and uses CSS variables to apply the appropriate theme colors. This approach provides a smoother transition between server-side rendering and client-side hydration while maintaining support for light and dark themes.

Color Mode Picker

Speaking of color mode (light/dark), it can be nice to offer users a way to switch between light mode and dark mode. With the way we’ve configured our theme, Material UI will automatically set the color mode based on the user’s system preference, set in their web browser. So if a user has configured “dark” mode in Chrome, for example, when they visit our application, they’ll automatically get the dark-mode version of our UI.

Some users may want dark mode specifically for our application and light mode elsewhere, so to provide that flexibility, we’ll build a simple color mode selector. For this, we’ll use the tools Material UI provides, including input and label components, along with tools for customizing them.

// colorThemePicker.tsx
"use client";
import FormControl from "@mui/material/FormControl";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import { useColorScheme } from "@mui/material/styles";
import { FormLabel } from "@mui/material";

export default function ColorThemePicker() {
  const { mode, setMode } = useColorScheme();
  if (!mode) {
    return null;
  }
  const handleChange = (event: SelectChangeEvent) => {
    setMode(event.target.value as "system" | "light" | "dark");
  };

  return (
    <FormControl
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 1,
      }}
    >
      <FormLabel id="theme-select-label">Theme</FormLabel>
      <Select
        labelId="theme-select-label"
        aria-labelledby="theme-select-label"
        id="theme-select"
        value={mode}
        label="Theme"
        onChange={handleChange}
        sx={{ minWidth: "10rem" }}
      >
        <MenuItem value="system">System</MenuItem>
        <MenuItem value="light">Light</MenuItem>
        <MenuItem value="dark">Dark</MenuItem>
      </Select>
    </FormControl>
  );
}

// colorThemePicker.tsx
"use client";
import FormControl from "@mui/material/FormControl";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import { useColorScheme } from "@mui/material/styles";
import { FormLabel } from "@mui/material";

export default function ColorThemePicker() {
  const { mode, setMode } = useColorScheme();
  if (!mode) {
    return null;
  }
  const handleChange = (event: SelectChangeEvent) => {
    setMode(event.target.value as "system" | "light" | "dark");
  };

  return (
    
      sx={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: 1,
      }}
    >
      "theme-select-label">Theme
      
        labelId="theme-select-label"
        aria-labelledby="theme-select-label"
        id="theme-select"
        value={mode}
        label="Theme"
        onChange={handleChange}
        sx={{ minWidth: "10rem" }}
      >
        "system">System
        "light">Light
        "dark">Dark
      
    
  );
}

I’ll explain this from the top down.

We need a piece of state to track the user’s color mode selection: light, dark, or system (whatever they’ve selected in their browser settings). We also need a setter for that state so that we can update it based on the user’s actions. For that, we use a hook provided by Material UI: useColorScheme(). The mode returned by this hook is always undefined on the first render, so we handle that with a simple falsiness check:

if(!mode) {
  return null;
}

if(!mode) {
  return null;
}

Next, we have our return statement where we declare the UI that this component should render. We’re making use of a few components from Material UI:

The latter two are kind of self-explanatory if you have a basic background in HTML. FormControl is a nice-to-have component that manages some state related to the input element that it wraps, such as focused state, filled state, error state, required state, etc.

Something I want to point out is the use of the sx prop on the FormControl component. This is a CSS-in-JS styling solution from Material UI, intended for one-off customization. Our application has precisely one color theme picker, so it easily fits the definition of a one-off customization. You can read more about this system in the Material UI documentation.

The purpose served by our use of the sx prop here is to apply some flexbox CSS properties to our FormControl to make its child elements (the FormLabel and Select components) appear side by side instead of displaying the form label above the select component.

<FormControl
  sx={{
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: 1,
  }}
>/


  sx={{
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: 1,
  }}
>/

Under the hood, a CSS selector is generated and applied to the rendered DOM element, and a

User Interface Design Archives | DMC, Inc.

Next.js 16 + Material UI Setup Guide for App Router + RSC: Dev Diary #2

Installing the NPM Packages for Material UI

Setting Up a Material UI Theme

Color Mode Picker