# Guides Migration Guide: Vite/React to Next.js This guide explains how to migrate the guides-related functionality from this Vite/React project to a Next.js 13+ project with App Router. ## Next.js Project Structure ``` .next/ # Build output (auto-generated, don't touch) ├── build/ ├── cache/ ├── server/ ├── static/ └── types/ .vscode/ # VS Code workspace settings .yarn/ # Yarn package manager files app/ # Next.js App Router (main application code) components/ # Shared React components hooks/ # Custom React hooks lib/ # Utility functions and types ├── helpers/ # Helper/utility functions └── types/ # TypeScript type definitions node_modules/ # Dependencies (auto-generated) prisma/ # Prisma ORM schema and migrations public/ # Static assets (images, fonts, etc.) services/ # API services and business logic ``` --- ## Migration Steps ### 1. Install Next.js Project ```bash npx create-next-app@latest guides-nextjs --typescript --tailwind --app --src-dir false cd guides-nextjs ``` ### 2. Install Required Dependencies ```bash npm install prisma @prisma/client npm install @radix-ui/react-slot @radix-ui/react-separator npm install class-variance-authority clsx tailwind-merge npm install lucide-react npm install date-fns ``` ### 3. Setup Prisma Schema **File: `prisma/schema.prisma`** ```prisma generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" // or "mysql", "sqlite" url = env("DATABASE_URL") } model Guide { id String @id @default(cuid()) title String description String content String @db.Text category String author String readTime Int publishedAt DateTime @default(now()) imageUrl String? slug String @unique createdAt DateTime @default(now()) updatedAt DateTime @updatedAt @@index([category]) @@index([slug]) @@index([publishedAt]) } ``` Initialize Prisma: ```bash npx prisma init npx prisma generate npx prisma db push ``` --- ## File Migration Mapping ### Current Files → Next.js Structure | Current File | Next.js Location | Notes | |-------------|------------------|-------| | `src/pages/Guides.tsx` | `app/guides/page.tsx` | Convert to Server Component | | `src/pages/GuideDetail.tsx` | `app/guide/[slug]/page.tsx` | Dynamic route with params | | `src/components/GuideSection.tsx` | `components/GuideSection.tsx` | Keep as Client Component | | `src/components/ui/*` | `components/ui/*` | Copy all shadcn components | | - | `lib/prisma.ts` | New: Prisma client singleton | | - | `services/guides.ts` | New: Guide data fetching | | - | `lib/types/guide.ts` | New: Guide TypeScript types | --- ## Code Transformations ### 1. Prisma Client Setup **File: `lib/prisma.ts`** ```typescript import { PrismaClient } from '@prisma/client'; const globalForPrisma = globalThis as unknown as { prisma: PrismaClient | undefined; }; export const prisma = globalForPrisma.prisma ?? new PrismaClient(); if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma; ``` ### 2. Type Definitions **File: `lib/types/guide.ts`** ```typescript export interface Guide { id: string; title: string; description: string; content: string; category: string; author: string; readTime: number; publishedAt: Date; imageUrl: string | null; slug: string; } export type GuideCategory = "Buying" | "Safety" | "Finance" | "Investment" | "Maintenance" | "Legal"; ``` ### 3. Guide Services **File: `services/guides.ts`** ```typescript import { prisma } from '@/lib/prisma'; import { Guide } from '@/lib/types/guide'; export async function getAllGuides(): Promise { return await prisma.guide.findMany({ orderBy: { publishedAt: 'desc' }, }); } export async function getGuideBySlug(slug: string): Promise { return await prisma.guide.findUnique({ where: { slug }, }); } export async function getGuidesByCategory(category: string): Promise { return await prisma.guide.findMany({ where: { category }, orderBy: { publishedAt: 'desc' }, }); } export async function searchGuides(query: string): Promise { return await prisma.guide.findMany({ where: { OR: [ { title: { contains: query, mode: 'insensitive' } }, { description: { contains: query, mode: 'insensitive' } }, ], }, orderBy: { publishedAt: 'desc' }, }); } ``` ### 4. Guides Listing Page (Server Component) **File: `app/guides/page.tsx`** ```typescript import { Metadata } from 'next'; import { getAllGuides } from '@/services/guides'; import GuidesClient from './GuidesClient'; export const metadata: Metadata = { title: 'Property Guides & Resources | Expert Real Estate Advice', description: 'Expert advice, tips, and insights to help you navigate the Somali real estate market', openGraph: { title: 'Property Guides & Resources', description: 'Expert advice, tips, and insights to help you navigate the Somali real estate market', }, }; export default async function GuidesPage() { const guides = await getAllGuides(); return ; } ``` ### 5. Guides Client Component **File: `app/guides/GuidesClient.tsx`** ```typescript 'use client'; import { useState } from "react"; import Link from "next/link"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; import { BookOpen, Clock, Search, ArrowRight } from "lucide-react"; import { Guide } from "@/lib/types/guide"; interface GuidesClientProps { initialGuides: Guide[]; } export default function GuidesClient({ initialGuides }: GuidesClientProps) { const [searchQuery, setSearchQuery] = useState(""); const [selectedCategory, setSelectedCategory] = useState("all"); const categories = ["all", "Buying", "Safety", "Finance", "Investment", "Maintenance", "Legal"]; const filteredGuides = initialGuides.filter(guide => { const matchesSearch = guide.title.toLowerCase().includes(searchQuery.toLowerCase()) || guide.description.toLowerCase().includes(searchQuery.toLowerCase()); const matchesCategory = selectedCategory === "all" || guide.category === selectedCategory; return matchesSearch && matchesCategory; }); return (

