آموزش ۵۰۰+ سوال و جواب مصاحبه Next.js سال ۲۰۲۶ - آخرین آپدیت

پوشش جامع دامنه‌های آزمون

این مخزن تست‌های تمرینی دقیقاً مطابق با توزیع‌های فنی دنیای واقعی طراحی شده است که در مصاحبه‌های فنی سطح بالای Next.js و React فول-استک انتظار می‌رود.

• مبانی Next.js (۲۰٪):تحلیل هسته SSR، SSG، ISR، CSR و جزئیات مسیریابی مبتنی بر فایل-سیستم یا Layout.

• جلب داده‌ها و API Routes (۱۸٪):جریان‌های اجرای متدهای Data Fetching، ایجاد مسیرهای API در REST یا GraphQL، استقرار Middleware برای کنترل مسیریابی و مدیریت احراز هویت در Runtime.

• بهینه‌سازی عملکرد (۱۵٪):بهینه‌سازی خودکار Core Web Vitals با استفاده از next/image و next/font، بهینه‌سازی عمیق دارایی‌ها، تقسیم کد پویا (Dynamic Code Splitting) و تنظیمات Lazy loading.

• امنیت و بهترین تجربیات (۱۲٪):پیاده‌سازی هدرهای امنیتی سفارشی، کاهش خطرات XSS و CSRF، مدیریت کوکی‌های امن و اعتبارسنجی قدرتمند داده‌های Schema.

• مبانی React و JavaScript (۱۰٪):معماری کامپوننت‌های Server در مقابل Client، الگوهای مدیریت وضعیت عمیق، کاهش Prop Drilling، استفاده از Context API و اجرای پیشرفته JavaScript Runtime.

• استقرار و مقیاس‌بندی (۸٪):توزیع تولیدی با استفاده از Serverless Edge Deployment، الگوهای کانتینرسازی، Load Balancing چند منطقه‌ای، کشینگ stale-while-revalidate و ادغام با CDN جهانی.

• تست و دیباگ (۷٪):نوشتن Unit Testها، مدیریت تست‌های Integration ناهمگام، راه‌اندازی فریم‌ورک‌های تست End-to-End، تکنیک‌های دیباگ در مرورگر یا سمت سرور و Error Boundaries جهانی.

• مفاهیم پیشرفته Next.js (۱۰٪):پیکربندی مسیریابی بین‌المللی (i18n) پیچیده، تنظیمات Dynamic Routing، مسیرهای Catch-all یا Optional Catch-all و سفارشی‌سازی Wrapperهای اصلی مانند Custom Document و Custom App.

درباره این دوره

قبولی در مصاحبه‌های سطح بالای React یا Full-Stack Developer بسیار فراتر از ساخت یک اپلیکیشن وب ساده است. مقیاس‌های وب مدرن نیازمند تسلط مطلق بر استراتژی‌های رندرینگ، اجرای Edge، بهینه‌سازی دارایی‌ها و امنیت چندلایه است. من این بانک سوالات جامع را دقیقاً برای پر کردن شکاف بین ساخت پروژه‌های شخصی ساده و پاس کردن تست‌های مهندسی سخت‌گیرانه‌ی شرکت‌های تراز اول طراحی کرده‌ام.

با ۵۵۰ سوال بسیار تخصصی و اورجینال، این دوره کاملاً بر مفاهیم عمیق معماری، دیباگ کردن حالت‌های خاص (Edge Cases) و قضاوت مهندسی تمرکز دارد. به جای کوئیزهای ساده سینتکس، من معماهای واقعی اجرا، خطاهای جریان Middleware، رفتارهای کش قدیمی (Stale Cache) و عدم تطابق Hydration را تحلیل می‌کنم. هر سوال همراه با یک تحلیل متنی جامع است که توضیح می‌دهد چرا راهکار بهینه به این شکل عمل می‌کند و چرا انتخاب‌های مهندسی جایگزین در فشار محیط تولید (Production) شکست می‌خورند. چه متخصص فرانت-اند باشید که برای نقش توسعه‌دهنده پیشرفته Next.js آماده می‌شوید و چه مهندس فول-استکی که استراتژی‌های مقیاس‌بندی خود را اصلاح می‌کند، این منبع مطالعاتی جامع، آمادگی لازم برای عبور از مراحل فنی در اولین تلاش را فراهم می‌کند.

