---
title: "Next.js"
description: "在你的 Next.js 项目中安装并配置 Tiptap UI Components。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/install/next"
---

# Next.js

在你的 Next.js 项目中安装并配置 Tiptap UI Components。

运行 `init` 命令以创建一个新的 Next.js 项目或设置现有项目：

```bash
npx @tiptap/cli@latest init
```

在 `Next.js` 项目和 `Monorepo` 之间进行选择。

当提示以下内容时：

```bash
Would you like to add a template or UI components to your project?
```

如果你想包含可复用的 Tiptap UI 组件，请选择 **UI Components**。
或者，选择 **Template** 来搭建一个完整的示例项目。

> **仅添加样式:**
>
> 如果你在设置期间添加了模板或 UI 组件，则可以跳过本节并直接继续
> 到 **Add Styles**。

> **新项目仍然显示默认的 Next.js 页面:**
>
> `init` 会搭建一个标准的 Next.js 应用，并将你选择的组件作为源代码复制到你的
> `components/` 文件夹中——但它**不会**修改 `app/page.tsx`。在你自己在那里渲染一个
> Tiptap 组件之前，`npm run dev` 显示的仍然是 Next.js 默认的起始页面。这是
> 预期行为，不是安装出错。

## 渲染编辑器

打开 `app/page.tsx` 并渲染你安装的模板或组件。例如，如果你在 `init` 期间添加了 **Simple Editor** 模板：

```tsx
import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

export default function Page() {
  return <SimpleEditor />
}
```

启动开发服务器并打开页面以查看你的编辑器：

```bash
npm run dev
```

## 添加 Tiptap 组件

使用 CLI 安装 Tiptap UI 组件。例如，要添加 `HeadingButton` 组件：

```bash
npx @tiptap/cli@latest add heading-button
```

上面的命令会安装 `HeadingButton` 组件及其依赖项。然后你就可以在你的 **Tiptap** 项目中导入并使用它：

```tsx
import { HeadingButton } from '@/components/ui/heading-button'

export default function App() {
  // Tiptap ...

  return (
    <>
      <HeadingButton level={1}>标题 1</HeadingButton>
      <HeadingButton level={2}>标题 2</HeadingButton>
      <HeadingButton level={3}>标题 3</HeadingButton>
    </>
  )
}
```

## 添加样式

> **样式会自动添加:**
>
> 当你安装第一个 Tiptap UI 组件时，CLI 会自动将所需的
> .scss 导入添加到你的主样式表中。在大多数情况下，**无需手动设置**。

在继续之前，请确保你的项目包含 CSS reset。
如果你正在使用 Tailwind CSS，你已经有了。

#### 样式的导入位置

CLI 会自动将样式导入注入到你的全局样式表中，例如：

- `app/globals.css`
- `src/app/globals.css`

如果你自定义了入口文件，请确保其中包含以下内容：

**文件：** `app/globals.css` 或 `src/app/globals.css`（取决于你的项目）

```css
@import '<path-to-styles>/_variables.scss';
@import '<path-to-styles>/_keyframe-animations.scss';
```

在 [样式设置指南](https://tiptap.zhcndoc.com/ui-components/getting-started/style.md) 中了解更多有关配置样式的信息。