https://tiptap.dev/docs/editor/getting-started/install/nextjs

1.Next.js 프로젝트에 Tiptap을  설정 방법

요구 사항

• Node.js가 설치된 환경

• React 사용 경험

프로젝트 생성 (선택 사항)

이미 Next.js 프로젝트를 가지고 있다면 이 단계는 건너뛰어도 됩니다. 여기서는 예시를 위해 새로운 프로젝트를 생성하겠습니다.

아래 명령어로 my-tiptap-project라는 프로젝트를 생성합니다.

# 프로젝트 생성
npx create-next-app my-tiptap-project

# 디렉토리 이동
cd my-tiptap-project

의존성 설치

Next.js 보일러플레이트가 준비되었으니, 이제 Tiptap을 설치합니다. 필요한 패키지는 세 가지입니다.

• @tiptap/react

• @tiptap/pm

• @tiptap/starter-kit (기본 확장 기능 포함)

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

위 단계를 마쳤다면 npm run dev로 개발 서버를 실행하고, 브라우저에서 http://localhost:3000/에 접속할 수 있습니다. (기존 프로젝트라면 경로가 다를 수 있음)

Tiptap 통합하기

Tiptap을 사용하려면 새 컴포넌트를 추가해야 합니다.

1. components/ 디렉토리를 생성합니다.

2. 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 Router를 쓴다면 pages/index.js)의 내용을 수정해 Tiptap 컴포넌트를 불러옵니다.

import Tiptap from '../components/Tiptap'

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

브라우저를 새로고침하면 Tiptap 에디터가 정상적으로 보이는 것을 확인할 수 있습니다. ????

다음 단계

• 에디터 설정 커스터마이징하기

• 스타일 추가하기

• Tiptap 개념 더 알아보기

• 에디터 상태를 저장하는 방법 학습하기

• 나만의 확장 기능 만들어보기

2. 에디터 설정 커스터마이징하기

3. 스타일 추가하기
 

4. Tiptap 개념 더 알아보기

5. 에디터 상태를 저장하는 방법 학습하기

6. 나만의 확장 기능 만들어보기