From 3103803f2f651b8dab2a6ad600f328651323154a Mon Sep 17 00:00:00 2001
From: yousefed <yousefdardiry@gmail.com>
Date: Wed, 12 Jul 2023 22:28:09 +0200
Subject: [PATCH 1/2] nextjs docs

---
 packages/website/docs/.vitepress/config.ts |  1 +
 packages/website/docs/docs/nextjs.md       | 60 ++++++++++++++++++++++
 packages/website/docs/docs/quickstart.md   |  4 ++
 3 files changed, 65 insertions(+)
 create mode 100644 packages/website/docs/docs/nextjs.md

diff --git a/packages/website/docs/.vitepress/config.ts b/packages/website/docs/.vitepress/config.ts
index 0c3b2c8cf..507300e44 100644
--- a/packages/website/docs/.vitepress/config.ts
+++ b/packages/website/docs/.vitepress/config.ts
@@ -75,6 +75,7 @@ const SIDEBAR_DEFAULT = [
         text: "Real-time collaboration",
         link: "/docs/real-time-collaboration",
       },
+      { text: "Next.js", link: "/docs/nextjs" },
       {
         text: "Without React (vanilla JS)",
         link: "/docs/vanilla-js",
diff --git a/packages/website/docs/docs/nextjs.md b/packages/website/docs/docs/nextjs.md
new file mode 100644
index 000000000..779cea934
--- /dev/null
+++ b/packages/website/docs/docs/nextjs.md
@@ -0,0 +1,60 @@
+---
+title: Next.js and BlockNote
+description: Details on integrating BlockNote with Next.js
+imageTitle: Next.js and BlockNote
+path: /docs/nextjs
+---
+
+# Next.js and BlockNote
+
+(only for next.js users)
+
+Because BlockNote is a component that should only be rendered client-side (and not on the server), we need to make sure that Next.js does not try to render BlockNote as a server-side component.
+
+To do this, first see if you're using the modern [App router](https://nextjs.org/docs/app) or the classic [Pages router](https://nextjs.org/docs/pages).
+
+(If the component you want to add BlockNote to is in an `app` directory, you're likely to be using the App router. If you're working in a `pages` directory, you're using the pages router).
+
+## App router
+
+Make sure to use BlockNote in a [Client Component](https://nextjs.org/docs/getting-started/react-essentials#client-components). You can do this by creating a separate file for your component, and starting that with `"use client";` [directive](https://react.dev/reference/react/use-client).
+
+```typescript
+"use client"; // this registers <Editor> as a Client Component
+import { BlockNoteEditor } from "@blocknote/core";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import "@blocknote/core/style.css";
+
+// Our <Editor> component that we can now use
+export default Editor() {
+  // Creates a new editor instance.
+  const editor: BlockNoteEditor | null = useBlockNote({});
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
+```
+
+## Pages router
+
+If you're using the classic Pages router (note that Next.js recommends upgrading to the App router) and are running into issues embedding BlockNote directly, you can use [Dynamic Imports](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) to make sure BlockNote is only imported on the client-side.
+
+First, create an isolated `<Editor>` component using the snipped above.
+
+Then, you can import this using `next/dynamic` in your page:
+
+```typescript
+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!
diff --git a/packages/website/docs/docs/quickstart.md b/packages/website/docs/docs/quickstart.md
index d448dfc20..f4e78adc7 100644
--- a/packages/website/docs/docs/quickstart.md
+++ b/packages/website/docs/docs/quickstart.md
@@ -46,6 +46,10 @@ function App() {
 
 As well as `BlockNoteView` and `useBlockNote`, we import `@blocknote/core/style.css` to provide default styling for the editor.
 
+::: warning Next.js usage (or other server-side React frameworks)
+Are you using Next.js (`create-next-app`)? Because BlockNote is a client-only component, make sure to disable server-side rendering of BlockNote. [Read our guide on setting up Next.js + BlockNote](/docs/nextjs)
+:::
+
 ## Demo: Basic App Using BlockNote
 
 Taking the same code, the live preview below turns it into a super simple, working app:

From f05eb2a0046e9d4849df8e292ced2ab88b73337c Mon Sep 17 00:00:00 2001
From: yousefed <yousefdardiry@gmail.com>
Date: Thu, 13 Jul 2023 19:49:15 +0200
Subject: [PATCH 2/2] fix next doc

---
 packages/website/docs/docs/nextjs.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/website/docs/docs/nextjs.md b/packages/website/docs/docs/nextjs.md
index 779cea934..7268df551 100644
--- a/packages/website/docs/docs/nextjs.md
+++ b/packages/website/docs/docs/nextjs.md
@@ -7,9 +7,7 @@ path: /docs/nextjs
 
 # Next.js and BlockNote
 
-(only for next.js users)
-
-Because BlockNote is a component that should only be rendered client-side (and not on the server), we need to make sure that Next.js does not try to render BlockNote as a server-side component.
+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.
 
 To do this, first see if you're using the modern [App router](https://nextjs.org/docs/app) or the classic [Pages router](https://nextjs.org/docs/pages).