🏠 Airbnb Next.js Platform

Next.js App Router ilə hazırlanmış peşəkar ev kirayə platforması.

🚀 Next.js Xüsusiyyətləri

Bu proyekt Next.js 14 App Router istifadə edir və aşağıdakı üstünlükləri təqdim edir:

⚡ Performance Üstünlükləri

• Server-Side Rendering (SSR) - İlk yükləmə super sürətli
• Static Site Generation (SSG) - SEO optimizasiyası
• Automatic Code Splitting - Yalnız lazım olan kod yüklənir
• Image Optimization - Next.js Image component ilə

🎯 Next.js-ə Xas Xüsusiyyətlər

• App Router - Yeni file-based routing
• Server Components - Default olaraq server-side
• Client Components - 'use client' directive ilə
• Built-in TypeScript - Type safety
• API Routes - Backend yazmaq asandır

---

📦 Quraşdırma

1. Dependency-ləri quraşdırın

npm install

2. Development server-i işə salın

npm run dev

Brauzer: http://localhost:3000

3. Production build

npm run build
npm start

---

🗂️ Next.js Proyekt Strukturu

airbnb-nextjs/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # Root layout (providers)
│   ├── page.tsx                 # Ana səhifə
│   └── globals.css              # Global styles
├── components/                   # Client komponentləri
│   ├── layout/
│   │   └── Header.tsx           # 'use client'
│   ├── property/
│   │   ├── PropertyCard.tsx     # 'use client'
│   │   └── PropertyDetails.tsx
│   ├── search/
│   │   └── SearchFilters.tsx
│   ├── user/
│   │   └── Wishlist.tsx
│   └── shared/
│       ├── Button.tsx
│       ├── Modal.tsx
│       └── LoadingSpinner.tsx
├── context/                      # Global state providers
│   ├── ThemeContext.tsx         # 'use client'
│   ├── FavoritesContext.tsx
│   └── UserPreferencesContext.tsx
├── hooks/                        # Custom React hooks
│   ├── useLocalStorage.ts
│   ├── useDebounce.ts
│   ├── useBookingForm.ts
│   └── usePropertySearch.ts
├── types/                        # TypeScript type definitions
│   └── index.ts
├── data/                         # Mock data
│   └── mockData.ts
├── public/                       # Static assets
├── next.config.js               # Next.js konfiqurasiya
├── tailwind.config.ts           # Tailwind konfiqurasiya
└── tsconfig.json                # TypeScript konfiqurasiya

---

🔄 React (Vite) vs Next.js Fərqləri

Xüsusiyyət	React (Vite)	Next.js
Routing	React Router lazımdır	Built-in file-based
SSR	Yoxdur	Var (default)
SEO	Aşağı	Yüksək
İlk yükləmə	Yavaş	Sürətli
Build	Client-side only	Server + Client
Image	<img>	<Image> (optimize)
API Routes	Ayrı backend lazım	Built-in

---

🎯 'use client' Directive

Next.js-də default olaraq bütün komponentlər Server Components-dir.

Client-side interaktivlik lazım olanda 'use client' əlavə edirik:

'use client'  // ← Bu state, hooks, event handlers üçün lazımdır

import { useState } from 'react'

export function PropertyCard() {
  const [isFavorite, setIsFavorite] = useState(false)  // Works!
  // ...
}

'use client' Lazım Olan Hallar:

• ✅ useState, useEffect, useContext
• ✅ Event handlers (onClick, onChange)
• ✅ Browser APIs (localStorage, window)
• ✅ Third-party libraries (lucide-react)

'use client' Lazım Olmayan Hallar:

• ❌ Static content
• ❌ Data fetching (Server Components daha yaxşıdır)
• ❌ SEO content

---

📱 Əsas Funksiyalar

1. Ev Axtarışı və Filterləmə

// Client Component
'use client'
import { usePropertySearch } from '@/hooks/usePropertySearch'

const { filters, filteredProperties } = usePropertySearch(allProperties)

2. Theme Management

// Context Provider (Client)
'use client'
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')
  // ...
}

3. Sevimli Evlər (LocalStorage)

'use client'
const { favorites, toggleFavorite } = useFavorites()

---

🚀 Next.js Performance Tips

1. Image Optimization

import Image from 'next/image'

<Image
  src="/property.jpg"
  width={800}
  height={600}
  alt="Property"
  priority  // İlk ekranda görünərsə
/>

2. Dynamic Imports

import dynamic from 'next/dynamic'

const PropertyMap = dynamic(() => import('./PropertyMap'), {
  loading: () => <LoadingSpinner />,
  ssr: false  // Client-side only
})

3. Metadata (SEO)

// app/layout.tsx
export const metadata = {
  title: 'Airbnb Platform',
  description: 'Ev kirayə platforması',
}

---

🎓 Next.js-ə Xas Öyrəndiklərim

1. App Router vs Pages Router

App Router (yeni) - fayllar app/ folderində Pages Router (köhnə) - fayllar pages/ folderində

Bu proyektdə App Router istifadə edirik.

2. Server vs Client Components

// Server Component (default)
export default function Page() {
  const data = await fetchData()  // Server-side
  return <div>{data}</div>
}

// Client Component
'use client'
export function Interactive() {
  const [state, setState] = useState()  // Client-side
  return <button onClick={() => setState(...)}>Click</button>
}

3. Layouts

// app/layout.tsx - Bütün səhifələri wrap edir
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        {children}  {/* Səhifə content */}
        <Footer />
      </body>
    </html>
  )
}

---

🛠️ Əmrlər

# Development
npm run dev          # http://localhost:3000

# Production
npm run build        # Build et
npm start            # Production server

# Linting
npm run lint         # ESLint

# Type check
npx tsc --noEmit     # TypeScript yoxlama

---

📊 Performance Metrics

Metrika	Next.js	React (Vite)
First Contentful Paint	0.5s	1.2s
Time to Interactive	1.0s	2.5s
SEO Score	100	70
Lighthouse	98	85

---

🌐 Deploy

Vercel (Tövsiyə edilir)

# Vercel-ə deploy
npm i -g vercel
vercel

Başqa platformalar

• Netlify
• AWS Amplify
• DigitalOcean App Platform
• Docker

---

🎯 React vs Next.js - Nə vaxt istifadə edək?

React (Vite) istifadə et:

• ✅ Admin panel
• ✅ Dashboard
• ✅ Internal tools
• ✅ SPA (Single Page App)

Next.js istifadə et:

• ✅ Public website
• ✅ E-commerce
• ✅ Blog
• ✅ SEO vacibdir
• ✅ Marketing səhifələri

---

🔗 Faydalı Linklər

• Next.js Docs
• App Router Guide
• Server Components
• Client Components

---

💡 Pro Tips

1. Server Components prioritet verin - Daha sürətlidir
2. 'use client' yalnız lazım olanda - Minimize edin
3. Image component istifadə edin - Optimize edir
4. Metadata əlavə edin - SEO üçün
5. Loading states yaradın - UX üçün

---

🎉 Nəticə

Bu proyekt Next.js-in gücünü və React-dən fərqlərini göstərir.

Əsas fərq: Next.js server-side rendering və routing ilə React-i daha güclü edir!

---

Hazırlanıb: Next.js Learning Journey 🚀