پیش‌نمایش نمونه سوالات تمرینی

این سه نمونه سوال را بررسی کنید تا عمق فنی و ساختار توضیحات ارائه شده در کل این بانک سوالات را درک کنید.

سوال ۱: حل مشکل Hydration Mismatch در محیط‌های رندرینگ ترکیبی

یک توسعه‌دهنده کامپوننتی را پیاده می‌کند که بر اساس زمان محلی سیستم کاربر، یک برچسب زمانی فرمت شده را نمایش می‌دهد. هنگام استفاده از Server-Side Rendering (SSR)، اپلیکیشن با موفقیت بارگذاری می‌شود اما یک هشدار شدید در کنسول مرورگر ظاهر می‌شود: "Hydration failed because the initial UI does not match what was rendered on the server."کدام تغییر معماری این عدم تطابق Runtime را حل می‌کند؟

• الف) اجبار کامپوننت به اجرا در یک Wrapper Middleware در لبه (Edge) با استفاده از یک قانون مسیریابی سفارشی.

• ب) قرار دادن بلوک متن محلی داخل یک المان معنایی استاندارد HTML5 <time> بدون هیچ جاوا اسکریپتی در سمت کلاینت.

• ج) استفاده از هوک useEffect برای به تعویق انداختن تولید و نمایش رشته زمان محلی تا پس از اولین Mount شدن در سمت کلاینت.

• د) تغییر پارامترهای پیکربندی جهانی در فایل کانفیگ کامپایل Next.js برای غیرفعال کردن کامل Code Splitting در صفحه مورد نظر.

• ه) تبدیل کل ساختار مسیر والد برای بهره‌برداری از Incremental Static Regeneration مطلق با زمان revalidation صفر.

• و) جایگزینی هوک‌های State استاندارد React با یک ابزار مدیریت وضعیت خارجی با کارایی بالا که به Context جهانی window متصل است.

پاسخ صحیح و توضیح:

• پاسخ صحیح: ج

• چرا درست است:عدم تطابق Hydration زمانی رخ می‌دهد که HTML پیش‌رندر شده در سرور Node با اولین درخت رندر شده توسط React در مرورگر کلاینت تفاوت داشته باشد. چون سرور رشته زمانی را در زمان Build/Request بر اساس منطقه زمانی سرور ارزیابی می‌کند و مرورگر کلاینت آن را بر اساس زمان محلی کاربر، رشته‌های متنی متفاوت می‌شوند. به تعویق انداختن تغییر وضعیت با هوک useEffect تضمین می‌کند که رندر اولیه کلاینت دقیقاً مشابه ساختار HTML تولید شده توسط سرور باشد و داده‌های محلی مخصوص کلاینت بلافاصله پس از Mount شدن موفق کامپوننت اعمال شوند.

• چرا گزینه‌های دیگر غلط هستند:

  • گزینه الف غلط است:Middleware لبه نمی‌تواند عدم تطابق گره‌های ساختاری UI را وصله کند؛ بلکه درخواست‌های ورودی را قبل از وقوع رندرینگ رهگیری می‌کند.

  • گزینه ب غلط است:تغییر المان‌های معنایی HTML تفاوت متنی زیربنایی را که باعث خطای React می‌شود، از بین نمی‌برد.

  • گزینه د غلط است:غیرفعال کردن Code Splitting باعث کاهش شدید معیارهای عملکرد می‌شود و هیچ تأثیری بر سازگاری Layout در هنگام Hydration ندارد.

  • گزینه ه غلط است:تنظیم تایمر revalidate در ISR روی صفر همچنان تولید اولیه را در سرور انجام می‌دهد و تفاوت منطقه زمانی را حفظ می‌کند.

  • گزینه و غلط است:ابزارهای مدیریت وضعیت جهانی خارجی اگر در مرزهای سرور و کلاینت متفاوت مقداردهی شوند، همچنان با بررسی‌های مشابه Hydration مواجه می‌شوند.

