Next.js

使用此逐步指南将 Tiptap 集成到您的 Next.js 项目中。

要求

机器上已安装 Node
具备 React 使用经验

创建项目（可选）

如果您已有现成的 Next.js 项目，也可以跳过此步骤。

本指南中，我们将新建一个名为 my-tiptap-project 的 Next.js 项目。以下命令将设置我们开始所需的一切。

# 创建项目
npx create-next-app my-tiptap-project

# 进入项目目录
cd my-tiptap-project

安装依赖

现在我们已有一个标准的样板项目，可以开始配置 Tiptap 了！为此，我们需要安装三个包：@tiptap/react、@tiptap/pm 和 @tiptap/starter-kit，后者包括所有快速入门所需的扩展。

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit

如果您按照步骤 1 和 2 进行操作，现在可以运行 npm run dev 启动项目，并在您喜欢的浏览器中打开 http://localhost:3000/。如果您使用的是已有项目，具体方式可能有所不同。

集成 Tiptap

要开始使用 Tiptap，您需要向应用添加一个新组件。首先创建一个名为 components/ 的目录。接下来创建一个名为 Tiptap 的组件，将以下示例代码添加到 components/Tiptap.jsx 中。

'use client'

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const Tiptap = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Hello World! 🌎️</p>',
    // 不立即在服务器端渲染以避免 SSR 问题
    immediatelyRender: false,
  })

  return <EditorContent editor={editor} />
}

export default Tiptap

将组件添加到应用中

现在，让我们用以下示例代码替换 app/page.js（如果您使用的是 Pages 路由，则替换 pages/index.js）的内容，将 Tiptap 组件集成到应用里。

import Tiptap from '../components/Tiptap'

export default function Home() {
  return <Tiptap />
}

现在您应该能在浏览器中看到 Tiptap，给自己点个赞吧！:)

在 Next.js 中使用 yjs

为避免出现错误：“Yjs was already imported. This breaks constructor checks and will lead to issues!”，请在您的 Next.js 配置文件中添加以下内容。根据您的 node_modules 目录所在位置，您可能需要将 'node_modules/yjs' 调整为 '../node_modules/yjs' 或 '../../node_modules/yjs'。

const path = require('path')

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 确保所有 'yjs' 的导入都解析为同一个实例
      config.resolve.alias['yjs'] = path.resolve(__dirname, 'node_modules/yjs')
    }
    return config
  },
}

关于此问题的讨论和修复方案，请参见 Github。