سؤالات مصاحبه نکست‌جی‌اس سطح میدل (50 سؤال)

Question 1

برای تازه نگه‌داشتن دادهٔ fetch در App Router کدام رایج است؟

Accepted Answer

`revalidate` / `revalidatePath` / `revalidateTag`

Answer

فقط `alert()`

Answer

فقط `localStorage.clear()`

Answer

`document.write`

Question 2

Middleware معمولاً کجا اجرا می‌شود؟

Accepted Answer

روی Edge قبل از تکمیل request

Answer

فقط داخل CSS

Answer

بعد از unmount همه کامپوننت‌ها

Answer

فقط در IE11

Question 3

`next/image` کدام کار را می‌کند؟

Accepted Answer

ریسایز، فرمت مدرن، lazy-load و کاهش CLS

Answer

جایگزین کامل دیتابیس

Answer

فقط SVG را حذف می‌کند

Answer

انیمیشن‌های 3D

Question 4

`generateStaticParams` چه کاری انجام می‌دهد؟

Accepted Answer

مسیرهای پویا را در زمان build از پیش رندر می‌کند

Answer

query string را parse می‌کند

Answer

متغیرهای محیطی تولید می‌کند

Answer

مسیرها را در runtime حذف می‌کند

Question 5

Server Action چیست؟

Accepted Answer

تابع async با `"use server"` که روی سرور اجرا و از فرم/کلاینت صدا زده می‌شود

Answer

یک کامپوننت سرور

Answer

middleware جدید

Answer

تابعی که فقط در build اجرا می‌شود

Question 6

کدام درباره `error.tsx` درست است؟

Accepted Answer

باید Client Component باشد و برای segment خود error boundary است

Answer

باید Server Component باشد

Answer

خطاهای layout همان segment را هم می‌گیرد

Answer

فقط برای 404 است

Question 7

پوشه `(marketing)` در App Router چه اثری دارد؟

Accepted Answer

route group است: سازمان‌دهی و layout جدا بدون تأثیر روی URL

Answer

segment `/marketing` به URL اضافه می‌کند

Answer

مسیر را private می‌کند

Answer

مسیر را حذف می‌کند

Question 8

وقتی محصولی در دیتابیس پیدا نشد، روش درست در Server Component چیست؟

Accepted Answer

صدا زدن `notFound()` از `next/navigation`

Answer

برگرداندن `null`

Answer

`throw new Error("404")`

Answer

`window.location = "/404"`

Question 9

کدام متغیر محیطی در مرورگر در دسترس است؟

Accepted Answer

`NEXT_PUBLIC_API_URL`

Answer

`API_SECRET`

Answer

`DATABASE_URL`

Answer

همه متغیرهای `.env`

Question 10

مزیت پاس دادن یک Server Action به `<form action={createPost}>` چیست؟

Accepted Answer

progressive enhancement؛ فرم حتی قبل از لود شدن جاوااسکریپت هم ارسال می‌شود

Answer

فرم فقط بعد از hydrate شدن کامل صفحه کار می‌کند

Answer

داده‌ها در `localStorage` ذخیره و بعداً ارسال می‌شوند

Answer

فرم به صورت خودکار با متد GET ارسال می‌شود

Question 11

چرا `useFormStatus().pending` در کامپوننتی که خود `<form>` را رندر می‌کند همیشه `false` است؟

Accepted Answer

چون فقط وضعیت `<form>` والد را می‌خواند؛ باید در کامپوننت فرزند فرم استفاده شود

Answer

چون فقط در Server Component کار می‌کند

Answer

چون فرم باید متد GET داشته باشد

Answer

چون باید `revalidatePath` صدا زده شود

Question 12

برای نمایش پیام خطای اعتبارسنجی برگشتی از یک Server Action در فرم، کدام هوک مناسب است؟

Accepted Answer

`useActionState` که state برگشتی action و وضعیت pending را می‌دهد

Answer

`useEffect` با `fetch` به همان action

Answer

`useRef` برای نگه داشتن پاسخ سرور

Answer

`useLayoutEffect` روی فرم

Question 13

