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), and starting that with "use client";
directive (opens in a new tab):
"use client"; // this registers <Editor> as a Client Component
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/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
Now, you can 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:
import dynamic from "next/dynamic";
const Editor = dynamic(() => import("./editor"), { ssr: false });
function App() {
return (
<div>
<Editor />
</div>
);
}
This should resolve any issues you might run into when embedding BlockNote in your Next.js React app!