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

Question 1

App Router بیشتر بر پایهٔ چیست؟

Accepted Answer

React Server Components و layout تودرتو

Answer

فقط jQuery

Answer

حذف کامل routing

Answer

الزام به Pages Router

Question 2

SSG یعنی چه؟

Accepted Answer

ساخت HTML در زمان build

Answer

فقط رندر در مرورگر

Answer

حذف HTML

Answer

اجرای SQL روی کلاینت

Question 3

مزیت اصلی `next/link` نسبت به `<a>` داخلی؟

Accepted Answer

client-side navigation و prefetch

Answer

فقط استایل بهتر

Answer

اجباری برای لینک خارجی

Answer

غیرفعال کردن SEO

Question 4

برای مسیر `/blog/my-post` در App Router کدام ساختار درست است؟

Accepted Answer

`app/blog/[slug]/page.tsx`

Answer

`app/blog/slug.tsx`

Answer

`pages/blog/:slug.tsx`

Answer

`app/blog/{slug}/index.tsx`

Question 5

ویژگی `layout.tsx` چیست؟

Accepted Answer

UI مشترک که هنگام ناوبری بین صفحات فرزند حفظ می‌شود و دوباره رندر نمی‌شود

Answer

در هر ناوبری کاملاً remount می‌شود

Answer

فقط برای صفحه 404 است

Answer

جایگزین `page.tsx` است

Question 6

فایل `public/logo.png` با چه آدرسی در دسترس است؟

Accepted Answer

`/logo.png`

Answer

`/public/logo.png`

Answer

`/static/logo.png`

Answer

`/assets/logo.png`

Question 7

در App Router عنوان و توضیحات صفحه چگونه تنظیم می‌شود؟

Accepted Answer

با export کردن `metadata` یا `generateMetadata` از page/layout

Answer

فقط با `next/head`

Answer

با `document.title` در useEffect

Answer

در `next.config.ts`

Question 8

دستور `"use client"` چه کاری انجام می‌دهد؟

Accepted Answer

مرز Client Component را مشخص می‌کند تا hooks و event کار کنند

Answer

کامپوننت را فقط در مرورگر و بدون SSR اجرا می‌کند

Answer

کامپوننت را private می‌کند

Answer

API route می‌سازد

Question 9

فایل `loading.tsx` چه کاری انجام می‌دهد؟

Accepted Answer

UI لودینگ فوری هنگام آماده شدن segment (با Suspense)

Answer

فایل‌ها را preload می‌کند

Answer

خطاها را مدیریت می‌کند

Answer

سرعت build را بالا می‌برد

Question 10

در App Router چه چیزی یک پوشه را به یک مسیر قابل دسترس (public route) تبدیل می‌کند؟

Accepted Answer

وجود فایل `page.tsx` (یا `route.ts`) داخل آن پوشه

Answer

وجود فایل `index.tsx` داخل آن پوشه

Answer

ثبت دستی پوشه در `next.config.js`

Answer

وجود فایل `layout.tsx` به تنهایی

Question 11

کدام مورد درباره root layout (`app/layout.tsx`) درست است؟

Accepted Answer

الزامی است و باید تگ‌های `` و `` را رندر کند

Answer

اختیاری است و Next.js خودش `<html>` را اضافه می‌کند

Answer

باید حتماً Client Component باشد

Answer

فقط در حالت development اجرا می‌شود

Question 12

کامپوننت‌های داخل پوشه `app` به صورت پیش‌فرض چه نوعی هستند؟

Accepted Answer

Server Component

Answer

Client Component

Answer

Web Component

Answer

Static HTML بدون React

Question 13

اگر در یک Server Component از `useState` استفاده کنید چه اتفاقی می‌افتد؟

Accepted Answer

خطا می‌دهد؛ باید فایل را با `"use client"` به Client Component تبدیل کنید

Answer

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

Answer

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

Answer

Next.js آن را به صورت خودکار به `useRef` تبدیل می‌کند

Question 14

در App Router، `useRouter` را از کجا import می‌کنیم؟

Accepted Answer

`next/navigation`

Answer

`next/router`

Answer

`react-router-dom`

Answer

`next/link`

Question 15

برای هایلایت کردن لینک فعال در منو، کدام هوک مسیر فعلی را برمی‌گرداند؟

Accepted Answer

`usePathname()`

Answer

`useParams()`