بعد از ایجاد یک پست با Server Action، لیست `/posts` هنوز داده قدیمی نشان می‌دهد. راه‌حل درست؟

Accepted Answer

فراخوانی `revalidatePath("/posts")` داخل همان Server Action

Answer

پاک کردن کش مرورگر کاربر با جاوااسکریپت

Answer

rebuild کامل پروژه بعد از هر پست

Answer

افزودن `?v=Math.random()` به لینک‌ها

Question 14

چطور همه fetchهای مربوط به محصولات را با یک فراخوانی باطل کنیم؟

Accepted Answer

با `fetch(url, { next: { tags: ["products"] } })` و سپس `revalidateTag("products")`

Answer

با افزودن هدر `X-Products: clear` به درخواست

Answer

با `router.refresh("products")`

Answer

با حذف پوشه `.next` در زمان اجرا

Question 15

استفاده از `fetch(url, { cache: "no-store" })` در یک صفحه چه اثری دارد؟

Accepted Answer

داده در هر درخواست تازه گرفته می‌شود و صفحه dynamic رندر می‌شود

Answer

پاسخ برای همیشه کش می‌شود

Answer

fetch فقط در مرورگر اجرا می‌شود

Answer

صفحه در زمان build یک بار ساخته و دیگر عوض نمی‌شود

Question 16

چرا صفحه‌ای که `cookies()` را می‌خواند دیگر static prerender نمی‌شود؟

Accepted Answer

چون cookies فقط در زمان درخواست معلوم‌اند و یک Dynamic API هستند

Answer

چون cookies در Server Component ممنوع است

Answer

چون cookies حجم HTML را زیاد می‌کند

Answer

چون `cookies()` فقط در middleware کار می‌کند

Question 17

`export const dynamic = "force-dynamic"` در یک `page.tsx` چه می‌کند؟

Accepted Answer

مسیر را مجبور می‌کند در هر درخواست روی سرور رندر شود

Answer

صفحه را به Client Component تبدیل می‌کند

Answer

مسیرهای پویا مثل `[id]` را غیرفعال می‌کند

Answer

صفحه را فقط در زمان build می‌سازد

Question 18

با `export const dynamicParams = false` و `generateStaticParams`، درخواست به یک `id` که در لیست نیست چه نتیجه‌ای دارد؟

Accepted Answer

پاسخ 404 برمی‌گردد

Answer

صفحه on-demand ساخته و کش می‌شود

Answer

به اولین `id` لیست redirect می‌شود

Answer

build دوباره اجرا می‌شود

Question 19

`router.refresh()` دقیقاً چه کاری انجام می‌دهد؟

Accepted Answer

Server Componentهای مسیر فعلی را دوباره از سرور می‌گیرد بدون از دست رفتن state کلاینت

Answer

مثل F5 کل صفحه را reload می‌کند

Answer

کش Data Cache سرور را کاملاً پاک می‌کند

Answer

کاربر را به صفحه اصلی می‌برد

Question 20

پاس دادن کدام prop از Server Component به Client Component خطا می‌دهد؟

Accepted Answer

یک تابع معمولی مثل `onSelect={() => ...}`

Answer

یک آبجکت ساده با رشته و عدد

Answer

یک آرایه از رشته‌ها

Answer

یک JSX element به عنوان `children`

Question 21

چطور یک Server Component را داخل یک Client Component (مثلاً یک Modal) نمایش دهیم؟

Accepted Answer

آن را به صورت `children` یا prop از یک Server Component والد پاس دهیم

Answer

مستقیماً آن را در فایل Client Component import کنیم

Answer

با `dynamic(() => import(...), { ssr: false })`

Answer

امکان‌پذیر نیست

Question 22

وقتی فایلی `"use client"` دارد، ماژول‌هایی که import می‌کند چه وضعیتی دارند؟

Accepted Answer

آن‌ها هم بخشی از client bundle می‌شوند، حتی بدون دستور `"use client"`

Answer

همچنان Server Component باقی می‌مانند

Answer

Next.js خطا می‌دهد مگر اینکه هر کدام `"use client"` داشته باشند

Answer

فقط روی سرور اجرا و نتیجه‌شان serialize می‌شود