سوال ۲: حذف کش قدیمی در Incremental Static Regeneration (ISR)

یک سایت تجارت الکترونیک قیمت محصول را در دیتابیس بک‌اند به‌روزرسانی می‌کند. صفحه نمایش محصول از ISR با بازه revalidate تعریف شده ۶۰ ثانیه استفاده می‌کند. با این حال، کاربران ۱۰ دقیقه پس از به‌روزرسانی، همچنان قیمت‌های قدیمی را می‌بینند. علت ریشه‌ای این رفتار کشینگ مداوم چیست؟

• الف) فریم‌ورک Next.js هر زمان که مقادیر داده‌ها در دیتابیس‌های خارجی تغییر کند، به یک Build کامل اپلیکیشن نیاز دارد.

• ب) از زمان ثبت به‌روزرسانی قیمت در دیتابیس، هیچ کاربری عملاً از صفحه محصول خاص بازدید نکرده یا آن را درخواست نکرده است.

• ج) محیط مرورگر کلاینت تمام سیاست‌های ذخیره‌سازی کوکی محلی را غیرفعال کرده است که باعث مسدود شدن revalidation در پس‌زمینه می‌شود.

• د) بلوک کد سمت سرور فاقد هدرهای امنیتی است که باعث می‌شود لایه‌های Edge CDN به قوانین کشینگ دائمی بازگردند.

• ه) لایه مسیریابی API داخلی به‌طور خودکار به‌روزرسانی‌های جلب داده را زمانی که درخواست‌ها توسط خزنده‌های موتور جستجو (Web Crawlers) ارسال شوند، رد می‌کند.

• و) صفحه به شدت به هوک‌های وضعیت سمت کلاینت متکی است که Payload HTML بازگردانده شده توسط زیرساخت سرور را بازنویسی می‌کنند.

پاسخ صحیح و توضیح:

• پاسخ صحیح: ب

• چرا درست است:ISR اساساً توسط ترافیک هدایت می‌شود. ویژگی revalidate یک بازه استراحت (Cooldown) را مشخص می‌کند، نه یک تایمر Cron Job در پس‌زمینه. وقتی کاربری پس از انقضای بازه ۶۰ ثانیه‌ای درخواست صفحه را می‌دهد، Next.js ابتدا صفحه کش شده قدیمی را ارائه می‌دهد و هم‌زمان به‌طور مخفیانه بازسازی داده‌های صفحه در پس‌زمینه را فعال می‌کند. اگر هیچ بازدیدکننده جدیدی پس از به‌روزرسانی دیتابیس به آن مسیر خاص نزند، فرآیند بازسازی پس‌زمینه هرگز اجرا نمی‌شود و فایل استاتیک قدیمی روی سرور می‌ماند تا زمانی که اولین درخواست آن را به حرکت درآورد.

• چرا گزینه‌های دیگر غلط هستند:

  • گزینه الف غلط است:هدف اصلی ISR این است که اجازه دهد داده‌ها بدون نیاز به Build کامل و خسته‌کننده اپلیکیشن به‌روز شوند.

  • گزینه ج غلط است:کوکی‌های مرورگر کاملاً مستقل از روتین‌های تولید صفحه استاتیک سمت سرور و revalidation عمل می‌کنند.

  • گزینه د غلط است:هدرهای امنیتی سفارشی از اپلیکیشن در برابر تزریق اسکریپت محافظت می‌کنند اما مکانیسم‌های داخلی فایل‌سیستم ISR را تعیین نمی‌کنند.

  • گزینه ه غلط است:خزنده‌های وب در واقع ضربات استاندارد به مسیرها می‌زنند که در صورت برخورد با یک مسیر ISR منقضی شده، فعالانه باعث بازسازی در پس‌زمینه می‌شوند.

  • گزینه و غلط است:اگرچه وضعیت‌های کلاینت می‌توانند Layoutهای فعلی را تغییر دهند، اما توضیح نمی‌دهند که چرا صفحه استاتیک پایه برای چندین کاربر به مدت ۱۰ دقیقه به‌طور جهانی قدیمی می‌ماند.

