From 2be975ff1f3f93b9eaf2e50d7775ac6154440f28 Mon Sep 17 00:00:00 2001
From: Aron Buzinkay <25285064+alb@users.noreply.github.com>
Date: Thu, 7 Oct 2021 13:15:45 +0200
Subject: [PATCH] docs: Added Next.js installation guide & express setup for
 React (#1984)

* Added Next.js installation guide & express setup for React

* Update react.md

Co-authored-by: Hans Pagel <hanspagel@users.noreply.github.com>
---
 docs/installation.md        |  1 +
 docs/installation/nextjs.md | 75 +++++++++++++++++++++++++++++++++++++
 docs/installation/react.md  |  8 ++++
 3 files changed, 84 insertions(+)
 create mode 100644 docs/installation/nextjs.md

diff --git a/docs/installation.md b/docs/installation.md
index ee4b6076..74245f3c 100644
--- a/docs/installation.md
+++ b/docs/installation.md
@@ -10,6 +10,7 @@ tiptap is framework-agnostic and even works with Vanilla JavaScript (if that’s
 ## Integration guides
 * [CDN](/installation/cdn)
 * [React](/installation/react)
+* [Next.js](/installation/nextjs)
 * [Vue 3](/installation/vue3)
 * [Vue 2](/installation/vue2)
 * [Nuxt.js](/installation/nuxt)
diff --git a/docs/installation/nextjs.md b/docs/installation/nextjs.md
new file mode 100644
index 00000000..f752b1b6
--- /dev/null
+++ b/docs/installation/nextjs.md
@@ -0,0 +1,75 @@
+---
+title: Next.js WYSIWYG
+tableOfContents: true
+---
+
+# Next.js
+
+## Introduction
+The following guide describes how to integrate tiptap with your [Next.js](https://nextjs.org/) project.
+
+## Requirements
+* [Node](https://nodejs.org/en/download/) installed on your machine
+* Experience with [React](https://reactjs.org/)
+
+## 1. 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 `tiptap-example`. The following command sets up everything we need to get started.
+```bash
+# create a project
+npx create-next-app tiptap-example
+
+# change directory
+cd tiptap-example
+```
+
+## 2. Install the 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 two packages: `@tiptap/react` and `@tipta/starter-kit` which includes all the extensions you need to get started quickly.
+
+```bash
+# install with npm
+npm install @tiptap/react @tiptap/starter-kit
+
+# install with Yarn
+yarn add @tiptap/react @tiptap/starter-kit
+```
+
+If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn 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.
+
+## 3. Create a new component
+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.js`.
+
+```jsx
+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;
+```
+
+## 4. 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.
+
+```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! :)
\ No newline at end of file
diff --git a/docs/installation/react.md b/docs/installation/react.md
index a13eb896..42f1f661 100644
--- a/docs/installation/react.md
+++ b/docs/installation/react.md
@@ -12,6 +12,14 @@ The following guide describes how to integrate tiptap with your [React](https://
 * [Node](https://nodejs.org/en/download/) installed on your machine
 * Experience with [React](https://reactjs.org/docs/getting-started.html)
 
+## Using a template
+If you just want to get up and running with tiptap you can use the [tiptap Create React App template](https://github.com/alb/cra-template-tiptap) by [@alb](https://github.com/alb) to automatically create a new project with all the steps below alreay completed.
+
+```bash
+# create a project based on the tiptap template
+npx create-react-app tiptap-example --template tiptap
+```
+
 ## 1. Create a project (optional)
 If you already have an existing React project, that’s fine too. Just skip this step and proceed with the next step.