Question 23

برای استفاده از React Context (مثلاً ThemeProvider) در کل اپ App Router، روش درست چیست؟

Accepted Answer

یک Client Component provider بسازیم و در root layout دور `children` قرار دهیم

Answer

`createContext` را مستقیماً در root layout (Server Component) صدا بزنیم

Answer

Context در App Router پشتیبانی نمی‌شود

Answer

provider را در `next.config.js` ثبت کنیم

Question 24

در یک Route Handler با `GET(request: NextRequest)` چطور مقدار `?page=2` را بخوانیم؟

Accepted Answer

`request.nextUrl.searchParams.get("page")`

Answer

`request.query.page`

Answer

`useSearchParams().get("page")`

Answer

`request.body.page`

Question 25

چطور middleware را فقط برای مسیرهای `/dashboard/*` اجرا کنیم؟

Accepted Answer

با `export const config = { matcher: "/dashboard/:path*" }`

Answer

با قرار دادن فایل middleware داخل پوشه `app/dashboard`

Answer

با `export const runtime = "dashboard"`

Answer

middleware همیشه روی همه مسیرها اجرا می‌شود و قابل محدود کردن نیست

Question 26

تفاوت `NextResponse.rewrite()` با `NextResponse.redirect()` در middleware چیست؟

Accepted Answer

rewrite محتوای مسیر دیگری را سرو می‌کند ولی URL مرورگر تغییر نمی‌کند

Answer

rewrite کاربر را به URL جدید می‌برد و آدرس‌بار عوض می‌شود

Answer

redirect فقط برای دامنه‌های خارجی کار می‌کند

Answer

هیچ تفاوتی ندارند

Question 27

کجا می‌توان با `cookies().set()` یک cookie تنظیم کرد؟

Accepted Answer

در Server Action یا Route Handler (و middleware از طریق response)

Answer

در هر Server Component هنگام رندر

Answer

در `generateMetadata`

Answer

در `generateStaticParams`

Question 28

تابع `getUser()` با ORM در layout و page هر دو صدا زده می‌شود. چطور در یک درخواست فقط یک بار کوئری بزند؟

Accepted Answer

آن را با `cache` از React بپیچیم

Answer

نتیجه را در `localStorage` ذخیره کنیم

Answer

آن را در یک متغیر global ماژول نگه داریم

Answer

کوئری را به Client Component منتقل کنیم

Question 29

اگر `generateMetadata` و `page` هر دو `fetch` با همان URL و options بزنند، چند درخواست شبکه ارسال می‌شود؟

Accepted Answer

یکی؛ fetchهای یکسان در یک render pass memoize می‌شوند

Answer

دو؛ هر fetch جداگانه ارسال می‌شود

Answer

صفر؛ داده از `public` خوانده می‌شود

Answer

سه؛ یکی اضافه برای prefetch

Question 30

`app/dashboard/loading.tsx` وجود دارد ولی fetch کند داخل `app/dashboard/layout.tsx` است. چه اتفاقی می‌افتد؟

Accepted Answer

loading نمایش داده نمی‌شود چون فقط page و فرزندان را می‌پوشاند، نه layout همان سطح

Answer

loading بلافاصله نمایش داده می‌شود

Answer

layout به صورت خودکار client-side رندر می‌شود

Answer

build با خطا مواجه می‌شود

Question 31

خطایی در `app/shop/layout.tsx` رخ می‌دهد. کدام error boundary آن را می‌گیرد؟

Accepted Answer

`error.tsx` در segment والد (مثلاً `app/error.tsx`)

Answer

`app/shop/error.tsx`

Answer

`app/shop/not-found.tsx`

Answer

هیچ‌کدام؛ خطاهای layout نادیده گرفته می‌شوند

Question 32

داشبوردی دارید که یک ویجت کند (۳ ثانیه) و بقیه سریع‌اند. بهترین روش برای نمایش سریع صفحه؟

Accepted Answer

ویجت کند را در `<Suspense fallback={...}>` جدا قرار دهیم تا بقیه زودتر stream شوند

Answer

کل صفحه را منتظر ویجت کند نگه داریم

