Tiptap Docs

Next.js

Integrate Tiptap with your Next.js project using this step-by-step guide.

Requirements

  • Node installed on your machine
  • Experience with React

Create a project (optional)

If you already have an existing Next.js project, that’s fine too. Just skip this step and proceed with the next step.

For the sake of this guide, let’s start with a new Next.js project called my-tiptap-project. The following command sets up everything we need to get started.

# create a project
npx create-next-app my-tiptap-project

# change directory
cd my-tiptap-project

Install dependencies

Now that we have a standard boilerplate set up we can get started on getting Tiptap up and running! For this we will need to install three packages: @tiptap/react, @tiptap/pm and @tiptap/starter-kit which includes all the extensions you need to get started quickly.

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

If you followed step 1 and 2, you can now start your project with npm run dev, and open http://localhost:3000/ in your favorite browser. This might be different, if you’re working with an existing project.

Integrate Tiptap

To actually start using Tiptap, you’ll need to add a new component to your app. To do this, first create a directory called components/. Now it's time to create our component which we'll call Tiptap. To do this put the following example code in 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>',
  })

  return <EditorContent editor={editor} />
}

export default Tiptap

Add it to your app

Now, let’s replace the content of pages/index.js with the following example code to use our new Tiptap component in our app.

import Tiptap from '../components/Tiptap'

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

You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)

Using yjs with Next.js

To avoid the error: Yjs was already imported. This breaks constructor checks and will lead to issues!, add the following to your next.js config file. You might have to adjust the 'node_modules/yjs' to '../node_modules/yjs' or '../../node_modules/yjs' depending on where your node_modules are installed.

const path = require('path')

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Ensure that all imports of 'yjs' resolve to the same instance
      config.resolve.alias['yjs'] = path.resolve(__dirname, 'node_modules/yjs')
    }
    return config
  },
}

The original discussion and fix can be found on Github.