Medium Clone

• Checkout medium blog on vercel - https://medium-clone-k1feq3m45-jromil51-gmailcom.vercel.app
• Build Medium blog clone with NEXT.JS, ReactJs, TypeScript, Sanity CMS, GROQ (similar to graphQL), React, Tailwind CSS, ISR((Incremental Static Regeneration)) , next-sanity, react-portable-text
• typings.d.ts file means definition typescript file, It is about how we store type definitions
• NextJs SSR -> Nextjs server prebuilds the page, /page per request
• if you visit a page which does not exist with /post/anyname then it will give 404 error
• we have used [slug].js for linking posts to page according to slugs which we get from sanity schema
• used revalidate from sanity so after 60 sec, it'll update the old cache, will delete old cache and had new one, so page can get changes automatically
  • ISR (Incremental Static Regeneration) → Next.js allows you to create or update static pages after you've built your site. Incremental Static Regeneration (ISR) enables you to use static-generation → https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
  • using revalidate
• react-portable-text - An easy way to render Portable Text block content in React applications. (you cannot edit img tag in specializers)
• Used react-hook-form for form validations → https://react-hook-form.com
• comment will get showed only after approval of moderator

Project Video

Usefull commands

• npm init
• yarn run dev (runs project)
• install sanity globally and make sanity account (npm install -g @sanity/cli)
• use (sanity init) for initializing sanity
• Starting sanity
  • cd mediumsanity
  • sanity start (starts sanity on port)
• use GROQ query language to get data from sanity in sanity studio → vision

*[_type == "post"]{
  _id,
  title,
  author-> {
  name,
  image
	// you can also use ... spread operator to get all things
},
description,
mainImage,
slug,
}

.env.local

• Make .env.local in root folder with below details, found details from sanity.json file as projectId, dataset
• adding NEXT_PUBLIC allows access to client as well as API side

NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_PROJECT_ID=
SANITY_API_TOKEN=

Tips

• Interfaces are better type, because in interface you can do extending, means you can inherit types from other types
• if you are using .then then you don’t need to use await async
• API_TOKEN_KEY allows us to read and write to database in sanity

Usefull Links

• next-sanity → https://www.npmjs.com/package/next-sanity
• ISR (Incremental Static Regeneration) → https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration
• react-portable-text → https://www.npmjs.com/package/react-portable-text