NextJSにBlockNoteをインストールする

nextjs

 

NextJSインストール

npx create-next-app@latest block-note

 

BlockNoteインストール

npm install @blocknote/core @blocknote/react @blocknote/mantine @mantine/core @emotion/react

 

bootstrap

npm install bootstrap

 

src/app/layout.tsx

import 'bootstrap/dist/css/bootstrap.min.css';

 

 

ディレクトリ構成

src/
 ├── app/
 │    ├── layout.tsx
 │    └── page.tsx
 └── components/
      ├── Editor.tsx
      └── DynamicEditor.tsx
next.config.js
package.json
tsconfig.json or jsconfig.json

 

 

components/DynamicEditor.tsx

"use client";

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

 

components/Editor.tsx

"use client";

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import { ja } from "@blocknote/core/locales";
import "@blocknote/mantine/style.css";

// Uploads a file to tmpfiles.org and returns the URL to the uploaded file.
async function uploadFile(file: File) {
  const body = new FormData();
  body.append("file", file);

  const ret = await fetch("https://tmpfiles.org/api/v1/upload", {
    method: "POST",
    body: body,
  });
  return (await ret.json()).data.url.replace(
    "tmpfiles.org/",
    "tmpfiles.org/dl/",
  );
}

export default function Editor() {
	const editor = useCreateBlockNote({
		dictionary: ja,
		uploadFile,
	});
	return <BlockNoteView editor={editor} theme="light" />;
}

 

tmpfiles.orgにアップロードしてURLを取得する例

// Uploads a file to tmpfiles.org and returns the URL to the uploaded file.
async function uploadFile(file: File) {
const body = new FormData();
body.append("file", file);

const ret = await fetch("https://tmpfiles.org/api/v1/upload", {
method: "POST",
body: body,
});
return (await ret.json()).data.url.replace(
"tmpfiles.org/",
"tmpfiles.org/dl/",
);
}

 

 

export default function Editor() {
const editor = useCreateBlockNote({
dictionary: ja,  // ← 日本語化
uploadFile,  // ← 画像アップロード
});
return <BlockNoteView editor={editor} theme="light" />;
}

 

 

app/page.tsx

'use client';

import { Editor } from "../components/DynamicEditor";

export default function Page() {
  return (
    <main
      className="d-flex flex-column align-items-center justify-content-start min-vh-100 py-5"
      style={{ backgroundColor: "#f8f9fa" }}
    >
      <h1 className="mb-4 text-center">BlockNote サンプル</h1>

      <div
        className="shadow p-3 bg-white rounded"
        style={{
          width: "100%",
          maxWidth: "800px", // 幅は自由に調整OK
        }}
      >
        <Editor />
      </div>
    </main>
  );
}