Next Blog with Sanity

Blog Website Based on React Nextjs Graphql Sanity Taiwindcss

• Started with Next Tailwind Starter
• Initialised Sanity at nextblogsanity directory with a Blog Schema Template
• queries with no sql Gruq(Like Graphql)
• getServerSideProps for getting Dynamic Data in Static Pages (Also refer react Suspense)
• 2051 is used for sanity

Running Sanity Server

sanity start

• Sanity Schemas at /nextblogsanity/schemas

Query Example

*[_type == 'post']{
  _id
} 

Getting Related Data from Foreign Table

*[_type == 'post']{
  _id,
  slug,
  author ->{
   name,
   image
  }
} 

Insall next-sanity for helpers

• Create sanity.js at root dir for config and helpers
• For project id and dataset env variables refer sanity.json inside nextblogsanity
• create .env.local for env variables
• NEXT_PUBLIC prepend in env var makes it available for API Routes & clientside otherwise its only available for api
• Running Next Server npm run dev
• pushed on githb
• Created [slug.tsx] for /post/post-item route
• Used getStaticPaths and Props
• Installed Tailwind Typography for blog page
• Installed Portable text for parsing body from json
• Installed react-hook-form
• Create API Routes from /api/apiname.ts
• install sanity-client for the same
• Created API Token for editor and added to env file
• created custom schema for comment
• Add comment to schema.js
• sanity deploy for deploying backend sanity deploy

Deployed Admin

https://mediumblogadmin.sanity.studio/

Deployed Vercel

https://tailnext-blog.vercel.app/

____________________________________________________________________________--

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

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).