---
title: "Next.js"
description: "Learn how to integrate Tiptap with Next.js to create a versatile and powerful rich text editor for your project."
canonical_url: "https://tiptap.dev/docs/editor/getting-started/install/nextjs"
---

# Next.js

Learn how to integrate Tiptap with Next.js to create a versatile and powerful rich text editor for your project.

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

### Requirements

- [Node](https://nodejs.org/en/download/) installed on your machine
- Experience with [React](https://reactjs.org/)

## Create a project (optional)

If you already have an existing Next.js project, that's fine too. Just skip this step.

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

```bash
# 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 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.

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

If you followed steps 1 and 2, you can now start your project with `npm run dev` and open [http://localhost:3000/](http://localhost:3000/) in your favorite browser. This might be different if you're working with an existing project.

## Integrate Tiptap

To start using Tiptap, you'll need to add a new component to your app. To do so, first create a directory called `components/`. Now it's time to create our component which we'll call `Tiptap`. To do this, add the following example code in `components/Tiptap.jsx`.

```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>',
    // Don't render immediately on the server to avoid SSR issues
    immediatelyRender: false,
  })

  return <EditorContent editor={editor} />
}

export default Tiptap
```

> **Why immediatelyRender: false?:**
>
> Next.js uses server-side rendering by default. Setting `immediatelyRender: false` prevents the editor from rendering on the server, which avoids [React hydration mismatch errors](https://react.dev/errors/418). The editor will initialize client-side after hydration completes. The `'use client'` directive ensures this component only runs in the browser.

### Add it to your app

Now, let's replace the content of `app/page.js` (or `pages/index.js`, if you are using the Pages router) with the following example code to use the `Tiptap` component in our app.

```jsx
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! :)

## Optimize your performance

We recommend visiting the [React Performance Guide](https://tiptap.dev/docs/guides/performance.md) to integrate the Tiptap Editor efficiently. This will help you avoid potential issues as your app scales.

## Next steps

- [Configure your editor](https://tiptap.dev/docs/editor/getting-started/configure.md)
- [Add styles to your editor](https://tiptap.dev/docs/editor/getting-started/style-editor.md)
- [Learn more about Tiptap's concepts](https://tiptap.dev/docs/editor/core-concepts/introduction.md)
- [Learn how to persist the editor state](https://tiptap.dev/docs/editor/core-concepts/persistence.md)
- [Start building your own extensions](https://tiptap.dev/docs/editor/extensions/custom-extensions.md)