Getting Started with Next.js & Sanity CMS

1. Introduction

Next.js is a powerful React framework for building fast and scalable web apps.
Sanity CMS provides a headless content platform that integrates seamlessly with Next.js.

2. Features of Next.js

• 🚀 Server-Side Rendering (SSR)
• ⚡ Static Site Generation (SSG)
• 🔄 Incremental Static Regeneration (ISR)
• 📦 API Routes
• 🎨 Image Optimization

3. Steps to Create a Project

Install Next.js

npx create-next-app@latest my-project
cd my-project
npm run dev

4. Example Code Snippet

Next.js Blog Card Component (TSX):

import Image from "next/image";

interface BlogCardProps {
title: string;
description: string;
imageUrl: string;
}

export default function BlogCard({ title, description, imageUrl }: BlogCardProps) {
return (
<div className="border rounded-lg shadow-md overflow-hidden">
<Image src={imageUrl} alt={title} width={400} height={250} className="object-cover" />
<div className="p-4">
<h2 className="text-lg font-bold">{title}</h2>
<p className="text-sm text-gray-600">{description}</p>
</div>
</div>
);
}