Medium-Clone with Next.JS, Typescript, Tailwindcss, and Sanity!!

  • By argikurnia
  • Last update: Dec 31, 2022
  • Comments: 1

Medium Clone

📌 Overview

/pages

✔️ pages/index.tsx = Homepage and list all Blogs
✔️ pages/post/[slug].tsx = Details Blog

/pages/api

✔️ pages/api/createComment.ts = API createComment that store data to sanity studio

🛠 Get started

Getting the API Keys

Create an .env.local and follow the name .env.example and get the API Keys based on the steps below

Sanity API KEYS


1. Create a Sanity account
2. Create new project
3. npm install -g @sanity/cli && sanity init
4. After you create new project, Go to your project, you will see the PROJECT ID at the top

5. After that you need to go to -> API -> TOKENS -> ADD API TOKEN -> ENTER YOUR PROJECT NAME -> CHOOSE THE ACCESS PRIVILEGES FOR THE TOKEN(PERMISSIONS) -> CHANGE PERMISSIONS TO EDITOR

  1. Put it into the environment variables according to .env.example and you're all set!

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

Tech Stack

  • Javascript
  • ReactJS
  • NextJS
  • Typescript
  • TailwindCSS
  • Sanity

Starting the Project

Install the dependencies with npm i or yarn
Start the project by npm run dev or yarn dev

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).

Github

https://github.com/argikurnia1/medium-clone

Comments(1)

  • 1

    this error comes when I tried your clone and edited it

    Server Error Error: You must either:

    • Pass projectId and dataset to the block renderer
    • Materialize images to include the url field.

    For more information, see https://docs.sanity.io/help/block-content-image-materializing This error happened while generating the page. Any console logs will be displayed in the terminal window.