Project Setup Documentation

Initial Setup

1. Package Manager Configuration

   "packageManager": "npm@11.2.0",
   "overrides": {
     "react": "$react",
     "react-dom": "$react-dom"
   }

2. ShadCN UI Installation

   npx shadcn@latest

Sanity CMS Setup

1. Create Sanity Project

   npm create sanity@latest -- --project flfshs5n --dataset production --template clean --typescript --output-path studio-jsm-yc_directory
   cd studio-jsm-yc_directory

2. Next.js Integration

   npm i next-sanity@canary

3. Important Note

   • Remove --turbo from package.json for local development at http://localhost:3000/studio

4. Environment Variables

   NEXT_PUBLIC_SANITY_PROJECT_ID=flfshs5n
   NEXT_PUBLIC_SANITY_DATASET=production
   

Markdown Support

npm install sanity-plugin-markdown
npm i markdown-it
npm install --save-dev @types/markdown-it

Type Generation System

1. Extract Schema

   npx sanity@latest schema extract --path=./sanity/extract.json

2. Typegen Configuration (sanity-typegen.json)

   {
     "path": "'../../my-cool-app/src/**/*.{ts,tsx,js,jsx}'",
     "schema": "../../my-cool-app/sanity-schemas.json",
     "generates": "../../my-cool-app/sanity.types.ts"
   }

3. Generate Types

   npx sanity@latest typegen generate

Scripts Configuration (package.json)

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "predev": "npm run typegen",
  "prebuild": "npm run typegen",
  "typegen": "sanity schema extract --path=./sanity/extract.json && sanity typegen generate"
}

Additional Dependencies

1. Server-Side Only

   npm i server-only

2. UI Components

   npx shadcn@latest add skeleton
   npx shadcn@latest add input textarea
   npx shadcn@latest add sonner

3. React Fix

   npm install react-is

4. Markdown Editor

   npm i @uiw/react-md-editor

5. Slug Generation

   npm i slugify

Sentry Integration

npx @sentry/wizard@latest -i nextjs --saas --org vnr-3l --project app-name

Key Technologies

• GRPQ Query Language: Used for Sanity data querying
• Type Generation: Automated type safety for Sanity schemas
• Markdown Support: Both in CMS and frontend rendering

Development Workflow

1. Run type generation before development/build:

   npm run typegen

2. Start development server:

   npm run dev

---

This documentation organizes all your setup commands and configurations in a logical flow, making it easier to understand and maintain the project setup.