Installation

Installing Mod in a Next.js App

How to install Mod for use in a Next.js app.

To use Mod with Next.js, you will want to decide how you want Mod's files loaded in your app. There are two options:

Global

This will load Mod's CSS and JavaScript globally in your app for all pages. This is the recommended approach for Next.js sites as Next.js will throw warnings in the server console about Mod's JavaScript causing side-effects (expected).

Global CSS and ESM JavaScript

This will load Mod's CSS globally and set up your JavaScript to load via ESM.

Using Global CSS and JavaScript

To start installing Mod in your app, first, you'll want to copy the required Mod files into your app. Use the table below to know where files should go:

Paths for Plus Users

If you've purchased a copy of Mod Plus, you will want to use the plus file variants (e.g., mod-light-plus.min.css) below.

Type	File in mod(-plus).zip	Target path in app	What is it?
File	mod-light(-plus).min.css	public/css/mod-light(-plus).min.css	The light-themed version of Mod.
File	mod-dark(-plus).min.css	public/css/mod-dark(-plus).min.css	The dark-themed version of Mod.
File	mod(-plus).iife.min.js	public/js/mod(-plus).iife.min.js	The IIFE version of the JavaScript for Mod's interactive components. Use this if you want to load Mod's JavaScript globally in your app.
File	fonts/lucide.woff2	public/fonts/lucide.woff2	The icon font used by Mod, Lucide.
File	fonts/mod-brand-icons.woff2	public/fonts/mod-brand-icons.woff2	The icon font for brand logos used by Mod.

Once you have the files copied over to your app, next, you'll want to update your app/layout.js file to include Mod's imports:

app/layout.js

import { cookies } from 'next/headers';
import "./globals.css";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({ children }) {  
  const theme = (await cookies()).get('theme')?.value || 'light';
  return (
    <html lang="en">
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet" />        
        <link rel="stylesheet" href={`/css/mod-\${theme}(-plus).min.css`} />
        <script src="/js/mod-plus.iife.min.js"></script>
      </head>      
      <body data-mod-theme={theme}>
        {children}
      </body>
    </html>
  );
}

To start, above, we import the cookies method from next/headers so that we can get access to the browser's cookies for setting our theme. Down in the component function being exported from the file, we get this cookie by calling to (await cookies()).get('theme')?.value. If the cookie isn't set, we fall back to light as our default theme.

Next, inside of the <head> tag returned from our component, we include the Google Fonts CDN links for Mod's font, Inter.

Below this, we include the Mod stylesheet relative to the current value of our theme variable from our public/css folder.

Finally, we include Mod's JavaScript file from our public/js folder.

Once all of this is complete, Mod should be loaded globally in your Next.js app. If you have a page that uses Mod components that rely on JavaScript, you can include it directly in your page:

Change class attribute to className

By default, Mod's example HTML copied from your dashboard will trigger a warning about the usage of the HTML class attribute. To avoid it, do a global replace of class= to className= to comply with React's expectations.

app/page.js

'use client';

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    if (window.mod) {
      window.mod.command_palette();
    }
  }, []);

  return (
    <div className="mod-command-palette">
      {/* HTML for Mod's command palette component... */}
    </div>
  );
}

Above, we import the useEffect hook from react and then call to it inside of our component function's body. To it, we pass a function which itself checks to see if window.mod is defined, and if it is, calls to the window.mod.command_palette() method.

Using Global CSS and ESM JavaScript

Next will show warnings for Mod's ESM file

Because Mod's JavaScript contains DOM-modification code, using this approach will trigger a perpetual warning in your server console. Currently, this is expected behavior and is just a warning. If you want to avoid this warning, use the global JavaScript approach in the previous section.