How can you utilize Material UI's `useMediaQuery` in the `/app` route of NextJs (13.4) in order to prevent flashing?

Question

How can you utilize Material UI's `useMediaQuery` in the `/app` route of NextJs (13.4) in order to prevent flashing?

I've been working on a Next.js project and using the 'app' router to create a consistent layout for all pages. As part of handling responsive design, I incorporated Material-UI (MUI) and its useMediaQuery hook. However, when loading a page, I'm experiencing a slight issue where there's a momentary flash of the mobile version on desktop devices during the initial rendering.

Below is an overview of my current setup:

MUI with NextJS 13.4.4 /app route.
Utilizing Client Component By "use client"; directives in NextJS.

Here is the code snippet:

 "use client";
import { useState } from "react";
import { NextLinkComposed } from "../Link";
import { useTheme } from "@mui/material/styles";
import { drawerWidth } from "@/utils/constraints";
import {
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Drawer,
  Box,
  useMediaQuery,
  InputAdornment,
  OutlinedInput,
} from "@mui/material";
import {
  GroupsOutlined as GroupsIcon,
  DashboardOutlined as DashboardIcon,
  Search as SearchIcon,
} from "@mui/icons-material";

// Function component definition omitted for brevity

const SideBarItems = [
  {
    name: "Dashboard",
    path: "/dashboard",
    icon: DashboardIcon,
  },
  { name: "Users", path: "/user", icon: GroupsIcon },
];

I would greatly appreciate any assistance or insights regarding this issue.

Thank you.

next.js material-ui

Answer 1

Answer №1

In dealing with this issue, I have come up with a workaround that involves using an app router and SSG rendering technique. This method is based on information found in the MUI official documentation (https://mui.com/material-ui/guides/next-js-app-router/#next-js-and-react-server-components).

To implement this approach successfully, it is necessary to establish a state in localStorage labeled as deviceWidth during the initial loading phase. Since localStorage operates synchronously, there are no blocking issues to be concerned about.

ThemeProvider.tsx

"use client";
import createCache from "@emotion/cache";
import { useServerInsertedHTML } from "next/navigation";
import { CacheProvider } from "@emotion/react";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import React from "react";
import mediaQuery from "css-mediaquery";

const theme = createTheme({
  components: {
    MuiUseMediaQuery: {
      defaultProps: {
        ssrMatchMedia: (query) => ({
          matches: mediaQuery.match(query, {
            // The estimated CSS width of the browser.
            width: localStorage.getItem("deviceWidth") || 1200, // Include this default value
          }),
        }),
      },
    },
  },
});

export default function ThemeRegistry(props: any) {
  const { options, children } = props;

  const [{ cache, flush }] = React.useState(() => {
    const cache = createCache(options);
    cache.compat = true;
    const prevInsert = cache.insert;
    let inserted: string[] = [];
    cache.insert = (...args) => {
      const serialized = args[1];
      if (cache.inserted[serialized.name] === undefined) {
        inserted.push(serialized.name);
      }
      return prevInsert(...args);
    };
    const flush = () => {
      const prevInserted = inserted;
      inserted = [];
      return prevInserted;
    };
    return { cache, flush };
  });

  useServerInsertedHTML(() => {
    const names = flush();
    if (names.length === 0) {
      return null;
    }
    let styles = "";
    for (const name of names) {
      styles += cache.inserted[name];
    }
    return (
      <style
        key={cache.key}
        data-emotion={`${cache.key} ${names.join(" ")}`}
        dangerouslySetInnerHTML={{
          __html: styles,
        }}
      />
    );
  });

  return (
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </CacheProvider>
  );
}

layout.tsx

import ThemeRegistry from "./ThemeRegistry";
  import "./styles.css";

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <head>
        </head>
        <body>
          <ThemeRegistry options={{ key: "mui" }}>{children}</ThemeRegistry>
        </body>
      </html>
    );
  }

Answer 2