Answer

ویجت کند را با `setTimeout` در کلاینت بارگذاری کنیم

Answer

`dynamic = "force-static"` بگذاریم

Question 33

کتابخانه نقشه‌ای دارید که به `window` نیاز دارد. استفاده از `dynamic(..., { ssr: false })` کجا مجاز است؟

Accepted Answer

فقط داخل یک Client Component

Answer

فقط داخل Server Component

Answer

فقط داخل `next.config.js`

Answer

فقط داخل Route Handler

Question 34

مقدار `NEXT_PUBLIC_API_URL` را بعد از build در سرور تغییر می‌دهید ولی کد کلاینت هنوز مقدار قدیمی دارد. چرا؟

Accepted Answer

متغیرهای `NEXT_PUBLIC_` در زمان build داخل bundle جاوااسکریپت inline می‌شوند

Answer

مرورگر متغیرهای محیطی را کش می‌کند

Answer

Next.js متغیرها را فقط هر ۲۴ ساعت می‌خواند

Answer

باید `.env` را به `public` منتقل کرد

Question 35

هنگام استفاده از `<Image fill />` چه چیزی درباره المان والد لازم است؟

Accepted Answer

والد باید `position` برابر `relative`، `absolute` یا `fixed` داشته باشد

Answer

والد باید حتماً `display: grid` باشد

Answer

والد باید یک `<picture>` باشد

Answer

والد نباید هیچ ابعادی داشته باشد

Question 36

prop `sizes` در `next/image` (مثلاً `"(max-width: 768px) 100vw, 33vw"`) چه فایده‌ای دارد؟

Accepted Answer

به مرورگر می‌گوید عرض نمایش تصویر چقدر است تا کوچک‌ترین نسخه مناسب از `srcset` را انتخاب کند

Answer

اندازه فایل اصلی را روی دیسک تغییر می‌دهد

Answer

حداکثر حجم مجاز تصویر را تعیین می‌کند

Answer

تعداد دفعات بارگذاری مجدد تصویر را تعیین می‌کند

Question 37

سایت شما static است و ویراستاران CMS می‌خواهند پیش‌نویس منتشرنشده را ببینند. ابزار مناسب Next.js چیست؟

Accepted Answer

Draft Mode که برای آن کاربر صفحه را در زمان درخواست رندر می‌کند

Answer

حذف کامل static generation از کل سایت

Answer

rebuild کامل سایت با هر ذخیره در CMS

Answer

نمایش پیش‌نویس فقط در `next dev`

Question 38

چرا `redirect("/done")` داخل بلوک `try { ... } catch {}` در Server Action کار نمی‌کند؟

Accepted Answer

چون `redirect` با throw یک خطای خاص کار می‌کند و `catch` آن را می‌بلعد

Answer

چون `redirect` در Server Action ممنوع است

Answer

چون `redirect` فقط URL مطلق می‌پذیرد

Answer

چون `redirect` باید `await` شود

Question 39

آدرس قدیمی `/old-blog/:slug` باید برای همیشه به `/blog/:slug` منتقل شود. ساده‌ترین روش؟

Accepted Answer

تعریف `redirects()` در `next.config` با `permanent: true`

Answer

ساخت صفحه‌ای که با `useEffect` redirect کند

Answer

کپی کردن همه صفحات در هر دو مسیر

Answer

افزودن `<meta refresh>` به root layout

Question 40

برای اینکه `/api/*` بدون مشکل CORS به یک backend خارجی proxy شود، کدام تنظیم مناسب است؟

Accepted Answer

`rewrites()` در `next.config` با `destination` به آدرس backend

Answer

`redirects()` با `permanent: false`

Answer

`images.remotePatterns`

Answer

`basePath: "/api"`

Question 41

Stripe باید یک webhook به اپ شما بفرستد. Server Action یا Route Handler؟

Accepted Answer

Route Handler؛ چون یک endpoint HTTP پایدار با URL مشخص برای کلاینت‌های خارجی لازم است

Answer

Server Action؛ چون خودکار برای سرویس‌های خارجی URL عمومی می‌سازد

Answer

