Full Stack Travel Blog App - Next.JS, React, Sanity CMS, CROQ Tailwind CSS, Typescript, ISR

Building full stack text-driven travel blog with server-rendered framework Next.JS, and React, Sanity CMS, CROQ Tailwind CSS, Typescript, ISR. Using Sanity Content Management System (CMS) to manage structured data and fetch CMS data into a Next.js app using CROQ and rendering contents using Next.JS data fetching techniques. Writing robust code using TypeScript & catch errors early. Building an API, communicating an API,

Setting up Tailwind CSS in a Next.js project Execute the following command to run the Next.JS App.

> npm run dev

NOTE: Use this command to install the dependencies with the same version

npm install --legacy-peer-deps

Create Sanity project & Start Sanity Studio Note: Make sure that you have logged into your Sanity.io account Note: Use the following command to create Sanity project and choose 'Blog Schema' template.

npm create sanity@latest

Install next-sanity - Toolkit for Next.js.

Install "next-sanity" & "@sanity/image-url" in your Next.JS project

> npm install next-sanity

> npm install @sanity/image-url

Note:

Create "sanity.js" file & '.env.local' file in the root of Next.JS project

Create 'typings.d.ts' (Typescript Definition File) in the root of Next.JS project

NOTE: Generate API Token in sanity.io by choosing "Editor" option and add the token in the .env file.

Install React Portable Text > npm install react-portable-text

IMPLEMENTING COMMENTS SECTION:

React Hook Form - Performant, flexible and extensible forms with easy-to-use validation > npm install react-hook-form

Handle Form Submission inside your post/[slug].tsx file. Create Next.js API route (createComment.ts) inside 'api' folder.

Install Sanity Client in your Next.JS app.

> npm install @sanity/client

Then, import and use it in createComment.ts

import sanityClient from "@sanity/client";

Create a new Schema inside "comment.js" and import it inside index.js of "schemas" folder of your sanity backend.

Finally, enhance your "typings.d.ts" file with "Comment" type

Deployment to Vercel: > sanity deploy

ERROR: sanity deploy is not recognized as an internal or external command

SOLUTION: npm install -g @sanity/cli

Note: Once the Sanity Studio has been deployed, you will get the Sanity Studio Host.

Add the "/sanity-backend" in the 'gitignore' file of Next.JS project to ignore the entire Sanity Studio.

Then, push your Next.JS project into Git.

Create an account with Vercel, Connect Git Repo and Login to your Vercel Account and do the following

- Choose new project and select your git repository of your Next.JS project.

And configure your project using the following env variables.

NEXT_PUBLIC_SANITY_DATASET=production

NEXT_PUBLIC_SANITY_PROJECT_ID=

SANITY_API_TOKEN=

Notes & References:

NOTE: Configuring images in Next.JS: next/image Un-configured Host

Use 'global.css' for your common/custom styling

Next.JS - The React Framework for Production

Basic Features of Next.JS

Data Fetching Overview

Tailwind CSS

Sanity

How Queries Work – GROQ

Plugins:

ES7 React/Redux/GraphQL/React-Native snippets

Tailwind CSS IntelliSense

Downloads & Libraries:

React Icons

>npm i react-icons