{/* Hero Section */}

Property Guides & Resources

Expert advice, tips, and insights to help you navigate the Somali real estate market

{/* Search Bar */}

setSearchQuery(e.target.value)} />

{/* Category Filters */}

{categories.map((category) => ( ))}

{/* Guides Grid */}

{filteredGuides.map((guide) => (

{guide.category}

{guide.readTime} min read

{guide.title} {guide.description}

By {guide.author} {new Date(guide.publishedAt).toLocaleDateString()}

))}

{filteredGuides.length === 0 && (

No guides found

Try adjusting your search or filter criteria

)}

); } ``` ### 6. Guide Detail Page (Server Component) **File: `app/guide/[slug]/page.tsx`** ```typescript import { Metadata } from 'next'; import { notFound } from 'next/navigation'; import { getGuideBySlug } from '@/services/guides'; import GuideDetailClient from './GuideDetailClient'; interface GuideDetailPageProps { params: { slug: string; }; } export async function generateMetadata({ params }: GuideDetailPageProps): Promise { const guide = await getGuideBySlug(params.slug); if (!guide) { return { title: 'Guide Not Found', }; } return { title: `${guide.title} | Property Guides`, description: guide.description, openGraph: { title: guide.title, description: guide.description, images: guide.imageUrl ? [guide.imageUrl] : [], }, }; } export default async function GuideDetailPage({ params }: GuideDetailPageProps) { const guide = await getGuideBySlug(params.slug); if (!guide) { notFound(); } return ; } ``` ### 7. Guide Detail Client Component **File: `app/guide/[slug]/GuideDetailClient.tsx`** ```typescript 'use client'; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { ArrowLeft, Clock, Calendar, User } from "lucide-react"; import { Guide } from "@/lib/types/guide"; interface GuideDetailClientProps { guide: Guide; } export default function GuideDetailClient({ guide }: GuideDetailClientProps) { return (

{/* Hero Image */}

{/* Metadata */}

{guide.category}

{guide.readTime} min read

{guide.author}

{new Date(guide.publishedAt).toLocaleDateString()}

{/* Title */}

{guide.title}

{/* Description */}

{guide.description}

{/* Content */}

{guide.content}

); } ``` ### 8. Guide Section Component (for Homepage) **File: `components/GuideSection.tsx`** ```typescript 'use client'; import Link from "next/link"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { ArrowRight, Clock } from "lucide-react"; import { Guide } from "@/lib/types/guide"; interface GuideSectionProps { guides: Guide[]; } export default function GuideSection({ guides }: GuideSectionProps) { return (

Property Guides & Resources

Expert advice and insights to help you make informed decisions

{guides.slice(0, 3).map((guide) => ( {guide.category} {guide.title} {guide.description}

{guide.readTime} min read

))}

); } ``` --- ## Key Differences & Next.js Concepts ### 1. **App Router vs React Router** - **Old**: `react-router-dom` with `` components - **New**: File-based routing in `app/` directory - `app/guides/page.tsx` → `/guides` - `app/guide/[slug]/page.tsx` → `/guide/:slug` ### 2. **Server Components (Default)** - Pages are Server Components by default - Fetch data directly in components (no `useEffect` needed) - Add `'use client'` directive for interactive components ### 3. **Data Fetching** - **Old**: `useState`, `useEffect`, client-side fetching - **New**: `async` Server Components with direct database queries ### 4. **Navigation** - **Old**: `useNavigate()` from `react-router-dom` - **New**: `` from `next/link` or `useRouter()` from `next/navigation` ### 5. **Metadata & SEO** - **Old**: Manual `` or meta tags - **New**: Export `metadata` object or `generateMetadata` function ### 6. **Static & Dynamic Rendering** - Pages with dynamic data use `params` and can be statically generated - Use `generateStaticParams` for static generation at build time --- ## Environment Variables **File: `.env`** ```env DATABASE_URL="postgresql://user:password@localhost:5432/mydb" ``` --- ## Additional Configuration ### Next.js Config **File: `next.config.js`** ```javascript /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: ['localhost'], // Add your image domains }, } module.exports = nextConfig ``` ### Tailwind Config Copy your existing `tailwind.config.ts` and `index.css` to maintain design consistency. --- ## Testing the Migration 1. Seed initial guide data: ```typescript // prisma/seed.ts import { PrismaClient } from '@prisma/client'; const prisma = new PrismaClient(); async function main() { await prisma.guide.createMany({ data: [ { title: "First-Time Home Buyer's Complete Guide in Somalia", description: "Everything you need to know about purchasing your first property", content: "Full guide content here...", category: "Buying", author: "Ahmed Hassan", readTime: 8, slug: "first-time-home-buyers-guide-somalia", }, // Add more guides... ], }); } main() .catch((e) => console.error(e)) .finally(async () => await prisma.$disconnect()); ``` Run: `npx prisma db seed` 2. Start development server: ```bash npm run dev ``` 3. Test routes: - `/guides` - Listing page - `/guide/first-time-home-buyers-guide-somalia` - Detail page --- ## Summary This migration transforms your client-side React app into a full-stack Next.js application with: - ✅ Server-side rendering for better SEO - ✅ Database integration with Prisma - ✅ Type-safe data fetching - ✅ Optimized performance with Server Components - ✅ Modern Next.js 13+ App Router patterns All guides functionality is preserved while gaining backend capabilities and improved performance.

Property Guides & Resources

BUYING A HOUSE IN SOMALIA AS AN AFRICAN IMITATOR

What Lands to buy in somalia

La title el grande

abc