{"id":29790189,"url":"https://github.com/chipsxp/nextjs-sanity","last_synced_at":"2025-07-27T23:05:59.515Z","repository":{"id":305242666,"uuid":"1021765286","full_name":"chipsxp/nextjs-sanity","owner":"chipsxp","description":"Next.js + Sanity Studio Blog Project  A modern, full-stack blog application built with Next.js 15 and Sanity Studio, featuring embedded content management, responsive design, and optimized performance.","archived":false,"fork":false,"pushed_at":"2025-07-18T23:10:31.000Z","size":263,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-19T03:54:32.754Z","etag":null,"topics":["cms","embedded","nextjs15","sanity-studio","sanitycms"],"latest_commit_sha":null,"homepage":"https://bigeasysavings.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chipsxp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-17T23:17:09.000Z","updated_at":"2025-07-18T23:13:49.000Z","dependencies_parsed_at":"2025-07-19T04:09:51.834Z","dependency_job_id":null,"html_url":"https://github.com/chipsxp/nextjs-sanity","commit_stats":null,"previous_names":["chipsxp/nextjs-sanity"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/chipsxp/nextjs-sanity","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chipsxp%2Fnextjs-sanity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chipsxp%2Fnextjs-sanity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chipsxp%2Fnextjs-sanity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chipsxp%2Fnextjs-sanity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chipsxp","download_url":"https://codeload.github.com/chipsxp/nextjs-sanity/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chipsxp%2Fnextjs-sanity/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267437083,"owners_count":24086919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","embedded","nextjs15","sanity-studio","sanitycms"],"created_at":"2025-07-27T23:05:43.953Z","updated_at":"2025-07-27T23:05:59.507Z","avatar_url":"https://github.com/chipsxp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js + Sanity Studio Blog Project\n\nA modern, full-stack blog application built with Next.js 15 and Sanity Studio, featuring embedded content management, responsive design, and optimized performance.\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 18+ \n- Git or GitHub Desktop\n- A Sanity.io account (free)\n\n### Clone \u0026 Install\n\n#### Option 1: Using Git CLI\n```bash\n# Clone the repository\ngit clone https://github.com/chipsxp/nextjs-sanity.git\n\n# Navigate to project directory\ncd nextjs-sanity\n\n# Install dependencies\nnpm install\n```\n\n#### Option 2: Using GitHub Desktop\n1. Open GitHub Desktop\n2. Click **File → Clone Repository**\n3. Select **URL** tab\n4. Enter: `https://github.com/chipsxp/nextjs-sanity.git`\n5. Choose local path and click **Clone**\n6. Open terminal in the cloned folder and run: `npm install`\n\n### Environment Setup\n\nCreate a `.env.local` file in the root directory:\n\n```bash\n# Create environment file\ntouch .env.local\n```\n\nAdd your Sanity configuration:\n\n```env\n# Sanity Configuration\nNEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id_here\nNEXT_PUBLIC_SANITY_DATASET=production\nNEXT_PUBLIC_SANITY_API_VERSION=2025-07-07\n\n# Sanity API Access\nSANITY_API_READ_TOKEN=your_read_token_here\nSANITY_REVALIDATE_SECRET=your_revalidate_secret_here\n```\n\n#### Getting Your Sanity Keys:\n\n1. **Create Sanity Project**:\n   - Go to [sanity.io/manage](https://sanity.io/manage)\n   - Click **Create new project**\n   - Choose **Blog** template or start blank\n\n2. **Find Project ID**:\n   - In your Sanity dashboard, select your project\n   - Project ID is displayed in the URL: `sanity.io/manage/personal/project/YOUR_PROJECT_ID`\n   - Or find it in **Settings → API**\n\n3. **Create Dataset**:\n   - Default dataset is `production`\n   - Create additional datasets in **Settings → Datasets**\n\n4. **Generate API Token** (optional for write access):\n   - Go to **Settings → API → Tokens**\n   - Click **Add API token**\n   - Give it a name and select permissions\n   - Copy the token (starts with `sk...`)\n\n5. **Generate Read Token** (`SANITY_API_READ_TOKEN`):\n   - Go to **Settings → API → Tokens**\n   - Click **Add API token**\n   - Name: \"Read Token\"\n   - Permissions: **Viewer** (read-only access)\n   - Copy the token (starts with `sk...`)\n\n6. **Create Revalidation Secret** (`SANITY_REVALIDATE_SECRET`):\n   - This is a custom secret string for webhook security\n   - Generate a random string (32+ characters recommended)\n   - Can be generated using: `openssl rand -base64 32` or online password generator\n   - Save this securely - it's used for webhook validation\n\n## 🎨 UI Styling Configuration\n\n### TailwindCSS Setup\nThis project uses **TailwindCSS v4.1.11** with custom configuration:\n\n- **Location**: `src/app/globals.css`\n- **Features**: Dark mode support, custom color palette, responsive typography\n- **Plugins**: `@tailwindcss/typography` for blog content styling\n\n### Color System\n```css\n/* Light Mode */\n--color-background: #fef3c7 (warm yellow)\n--color-foreground: #111827 (dark gray)\n--color-primary: #fde68a (soft yellow)\n\n/* Dark Mode */\n--dark-color-background: #312e81 (deep indigo)\n--dark-color-foreground: #e0e7ff (light indigo)\n--dark-color-primary: #818cf8 (soft indigo)\n```\n\n### Typography\n- **Font**: Inter (Google Fonts)\n- **Responsive**: Container queries for dynamic sizing\n- **Blog Content**: Prose styling with `prose-custom` class\n\n### Key CSS Features\n- Automatic dark/light mode switching\n- Custom utility classes (`.text-balance`, `.link-hover`)\n- Responsive container queries\n- Optimized font loading\n\n## 🌐 Development URLs\n\n### Local Development\n- **Frontend**: [http://localhost:3000](http://localhost:3000)\n- **Sanity Studio**: [http://localhost:3000/studio](http://localhost:3000/studio)\n\n### Available Scripts\n```bash\nnpm run dev          # Start development server with Turbopack\nnpm run build        # Build for production\nnpm run start        # Start production server\nnpm run lint         # Run ESLint\nnpm run prebuild     # Generate TypeScript types from Sanity schema\nnpm run extract      # Extract Sanity schema for type generation\n```\n\n## 📋 Past Problems \u0026 Solutions\n\n### 1. Image Optimization Issues\n**Problem**: Logo images not displaying correctly in production\n**Solution**: Use explicit width/height props with Next.js Image component instead of fill prop\n```tsx\n// ✅ Correct approach\n\u003cdiv className='relative w-8 h-8'\u003e\n  \u003cImage\n    src='/logo.png'\n    alt='logo'\n    width={32}\n    height={32}\n    className='object-contain'\n  /\u003e\n\u003c/div\u003e\n```\n\n### 2. Environment Variable Validation\n**Problem**: Missing environment variables causing runtime errors\n**Solution**: Added validation in `src/sanity/env.ts` with helpful error messages\n```typescript\nfunction assertValue\u003cT\u003e(v: T | undefined, errorMessage: string): T {\n  if (v === undefined) {\n    throw new Error(errorMessage)\n  }\n  return v\n}\n```\n\n### 3. TypeScript Integration\n**Problem**: TypeScript errors with Sanity schema\n**Solution**: Implemented automatic type generation with `sanity typegen`\n- Schema extracted to `src/sanity/extract.json`\n- Types generated during build process\n- Full TypeScript support for queries and mutations\n\n### 4. Dark Mode Implementation\n**Problem**: Inconsistent dark mode styling\n**Solution**: CSS custom properties with automatic switching\n- Uses `prefers-color-scheme` media query\n- Custom CSS variables for consistent theming\n- Smooth transitions between modes\n\n### 5. Responsive Typography\n**Problem**: Typography not scaling properly on different screen sizes\n**Solution**: Container queries with Tailwind CSS\n```css\n@container (width \u003e 528px) {\n  h1 {\n    font-size: 4em;\n  }\n}\n```\n\n## 🏗️ Project Structure\n\n```\nnextjs-sanity/\n├── src/\n│   ├── app/\n│   │   ├── (frontend)/          # Public-facing routes\n│   │   │   ├── posts/          # Blog post routes\n│   │   │   └── page.tsx        # Homepage\n│   │   ├── api/                # API routes\n│   │   ├── studio/             # Sanity Studio route\n│   │   ├── globals.css         # Global styles\n│   │   └── layout.tsx          # Root layout\n│   ├── components/             # Reusable React components\n│   └── sanity/                 # Sanity configuration\n│       ├── schemaTypes/        # Content schemas\n│       ├── lib/               # Sanity client utilities\n│       └── types.ts           # Generated TypeScript types\n├── public/                    # Static assets\n└── .env.local                 # Environment variables\n```\n\n## 🎓 Course Context\n\nThis project is part of the **Work-ready Next.js + Sanity Studio Learn Course and Certification** program, covering:\n\n- **Module 1**: Next.js 15 fundamentals with App Router\n- **Module 2**: Sanity Studio integration and content modeling\n- **Module 3**: Advanced querying with GROQ\n- **Module 4**: Real-time preview and visual editing\n- **Module 5**: Deployment and performance optimization\n- **Module 6**: Advanced features and production considerations\n\n### Current Progress\n- ✅ Basic Next.js setup with TypeScript\n- ✅ Sanity Studio embedded and configured\n- ✅ Responsive design with TailwindCSS\n- ✅ Content schemas defined (Posts, Authors, Categories)\n- ✅ TypeScript type generation\n- 🔄 Next: Advanced querying and preview features\n\n## 🔗 Additional Resources\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [Sanity Documentation](https://www.sanity.io/docs)\n- [TailwindCSS Documentation](https://tailwindcss.com/docs)\n- [Course Repository](https://github.com/chipsxp/nextjs-sanity)\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n1. **\"Missing environment variable\" error**\n   - Ensure `.env.local` exists with all required variables\n   - Restart development server after adding variables\n\n2. **Sanity Studio not loading**\n   - Check Sanity project ID and dataset name\n   - Verify CORS settings in Sanity dashboard\n\n3. **Build failures**\n   - Run `npm run prebuild` to generate types\n   - Check for TypeScript errors with `npm run lint`\n\n4. **Images not displaying**\n   - Ensure images are in `/public` directory\n   - Use correct path format: `/image-name.jpg`\n\nFor additional support, check the [Issues](https://github.com/chipsxp/nextjs-sanity/issues) page or create a new issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchipsxp%2Fnextjs-sanity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchipsxp%2Fnextjs-sanity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchipsxp%2Fnextjs-sanity/lists"}