In dealing with this issue, I have come up with a workaround that involves using an app router and SSG rendering technique. This method is based on information found in the MUI official documentation (https://mui.com/material-ui/guides/next-js-app-router/#next-js-and-react-server-components).

To implement this approach successfully, it is necessary to establish a state in localStorage labeled as deviceWidth during the initial loading phase. Since localStorage operates synchronously, there are no blocking issues to be concerned about.

ThemeProvider.tsx

"use client";
import createCache from "@emotion/cache";
import { useServerInsertedHTML } from "next/navigation";
import { CacheProvider } from "@emotion/react";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import React from "react";
import mediaQuery from "css-mediaquery";

const theme = createTheme({
  components: {
    MuiUseMediaQuery: {
      defaultProps: {
        ssrMatchMedia: (query) => ({
          matches: mediaQuery.match(query, {
            // The estimated CSS width of the browser.
            width: localStorage.getItem("deviceWidth") || 1200, // Include this default value
          }),
        }),
      },
    },
  },
});

export default function ThemeRegistry(props: any) {
  const { options, children } = props;

  const [{ cache, flush }] = React.useState(() => {
    const cache = createCache(options);
    cache.compat = true;
    const prevInsert = cache.insert;
    let inserted: string[] = [];
    cache.insert = (...args) => {
      const serialized = args[1];
      if (cache.inserted[serialized.name] === undefined) {
        inserted.push(serialized.name);
      }
      return prevInsert(...args);
    };
    const flush = () => {
      const prevInserted = inserted;
      inserted = [];
      return prevInserted;
    };
    return { cache, flush };
  });

  useServerInsertedHTML(() => {
    const names = flush();
    if (names.length === 0) {
      return null;
    }
    let styles = "";
    for (const name of names) {
      styles += cache.inserted[name];
    }
    return (
      <style
        key={cache.key}
        data-emotion={`${cache.key} ${names.join(" ")}`}
        dangerouslySetInnerHTML={{
          __html: styles,
        }}
      />
    );
  });

  return (
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </CacheProvider>
  );
}

layout.tsx

import ThemeRegistry from "./ThemeRegistry";
  import "./styles.css";

  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <head>
        </head>
        <body>
          <ThemeRegistry options={{ key: "mui" }}>{children}</ThemeRegistry>
        </body>
      </html>
    );
  }

Answer 3

Answer №2

One method you may consider is utilizing the mui hidden component approach, which can be found here. By creating two distinct drawers and employing the sx props to hide them based on breakpoints.

Answer 4

One method you may consider is utilizing the mui hidden component approach, which can be found here. By creating two distinct drawers and employing the sx props to hide them based on breakpoints.

How can you utilize Material UI's `useMediaQuery` in the `/app` route of NextJs (13.4) in order to prevent flashing?

Answer №1

Answer №2

Similar questions

Switch the visibility of a div tag using Next.js

Enhance the Material UI Data Grid by customizing the toolbar's default slots with the option to disable the

What are some ways to implement a pre-execution step, such as an interceptor, before Nextjs runs getStatic

Map failing to refresh

I'm wondering, on a storybook, where is the best place to set my MUI X license key

Is there a way to personalize the appearance of Static File in nextjs?

Leverage the power of express-session in your NextJS project

I am trying to figure out how to properly utilize server-only functions within Next.js middleware

Adjust CardMedia Images to match their content in the new MUI 5 version

The MUI Module is missing: Unable to locate '@emotion/react'

Issues with zDepth functionality in Material-UI (React.js) not being functional

What is the best method to display a tooltip for a disabled radio button within a set of radio buttons?

Step-by-step guide for launching a Next.js/Node application

The Material UI button shifts to a different row

NextAuth encountered a CLIENT_FETCH_ERROR error while processing the session callback

What is causing styled-components to include my attributes in the DOM?

Setting up user roles using Firebase Auth in NextJS application

Electronic circuit embedded within a material-textured text field offering multiline functionality

The onScroll event is failing to trigger when scrolling to a particular div on Next.js

Resolve problems with implementing dynamic routes in Next.js