Answer

`useLocation()`

Answer

`useRoute()`

Question 16

در یک Client Component عمیق در درخت، چطور مقدار segment پویای `[id]` را بخوانیم؟

Accepted Answer

با هوک `useParams()` از `next/navigation`

Answer

با `window.params.id`

Answer

با `process.env.id`

Answer

فقط از طریق props؛ راه دیگری وجود ندارد

Question 17

در یک Server Component، اگر کاربر لاگین نکرده باشد، چطور او را به `/login` بفرستیم؟

Accepted Answer

با فراخوانی `redirect("/login")` از `next/navigation`

Answer

با `window.location.href = "/login"`

Answer

با `router.push("/login")` از `useRouter`

Answer

با برگرداندن `<Navigate to="/login" />`

Question 18

برای مسیر `app/docs/[...slug]/page.tsx` و آدرس `/docs/a/b`، مقدار `slug` چیست؟

Accepted Answer

آرایه `["a", "b"]`

Answer

رشته `"a/b"`

Answer

فقط `"b"`

Answer

فقط `"a"`

Question 19

تفاوت `[[...slug]]` با `[...slug]` چیست؟

Accepted Answer

نسخه دوبراکتی اختیاری است و خود مسیر والد (مثلاً `/docs`) را هم match می‌کند

Answer

نسخه دوبراکتی فقط دو segment را می‌گیرد

Answer

نسخه دوبراکتی فقط در Pages Router کار می‌کند

Answer

هیچ تفاوتی ندارند و فقط سلیقه‌ای است

Question 20

پوشه‌ای با نام `_components` داخل `app` چه رفتاری دارد؟

Accepted Answer

private folder است و خودش و زیرپوشه‌هایش از routing خارج می‌شوند

Answer

به مسیر `/components` تبدیل می‌شود

Answer

فقط در development نمایش داده می‌شود

Answer

باعث خطای build می‌شود

Question 21

اگر فایل `app/blog/utils.ts` (بدون `page.tsx` کنارش) بسازید، آیا `/blog/utils` قابل دسترس است؟

Accepted Answer

خیر؛ فقط محتوای `page.tsx` و `route.ts` به کاربر ارسال می‌شود

Answer

بله؛ هر فایلی در `app` یک مسیر است

Answer

بله، ولی فقط با متد POST

Answer

بله، به صورت یک فایل استاتیک دانلودی

Question 22

تفاوت اصلی `template.tsx` با `layout.tsx` چیست؟

Accepted Answer

template در هر ناوبری یک instance جدید می‌سازد و state را ریست می‌کند

Answer

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

Answer

template جایگزین `page.tsx` می‌شود

Answer

template فقط برای صفحات خطا است

Question 23

چرا فایل `error.tsx` باید با `"use client"` شروع شود؟

Accepted Answer

چون error boundaryها در React روی کلاینت کار می‌کنند و تابع `reset` تعاملی است

Answer

چون Server Componentها هرگز خطا نمی‌دهند

Answer

چون در غیر این صورت صفحه SEO ندارد

Answer

چون `error.tsx` فقط در Pages Router کار می‌کند

Question 24

برای گرفتن خطاهایی که در خود root layout رخ می‌دهند از کدام فایل استفاده می‌شود؟

Accepted Answer

`app/global-error.tsx`

Answer

`app/error.tsx`

Answer

`app/500.tsx`

Answer

`app/_error.tsx`

Question 25

فایل `app/not-found.tsx` چه زمانی نمایش داده می‌شود؟

Accepted Answer

برای URLهای ناموجود و هر جا `notFound()` صدا زده شود

Answer

فقط زمانی که سرور خطای 500 بدهد

Answer

فقط در حالت development

Answer

هنگام بارگذاری هر صفحه به عنوان loading

Question 26

مزیت اصلی استفاده از `next/font` برای Google Fonts چیست؟

Accepted Answer

فونت‌ها self-host می‌شوند و layout shift کاهش می‌یابد

Answer

مرورگر در هر بار بازدید فونت را از Google دانلود می‌کند

Answer

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

Answer

همه وزن‌های فونت خودکار به bundle جاوااسکریپت اضافه می‌شوند

Question 27

کدام prop در کامپوننت `next/image` الزامی است؟

Accepted Answer

`alt`

Answer

`title`

Answer

`className`

Answer

`loading`

Question 28

