Magdy Atef Zahran

المفاهيم الأساسية (Core Concepts) في Next.js

النهارده هنتعمق أكتر في الـ Pages and Routing ،Static File Serving، وAPI Routes، مع أمثلة عملية عشان تفهم اكتر.

1ـ Pages and Routing

في Next كل فايل بتحطه في فولدر pages بيتحول تلقائي لصفحة برابط من غير ما تحتاج تضيف مكتبات زي ريأكت.

وأنواع الروتنج في Next تلاته هما:

File-based Routing:

لو عملت فايل اسمه about.js في فولدر pages هتلاقيها على الرابط /about.
Dynamic Routing:

هنا بتعمل صفحات ديناميكية زي /product/[id].js
Nested Routing:

هنا تقدر تعمل فولدرات جوا فولدر pages عشان تنظم الصفحات

مثال عملي علي ال Dynamic Routing:

import { useRouter } from 'next/router'; export default function Product() { const router = useRouter(); const { id } = router.query; return <h1>Product ID: {id}</h1>; }

مثال عملي علي ال Nested Routing:

pages/ ├── about/ │ └── team.js --> /about/team ├── contact.js --> /contact

كدا شرحنا الروتينج في نيكست وأنواعه ندخل في الـ Static File Serving

2ـ Static File Serving

بكل بساطة أي فايل هتحطه في فولدر public هيبقى متاح مباشرة على الـURL ومش محتاج تستخدم مكتبات خارجية زي file-loader مثلا.

يعني مثلا… لو عندك صورة logo.png في فولدر public تقدر تعرضها كده:

ندخل بقا على اخر نقطه والاهم وهي الـ API Routes

3ـ API Routes – إنشاء Endpoints داخل المشروع نفسه

أي فايل جوه pages/api بيتحول تلقائي لـ API Endpoint.

مثال عملي:

export default function handler(req, res) { res.status(200).json({ message: "Hello, Next.js!" }); }

لو فتحت الموقع على /api/hello هتلاقي:

{ “message”: “Hello, Next.js!” }

ودا مثال عملي مع الـ POST Request:

export default function handler(req, res) { if (req.method === 'POST') { const { username, password } = req.body; if (username === 'admin' && password === '1234') { res.status(200).json({ status: 'success', token: 'abc123' }); } else { res.status(401).json({ status: 'error', message: 'Invalid credentials' }); } } else { res.setHeader('Allow', ['POST']); res.status(405).end(Method ${req.method} Not Allowed); } }

وممكن تستخدم fetch أو مكتبة زي axios عشان تبعت بيانات للـ API.

وبكده نكون خلصنا شرحنا عن الـ Routing والـ Static File Serving والـ API Routes. لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح يا صديقي