How to Build a Notion Clone with Strapi v4 and Next.js (Part 1 of 2)

Prerequisites

  1. Basic knowledge of JavaScript
  2. Basic knowledge of ReactJS
  3. Basic knowledge of Next.js
  4. Basic understanding of Strapi — get started here
  5. Node.js version 14 downloaded and installed

The Initial Planning

  • Pages
  • Content blocks

Building the Backend

Step 1: Create a Strapi Project

npx create-strapi-app@latest notion-clone-strapi-backend --quickstart
#or using yarn
yarn create strapi-app notion-clone-strapi-backend --quickstart

Step 2: Create Your Administrator Account

Step 3: Create Your Collections

  • Content Block
  • Page
  1. On the left-hand side, head over to Content-Type Builder and click Create new collection type.
  2. Add Content Block for the display name and click Continue.
  3. Under select a field for your collection type, choose Text.
  4. In the Add new text field modal, enter “content” for the Name and choose Long text.
  5. Click Finish and then Save.
  1. Click on Create new collection type.
  2. Fill out “Page” for the display name and click continue.
  3. Select Text and name the field “title”.
  4. Add a second field, and this time, select Relation.
  1. Select the third option (“Page belongs to many Content Blocks”).
  2. Click Finish.

Step 4: Turn on Permissions

  1. Head to General > Settings.
  2. Under Users & Permissions Plugin, select Roles.
  3. Click on Public.
  4. Click on the Select all for pages and content-block.
  5. Click Save.

Implementing GraphQL

npm run strapi install graphql
# or
yarn strapi install graphql

Implementing CRUD

query getAllPages {
pages {
data {
id
attributes {
title
}
}
}
}
query getAllPages {
pages {
data {
id
attributes {
title
content_blocks {
data {
id
attributes {
content
}
}
}
}
}
}
}

Here are some more queries and mutations for you to try out:

mutation createPage {
createPage(data: { title: "New Page" }) {
data {
id
attributes {
title
}
}
}
}
query getOnePage {
page(id: 2) {
data {
id
attributes {
title
}
}
}
}
mutation updatePage {
updatePage (id: 3, data: { title: "Third Page"}) {
data {
id
attributes {
title
}
}
}
}
mutation deletePage {
deletePage (id: 1) {
data {
id
attributes {
title
}
}
}
}

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store