برای یک تصویر remote (URL خارجی) در `next/image` بدون prop `fill` چه چیزی لازم است؟

Accepted Answer

مشخص کردن `width` و `height`

Answer

تبدیل تصویر به base64

Answer

قرار دادن تصویر در پوشه `app`

Answer

استفاده از `"use client"`

Question 29

برای نمایش تصویر از `https://cdn.example.com` با `next/image` چه تنظیمی لازم است؟

Accepted Answer

افزودن دامنه به `images.remotePatterns` در `next.config`

Answer

افزودن دامنه به فایل `.env`

Answer

افزودن تگ `<link rel="preconnect">` کافی است

Answer

هیچ تنظیمی لازم نیست؛ همه دامنه‌ها مجازند

Question 30

رفتار پیش‌فرض بارگذاری تصاویر در `next/image` چیست؟

Accepted Answer

lazy loading؛ تصویر نزدیک viewport بارگذاری می‌شود

Answer

همه تصاویر بلافاصله با بالاترین اولویت بارگذاری می‌شوند

Answer

تصاویر فقط بعد از کلیک کاربر بارگذاری می‌شوند

Answer

تصاویر فقط روی سرور رندر و به HTML inline می‌شوند

Question 31

کدام کار را optimizer تصاویر Next.js به صورت خودکار انجام می‌دهد؟

Accepted Answer

تغییر اندازه و سرو فرمت‌های مدرن مثل WebP برای مرورگرهای پشتیبان

Answer

افزودن واترمارک به همه تصاویر

Answer

تبدیل همه تصاویر به SVG

Answer

آپلود تصاویر به Google Drive

Question 32

برای بارگذاری یک اسکریپت third-party مثل analytics، روش پیشنهادی Next.js چیست؟

Accepted Answer

کامپوننت `next/script` با `strategy` مناسب

Answer

قرار دادن `<script>` در فایل `next.config.js`

Answer

import کردن URL اسکریپت در Server Component

Answer

استفاده از `eval` در `useEffect`

Question 33

برای اجرای نسخه production یک اپ Next.js روی سرور Node، ترتیب درست دستورات چیست؟

Accepted Answer

`next build` و سپس `next start`

Answer

`next dev` و سپس `next build`

Answer

فقط `next dev` با `NODE_ENV=production`

Answer

`next start` و سپس `next build`

Question 34

در فایل `app/api/users/route.ts` چطور یک handler برای درخواست GET تعریف می‌کنیم؟

Accepted Answer

با export یک تابع به نام `GET`

Answer

با `export default function handler()`

Answer

با `app.get("/api/users")`

Answer

با یک کامپوننت React که JSON برمی‌گرداند

Question 35

آیا می‌توان `page.tsx` و `route.ts` را در یک پوشه کنار هم داشت؟

Accepted Answer

خیر؛ در یک segment فقط یکی از آن‌ها مجاز است

Answer

بله؛ GET به route و بقیه به page می‌روند

Answer

بله؛ page برای موبایل و route برای دسکتاپ است

Answer

بله؛ اولویت با فایلی است که اول ساخته شده

Question 36

prop `replace` روی کامپوننت `<Link>` چه کاری انجام می‌دهد؟

Accepted Answer

به جای افزودن entry جدید، entry فعلی history را جایگزین می‌کند

Answer

محتوای صفحه را بدون تغییر URL عوض می‌کند

Answer

لینک را در تب جدید باز می‌کند

Answer

prefetch را غیرفعال می‌کند

Question 37

در App Router ساده‌ترین روش دریافت داده در یک صفحه چیست؟

Accepted Answer

تعریف Server Component به صورت `async` و `await` مستقیم داده

Answer

استفاده از `getServerSideProps`

Answer

استفاده از `useEffect` در هر صفحه

Answer

قرار دادن داده در `next.config.js`

Question 38

چرا نمی‌توان `onClick` را مستقیماً در یک Server Component روی دکمه گذاشت؟

Accepted Answer

چون event handlerها به جاوااسکریپت سمت کلاینت نیاز دارند و تابع قابل ارسال از سرور نیست

Answer

چون دکمه‌ها در Server Component رندر نمی‌شوند

Answer

چون `onClick` در React منسوخ شده است

Answer

چون Next.js فقط از `onPress` پشتیبانی می‌کند

Question 39

