Next.js and BlockNote

BlockNote is a component that should only be rendered client-side (and not on the server). If you're using Next.js, you need to make sure that Next.js does not try to render BlockNote as a server-side component.

Make sure to use BlockNote in a Client Component (opens in a new tab). You can do this by creating a separate file for your component (make sure this sits outside of your pages or app directory, for example components/Editor.tsx), and starting that with "use client"; directive (opens in a new tab):

"use client"; // this registers <Editor> as a Client Component
import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
 
// Our <Editor> component we can reuse later
export default function Editor() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

Import as dynamic

In the same directory, create a new file called DyanmicEditor.tsx: Here, we will use Dynamic Imports (opens in a new tab) to make sure BlockNote is only imported on the client-side.

You can import the component we just created above using next/dynamic in your page:

"use client";
 
import dynamic from "next/dynamic";
 
export const Editor = dynamic(() => import("./Editor"), { ssr: false });

Import in a page / app

Now, you can import the dynamic editor in your page or app:

import { Editor } from "../components/DynamicEditor";
 
 
function App() {
  return (
    <div>
      <Editor />
    </div>
  );
}

This should resolve any issues you might run into when embedding BlockNote in your Next.js React app!