Client Component با `useEffect`

Answer

middleware؛ چون تنها جایی است که body خوانده می‌شود

Question 42

می‌خواهید لایک فوراً در UI نمایش داده شود و بعد از پاسخ Server Action تأیید شود. کدام هوک؟

Accepted Answer

`useOptimistic`

Answer

`useDeferredValue`

Answer

`useId`

Answer

`useSyncExternalStore`

Question 43

در یک صفحه static، Client Componentی که `useSearchParams` دارد بدون `<Suspense>` استفاده شده. نتیجه؟

Accepted Answer

build هشدار/خطا می‌دهد چون تا نزدیک‌ترین Suspense همه چیز فقط در کلاینت رندر می‌شود

Answer

کل سایت dynamic می‌شود

Answer

`useSearchParams` همیشه رشته خالی برمی‌گرداند

Answer

هیچ اثری ندارد

Question 44

در خروجی `next build`، علامت `ƒ` کنار یک مسیر چه معنایی دارد؟

Accepted Answer

مسیر dynamic است و در هر درخواست روی سرور رندر می‌شود

Answer

مسیر کاملاً static prerender شده است

Answer

مسیر خطای build دارد

Answer

مسیر فقط در development وجود دارد

Question 45

گزینه `subsets: ["latin"]` در `next/font/google` چه اثری دارد؟

Accepted Answer

فقط زیرمجموعه کاراکترهای مشخص‌شده preload می‌شود و حجم دانلود کم می‌شود

Answer

فونت فقط برای کاربران کشورهای لاتین نمایش داده می‌شود

Answer

همه زبان‌های دیگر از سایت حذف می‌شوند

Answer

فونت به صورت SVG رندر می‌شود

Question 46

چرا `metadataBase` در root layout تنظیم می‌شود؟

Accepted Answer

تا URLهای نسبی در metadata (مثل تصویر Open Graph) به URL مطلق تبدیل شوند

Answer

تا مسیر پایه همه صفحات تغییر کند

Answer

تا متادیتا در دیتابیس ذخیره شود

Answer

تا متادیتا فقط در development ساخته شود

Question 47

چطور همه عنوان‌ها به شکل `About | MySite` درآیند بدون تکرار نام سایت در هر صفحه؟

Accepted Answer

در layout: `title: { template: "%s | MySite", default: "MySite" }`

Answer

در هر صفحه `document.title` را در `useEffect` تغییر دهیم

Answer

`title` را در `next.config.js` تعریف کنیم

Answer

امکان‌پذیر نیست

Question 48

هم `app/blog/new/page.tsx` و هم `app/blog/[slug]/page.tsx` وجود دارند. `/blog/new` کدام را رندر می‌کند؟

Accepted Answer

`blog/new`؛ segment static بر segment پویا اولویت دارد

Answer

`blog/[slug]` با `slug = "new"`

Answer

build به دلیل تداخل خطا می‌دهد

Answer

هر بار به صورت تصادفی یکی انتخاب می‌شود

Question 49

یک کتابخانه carousel از `useState` استفاده می‌کند ولی `"use client"` ندارد و در Server Component خطا می‌دهد. راه‌حل؟

Accepted Answer

یک فایل با `"use client"` بسازیم که آن را re-export کند و از آن import کنیم

Answer

کد کتابخانه را در `node_modules` ویرایش کنیم

Answer

کل اپ را به Pages Router برگردانیم

Answer

کتابخانه را در `next.config.js` به عنوان server-only علامت بزنیم

Question 50

layout مقدار `revalidate = 3600` و page مقدار `revalidate = 60` دارد. مسیر هر چند وقت revalidate می‌شود؟

Accepted Answer

هر ۶۰ ثانیه؛ کمترین مقدار در مسیر اعمال می‌شود

Answer

هر ۳۶۰۰ ثانیه؛ مقدار layout اولویت دارد

Answer

میانگین دو مقدار

Answer

هرگز؛ تداخل باعث غیرفعال شدن کش می‌شود

نکست‌جی‌اس · میدل · 50

برای تازه نگه‌داشتن دادهٔ fetch در App Router کدام رایج است؟