سوال ۳: اولویت‌بندی در مسیریابی Dynamic Catch-All

یک توسعه‌دهنده سلسله‌مراتب پوشه‌های اپلیکیشن را با استفاده از Router سنتی فایل‌سیستم می‌سازد. پروژه دارای سه ساختار مسیر صریح است: pages/posts/[id].js، pages/posts/[...slug].js و pages/posts/trending.js. وقتی کلاینت دقیقاً به مسیر /posts/trending می‌رود، کدام فایل درخواست را اجرا می‌کند؟

• الف) فایل مسیر Dynamic Catch-all یعنی [...slug].js اولویت کامل نسبت به تمام واریانت‌های تطبیق مسیر خاص دارد.

• ب) فایل مسیر داینامیک تکی [id].js اجرا می‌شود زیرا با الگوی تک‌بخش (Single Segment) کاملاً مطابقت دارد.

• ج) فایل استاتیک مسیر خاص trending.js اجرا می‌شود زیرا مسیرهای از پیش تعریف شده همیشه اولویت دارند.

• د) Next.js بلافاصله یک خطای Build می‌دهد با این عنوان که چندین مسیر داینامیک با یکدیگر در تضاد هستند.

• ه) اپلیکیشن در زمان اجرا کرش می‌کند زیرا سرور نمی‌تواند مرز قطعی Layout را تعیین کند.

• و) Wrapper لایه Layout جهانی کاملاً ساختار زیرپوشه را دور می‌زند و به ریشه قالب صفحه اصلی باز می‌گردد.

پاسخ صحیح و توضیح:

• پاسخ صحیح: ج

• چرا درست است:Next.js از یک مدل اولویت‌بندی مسیریابی قطعی برای حذف ابهام در مسیرها استفاده می‌کند. مسیرهای استاتیک از پیش تعریف شده همیشه اولویت مطلق نسبت به مسیرهای داینامیک تک‌بخش دارند و مسیرهای داینامیک تک‌بخش اولویت بیشتری نسبت به مسیرهای Catch-all چندبخش دارند. بنابراین، درخواست به /posts/trending همیشه به‌طور تمیز به فایل استاتیک trending.js نگاشت می‌شود.

• چرا گزینه‌های دیگر غلط هستند:

  • گزینه الف غلط است:مسیرهای Catch-all کمترین اولویت تطبیق را دارند زیرا برای رهگیری هرگونه الگوی ساختاری باقی‌مانده طراحی شده‌اند.

  • گزینه ب غلط است:مسیرهای داینامیک تکی تنها زمانی ارزیابی می‌شوند که هیچ فایل مسیر استاتیک صریحی در آن عمق پوشه پیدا نشود.

  • گزینه د غلط است:این چیدمان پوشه‌ها کاملاً معتبر است و به‌طور تمیز کامپایل می‌شود؛ فریم‌ورک مسیریابی را از طریق معیارهای وزنی داخلی حل می‌کند.

  • گزینه ه غلط است:اجرای Runtime به دلیل معیارهای تطبیق پیش‌بینی‌پذیر پیکربندی شده در هسته مسیریابی فریم‌ورک، روان و امن باقی می‌ماند.

  • گزینه و غلط است:سیستم تطبیق فایل‌سیستم، تطبیق‌های دایرکتوری خاص را قبل از بازگشت به قالب‌های جهانی تعمیم‌یافته حل می‌کند.

چه انتظاراتی داشته باشید

• به تست‌های سوالات مصاحبه خوش آمدید تا شما را برای آزمون تمرینی سوالات مصاحبه Next.js آماده کنیم.

• شما می‌توانید هر تعداد بار که بخواهید در آزمون‌ها شرکت کنید.

• این یک بانک سوالات اورجینال و عظیم است.

• اگر سوالی داشته باشید، از پشتیبانی مدرسان بهره‌مند می‌شوید.

• هر سوال دارای یک توضیح دقیق است.

• سازگار با موبایل از طریق اپلیکیشن Udemy.

امیدواریم تا الان متقاعد شده باشید! سوالات بسیار بیشتری در داخل دوره وجود دارد.