آیا می‌توان پوشه `app` را داخل `src` قرار داد؟

Accepted Answer

بله؛ `src/app` به صورت رسمی پشتیبانی می‌شود

Answer

خیر؛ `app` باید حتماً در ریشه پروژه باشد

Answer

فقط با یک پلاگین جداگانه

Answer

فقط اگر TypeScript غیرفعال باشد

Question 40

فایل `Button.module.css` چه مزیتی نسبت به CSS معمولی دارد؟

Accepted Answer

نام کلاس‌ها به صورت محلی scope می‌شوند و تداخل ندارند

Answer

CSS در زمان اجرا با جاوااسکریپت تولید می‌شود

Answer

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

Answer

همه استایل‌ها به صورت global اعمال می‌شوند

Question 41

معمولاً فایل CSS سراسری (مثل `globals.css`) کجا import می‌شود؟

Accepted Answer

در root layout (`app/layout.tsx`)

Answer

در فایل `next.config.js`

Answer

در هر Route Handler

Answer

در فایل `.env`

Question 42

import به شکل `@/components/Button` چطور کار می‌کند؟

Accepted Answer

با path alias تعریف‌شده در `paths` فایل `tsconfig.json` یا `jsconfig.json`

Answer

`@` یعنی پکیج از npm دانلود می‌شود

Answer

`@` همیشه به پوشه `public` اشاره می‌کند

Answer

فقط در Pages Router کار می‌کند

Question 43

`next/dynamic` برای چه استفاده می‌شود؟

Accepted Answer

lazy load کردن کامپوننت‌ها تا کد آن‌ها در bundle اولیه نباشد

Answer

ساخت مسیرهای پویا مثل `[id]`

Answer

تبدیل صفحه به dynamic rendering

Answer

تعریف متغیرهای محیطی پویا

Question 44

در App Router چطور یک `sitemap.xml` تولید کنیم؟

Accepted Answer

با ساخت فایل `app/sitemap.ts` که آرایه‌ای از URLها برمی‌گرداند

Answer

با افزودن `sitemap: true` به `package.json`

Answer

با یک Client Component به نام `Sitemap`

Answer

Next.js امکان تولید sitemap ندارد

Question 45

ساده‌ترین روش افزودن favicon در App Router چیست؟

Accepted Answer

قرار دادن فایل `favicon.ico` یا `icon.png` در ریشه پوشه `app`

Answer

افزودن آن به `next.config.js` زیر `favicon`

Answer

import آن در هر صفحه

Answer

فقط با `<Head>` از `next/head`

Question 46

کدی که فقط در یک Server Component استفاده شده (مثلاً یک کتابخانه فرمت تاریخ) چه اثری بر bundle کلاینت دارد؟

Accepted Answer

هیچ؛ آن کد به مرورگر ارسال نمی‌شود

Answer

کل کتابخانه به bundle کلاینت اضافه می‌شود

Answer

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

Answer

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

Question 47

آیا پوشه‌های `app` و `pages` می‌توانند در یک پروژه همزمان وجود داشته باشند؟

Accepted Answer

بله؛ برای مهاجرت تدریجی، ولی یک مسیر نباید در هر دو تعریف شود

Answer

خیر؛ build با خطا متوقف می‌شود

Answer

بله؛ و در صورت تکرار مسیر، هر دو صفحه با هم نمایش داده می‌شوند

Answer

فقط در حالت development

Question 48

در یک Client Component، چطور کاربر را به صفحه قبلی در history برگردانیم؟

Accepted Answer

`router.back()` از `useRouter` در `next/navigation`

Answer

`redirect(-1)`

Answer

`notFound()`

Answer

`router.refresh()`

Question 49

در Next.js 15 به بعد، `params` در یک صفحه Server Component چگونه خوانده می‌شود؟

Accepted Answer

`params` یک Promise است و باید آن را `await` کرد

Answer

از `window.location.params`

Answer

فقط با `getStaticProps`

Answer

از `process.argv`

Question 50

در یک Client Component برای خواندن `?q=shoes` از URL از کدام هوک استفاده می‌کنیم؟

Accepted Answer

`useSearchParams()` و سپس `.get("q")`

Answer

`usePathname()` و سپس `.query.q`

Answer

`useParams().q`

Answer

`useRouter().query.q`

نکست‌جی‌اس · جونیور · 50

App Router بیشتر بر پایهٔ چیست؟