How to use LSM in Next.js 14 (app router)

[spacecat]

Hi,

I searched the issues here and someone mentioned to use ssr: false using a dynamic import but I can't get it to work.

const createStore = dynamic(
  () => import("little-state-machine").then((mod) => mod.createStore),
  { ssr: false },
);

What is the correct way to import LSM in a Next.js 14 (app router) app?

[SoloReverse]

Dont import the module with dynamic. import the module in a component file then import the component with dynamic and ssr false as you did.

[ivannissimrch]

What @SoloReverse said, plus one addition for Next.js 15:

The page that uses dynamic(..., { ssr: false }) must also be a Client Component.

// page.tsx
"use client";  // ← Required in Next.js 15
import dynamic from "next/dynamic";
const Counter = dynamic(() => import("./Counter"), { ssr: false });

I tested with Next.js 15 + React 19.

[bluebill1049]

What @SoloReverse said, plus one addition for Next.js 15:

The page that uses dynamic(..., { ssr: false }) must also be a Client Component.

// page.tsx
"use client"; // ← Required in Next.js 15
import dynamic from "next/dynamic";
const Counter = dynamic(() => import("./Counter"), { ssr: false });

I tested with Next.js 15 + React 19.

yes, just keep it simple and run it in the client side.