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

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

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

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

https://mediumblogadmin.sanity.studio/

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

____________________________________________________________________________--

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

Preview the example live on StackBlitz:

Deploy the example using Vercel:

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