🚀 Next.js – Frontend Interview Questions & Answers

أسئلة (Next.js):

• إيه الفرق بين getStaticProps و getServerSideProps؟ وامتى تستخدم كل واحدة؟

  • getStaticProps:

    • بتجيب البيانات وقت الـ build، وبتكون ثابتة لكل الزوار.
    • أسرع في الأداء لإنه بيخلي الصفحة Static HTML.
    • مناسب للـ SEO والمحتوى اللي مش بيتغير كتير زي المدونات أو الصفحات التعريفية.

  • getServerSideProps:

    • بتجيب البيانات كل مرة الزائر يفتح الصفحة.
    • أبطأ من getStaticProps لإنه بيحتاج وقت عشان يجيب البيانات من السيرفر.
    • مناسب للبيانات اللي بتتغير بسرعة زي داشبورد أو بيانات مستخدم محدثة.

    
    
    امتى تستخدم كل واحدة؟
    
    

    • ✔️ لو البيانات ثابتة → getStaticProps (أداء أسرع)
    • ✔️ لو البيانات بتتغير دايمًا → getServerSideProps (تحديث فوري)

• إزاي تقدر تعمل Incremental Static Regeneration (ISR) وليه ممكن تحتاجه؟
  

  ISR بيخليك تحدّث الصفحات الاستاتيكية من غير ما تعمل إعادة بناء (Rebuild) للموقع كله.

  • كل اللي عليك تضيف revalidate في getStaticProps:


export async function getStaticProps() { const data = await fetchData(); return { props: { data }, revalidate: 60, // الصفحة تتحدث كل دقيقة }; }

• كده كل زائر جديد بعد الدقيقة دي، هيشوف البيانات الجديدة من غير ما توقف السيرفر.
• مفيد لو عندك موقع محتواه بيتغير كل شوية بس مش محتاجه يتحدث لحظيًا زي الأخبار أو المدونات.

• إيه الفرق بين Server Components و Client Components في Next.js 13؟
  

  Next.js 13 جاب مفهوم Server Components و Client Components وفرقهم زي كده:

  • 
    Server Components (افتراضيًا):
    
    بيتنفذ على السيرفر وميبقاش جوا البراوزر و أسرع لإنه مفيهوش JavaScript في الـ Client و كويس للحاجات اللي مش بتتغير زي الـ Layouts والصفحات السابتة.

  • 
    Client Components (“use client”)
    
    بيتنفذ في المتصفح و لازم تستخدمه لو عندك State, Events, Hooks و مناسب للحاجات التفاعلية زي الأزرار، النماذج، الفلاتر.

  
  
  الخلاصة:
  
  

  • ✔️ أي حاجة مش متغيرة → خليك في Server Components.
  • ✔️ أي حاجة فيها State أو Events → لازم Client Components.

• إيه الفرق بين Pages Router و App Router في Next.js 13+؟ وإزاي بيأثر على إدارة البيانات؟
  

  • 
    Pages Router (القديم – /pages)
    
    بيعتمد على ملفات JavaScript في /pages لكل Route و بيستخدم getStaticProps, getServerSideProps لجلب البيانات ومناسب جدا للي شغالين بالأسلوب الكلاسيكي وعايزين انتقال سلس.
  • 
    App Router (الجديد – /app)
    
    بيستخدم Server Components بشكل افتراضي وبيعتمد على React Server Components + Suspense والإدارة بقت أسهل وأقوى، وده هيخلي الموقع أسرع وأخف.

  
  
  إدارة البيانات
  
  

  بقت أسهل في App Router لإنه بيدمج fetch مباشرة في السيرفر بدل ما تستخدم getServerSideProps.

• إزاي تقدر تستخدم Middleware في Next.js؟ وامتى يكون مفيد؟
  

  Middleware في Next.js بيشتغل قبل ما الصفحة توصل للزائر، وبيسمح لك تعدل الرد بناءً على الطلب.



مثال: عمل Redirect حسب لغة المستخدم





import { NextResponse } from "next/server"; export function middleware(req) { const url = req.nextUrl.clone(); if (!req.cookies.get("lang")) { url.pathname = "/ar"; return NextResponse.redirect(url); } return NextResponse.next(); }



إمتى هيكون مفيد؟


حماية صفحات معينة و إعادة توجيه حسب اللغة أو المنطقة و مصادقة المستخدمين قبل فتح الصفحة.

• إزاي تتعامل مع المصادقة (Authentication) في Next.js؟ وإيه أفضل الحلول؟
  

  عندك 3 طرق أساسية:

  • NextAuth.js → جاهز وسهل للاستخدام مع Google, GitHub، إلخ.
  • JWT مع API Routes → لو عايز تحكم كامل في المصادقة.
  • Firebase Authentication → لو شغال بمشاريع سريعة وخفيفة.



مثال مصادقة بـ NextAuth.js:





import NextAuth from "next-auth"; import Providers from "next-auth/providers"; export default NextAuth({ providers: [ Providers.Google({ clientId: process.env.GOOGLE_ID, clientSecret: process.env.GOOGLE_SECRET, }), ], });

NextAuth هو الأسهل لو عايز حاجة جاهزة وسريعة

• إزاي تعمل Dynamic Routing في Next.js؟ وإيه الفرق بين [id].js و [[…slug]].js؟
  

  • [id].js → بيديك Path Parameter واحد زي post/123.
  • [[…slug]].js → بيعمل Catch-All Routes، يعني يقبل أكتر من جزء زي category/react/hooks.



مثال Dynamic Route لـ [id].js:





export async function getStaticPaths() { return { paths: [{ params: { id: "1" } }], fallback: "blocking" }; }

• إيه هي Image Optimization في Next.js وإزاي بتساعد في تحسين الأداء؟
  

  
  Next.js Image Optimization بتحسن الصور تلقائيًا عن طريق:
  

  • ✔️ تحميل الصور بالحجم المناسب لكل جهاز.
  • ✔️ استخدام WebP لتوفير الحجم.
  • ✔️ Lazy Loading للصور اللي تحت.



مثال عملي:





import Image from "next/image";;

بتقلل وقت تحميل الموقع وتسرّع الأداء خصوصًا على الموبايل

• إزاي تقدر تعمل API Routes في Next.js؟ وإيه الفايدة منها؟
  

  • API Routes بتخليك تبني API داخلي جوا Next.js بدل ما تحتاج سيرفر منفصل.
  • كل ملف جوه /pages/api/ بيكون Route خاص.



مثال Route بسيط:





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



فايدتها؟



• ✔️ تبني Backend صغير جوا المشروع.
• ✔️ توصل لـ Database بدون الحاجة لسيرفر منفصل.

• إزاي تستخدم next.config.js وليه ممكن تحتاج تعدل عليه؟

  
  next.config.js هو ملف الإعدادات الأساسي في Next.js، وبتقدر تعدل منه حاجات زي:
  

  • ✔️ السماح بمصادر صور معينة.
  • ✔️ تحسين الأداء بالكاشينج.
  • ✔️ تغيير الـ Base Path للموقع.



مثال بسيط





module.exports = { images: { domains: ["example.com"], }, };

لو عندك موقع بيستخدم API خارجية أو محتوى ديناميكي، غالبًا هتحتاج تعدل عليه.