Skip to content

Commit

Permalink
fix nextjs docs (#304)
Browse files Browse the repository at this point in the history
  • Loading branch information
YousefED authored Aug 4, 2023
1 parent 8ba4f4a commit 7b505b4
Showing 1 changed file with 6 additions and 14 deletions.
20 changes: 6 additions & 14 deletions packages/website/docs/docs/nextjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,16 @@ path: /docs/nextjs

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).

(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).
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 (**make sure this sits outside of your `pages` or `app` directory**), 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() {
// Our <Editor> component we can reuse later
export default function Editor() {
// Creates a new editor instance.
const editor: BlockNoteEditor | null = useBlockNote({});

Expand All @@ -33,13 +27,11 @@ export default 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.
## Import as dynamic

First, create an isolated `<Editor>` component using the snipped above.
Now, 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.

Then, you can import this using `next/dynamic` in your page:
You can import the component we just created above using `next/dynamic` in your page:

```typescript
import dynamic from "next/dynamic";
Expand Down

1 comment on commit 7b505b4

@vercel
Copy link

@vercel vercel bot commented on 7b505b4 Aug 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.