تسلط در مصاحبه Next.js: سؤالات اساسی 1-10 (قسمت 1)

Summarize this content to 400 words in Persian Lang
با راهنمای مصاحبه Next.js تمام پتانسیل خود را در تسلط بر Next.js باز کنید: 100+ پرسش و پاسخ برای موفقیت 📘. چه بهتازگی بهعنوان یک توسعهدهنده شروع به کار کردهاید یا یک حرفهای با تجربه هستید که به دنبال ارتقای مهارتهای خود به سطح بعدی هستید، این کتاب الکترونیکی جامع برای کمک به شما در مصاحبههای Next.js و تبدیل شدن به فردی مطمئن و آماده برای کار طراحی شده است. توسعه دهنده این راهنما طیف گستردهای از موضوعات Next.js را پوشش میدهد و اطمینان میدهد که برای هر سؤالی که ممکن است برایتان پیش بیاید به خوبی آماده هستید. این کتاب الکترونیکی مفاهیم کلیدی مانند رندر سمت سرور (SSR) 🌍، تولید سایت استاتیک (SSG) را بررسی میکند. ) 📄، بازسازی استاتیک افزایشی (ISR) ⏳، روتر برنامه 🛤️، واکشی داده 🔄، و موارد دیگر. هر موضوع به طور کامل توضیح داده شده است، نمونههای واقعی و پاسخهای دقیق به متداولترین سؤالات مصاحبه ارائه میشود. این راهنما علاوه بر پاسخ به سؤالات، بهترین روشها را برای بهینهسازی برنامههای Next.js، بهبود عملکرد ⚡ و اطمینان از مقیاسپذیری برجسته میکند. با پیشرفت مداوم Next.js، ما همچنین به ویژگیهای پیشرفته مانند React 18، Rendering همزمان و Suspense 🔄 می پردازیم. این باعث میشود که همیشه با آخرین پیشرفتها بهروز باشید، و شما را با دانشی که مصاحبهکنندگان به دنبال آن هستند مجهز میکنید. آنچه این راهنما را متمایز میکند، رویکرد عملی آن است. این فقط تئوری را پوشش نمی دهد، بلکه بینش های عملی را ارائه می دهد که می توانید مستقیماً در پروژه های خود اعمال کنید. امنیت 🔒، بهینه سازی SEO 🌐، و شیوه های استقرار 🖥️ همچنین به تفصیل مورد بررسی قرار می گیرند تا اطمینان حاصل شود که شما برای چرخه عمر کامل توسعه آماده هستید. چه در حال آماده شدن برای یک مصاحبه فنی در یک شرکت فناوری برتر باشید و چه به دنبال ساخت کارآمدتر و مقیاس پذیر باشید. این راهنما به شما کمک می کند تا مهارت های Next.js خود را تقویت کنید و از رقبا متمایز شوید. در پایان این کتاب، شما آماده خواهید بود که با اطمینان به هر سوال مصاحبه Next.js، از مفاهیم اساسی گرفته تا چالشهای سطح متخصص پاسخ دهید. خود را به دانشی مجهز کنید تا بهعنوان یک توسعهدهنده Next.js عالی باشید 🚀 و با اطمینان وارد شوید. فرصت شغلی بعدی شما
cyroscript.gumroad.com
1. Next.js چیست؟
Next.js یک چارچوب محبوب منبع باز React است که بر روی Node.js ساخته شده است که به توسعه دهندگان امکان می دهد وب سایت های رندر شده (SSR) و استاتیک را ایجاد کنند. این برنامه توسعه وب را با ارائه ویژگی هایی مانند مسیریابی مبتنی بر فایل، تقسیم خودکار کد، مسیرهای API و بهینه سازی برای عملکرد و سئو ساده می کند.
2. ویژگی های کلیدی Next.js چیست؟
رندر سمت سرور (SSR): Next.js اجازه می دهد تا کامپوننت های React را قبل از ارسال به کلاینت بر روی سرور رندر کرده و عملکرد و سئو را بهبود بخشد.
تولید سایت استاتیک (SSG): این صفحات را در زمان ساخت از قبل رندر می کند که برای وبلاگ ها یا سایت های تجارت الکترونیک مفید است.
مسیرهای API: شما می توانید با استفاده از مسیرهای API در همان پایگاه کد بدون نیاز به سرور خارجی یک Backend بسازید.
مسیریابی مبتنی بر فایل: Next.js به طور خودکار مسیرهایی را بر اساس ساختار فایل در داخل ایجاد می کند pages دایرکتوری
رندر سمت مشتری (CSR): همانند React، Next.js نیز از رندر سنتی سمت کلاینت پشتیبانی می کند.
بهینه سازی تصویر: قابلیت های داخلی بهینه سازی تصویر که اندازه تصویر را کاهش می دهد و زمان بارگذاری را افزایش می دهد.
تقسیم خودکار کد: Next.js کد را به بستههای کوچکتری تقسیم میکند، که فقط در صورت نیاز بارگیری میشوند و عملکرد را بهبود میبخشند.
پشتیبانی TypeScript: پشتیبانی بومی از TypeScript، امکان تایپ دقیق و تجربه بهتر توسعه دهنده را فراهم می کند.
بازسازی استاتیک افزایشی (ISR): صفحات را می توان به صورت ایستا در زمان اجرا تولید کرد و به صورت تدریجی به روز کرد.
تازه سازی سریع: یک حلقه بازخورد فوری در هنگام کدنویسی، مشابه بارگذاری مجدد داغ React ارائه می دهد.
3. چه تفاوت هایی بین Next.js و React.js وجود دارد
Next.js یک چارچوب مبتنی بر React است که ویژگیهای قدرتمندی مانند رندر سمت سرور، تولید سایت استاتیک، مسیریابی مبتنی بر فایل و موارد دیگر را اضافه میکند و توسعهدهندگان را قادر میسازد تا برنامههای وب بسیار بهینهشده بسازند. از سوی دیگر، React.js یک کتابخانه جاوا اسکریپت برای ساخت رابط های کاربری است که در درجه اول بر روی رندر سمت مشتری متمرکز است. بیایید تفاوت های کلیدی بین Next.js و React.js را در جدول زیر بررسی کنیم:
ویژگی
Next.js
React.js
رندرینگ
از رندر سمت سرور (SSR)، تولید سایت استاتیک (SSG) و رندر سمت مشتری (CSR) پشتیبانی می کند.
به طور پیش فرض فقط از رندر سمت مشتری (CSR) پشتیبانی می کند.
مسیریابی
سیستم مسیریابی مبتنی بر فایل داخلی. به طور خودکار مسیرها را بر اساس ساختار پوشه ایجاد می کند.
بدون مسیریابی داخلی به کتابخانه هایی مانند React Router نیاز دارد.
سئو
برای SEO عالی است زیرا از SSR و SSG پشتیبانی می کند و به محتوای از پیش رندر شده اجازه می دهد تا توسط موتورهای جستجو نمایه شود.
قابلیت های محدود SEO به دلیل رندر سمت مشتری. کارهای بیشتری برای بهینه سازی سئو مورد نیاز است.
عملکرد
بارگذاری صفحه اولیه سریعتر به دلیل SSR، تقسیم خودکار کد و تولید استاتیک.
ممکن است برای برنامه های بزرگ صفحه کندتر بارگیری شود زیرا همه چیز در کلاینت ارائه می شود.
پیکربندی
حداقل پیکربندی مورد نیاز است. همراه با SSR، SSG، و مسیریابی خارج از جعبه.
به تنظیم دستی برای SSR، مسیریابی و سایر ویژگی های پیشرفته نیاز دارد.
منحنی یادگیری
به دلیل ویژگیهای پیشرفته داخلی مانند مسیرهای SSR، SSG و API کمی تندتر.
یادگیری در ابتدا آسان تر است، اما به ابزارهای اضافی برای SSR و مسیریابی نیاز دارد.
مسیرهای API
مسیرهای API داخلی که می توانند منطق باطن را در همان پروژه مدیریت کنند.
عدم پشتیبانی از مسیرهای API. برای توسعه باطن به ابزارهای خارجی نیاز دارد.
تقسیم کد
به طور خودکار کد را به بستههای کوچکتر تقسیم میکند و فقط آنچه را که برای یک صفحه خاص لازم است بارگیری میکند.
به تقسیم کد دستی یا استفاده از بارگذاری تنبل برای بهینه سازی عملکرد نیاز دارد.
استقرار
برای استقرار آسان در پلتفرم هایی مانند Vercel (سازندگان Next.js) بهینه شده و از عملکردهای بدون سرور پشتیبانی می کند.
استقرار معمولاً به پیکربندی اضافی برای میزبانی بهینه و SSR نیاز دارد.
بهینه سازی تصویر
داخلی دارد Image جزء برای تغییر اندازه و بهینه سازی خودکار تصویر.
بهینه سازی تصویر را ارائه نمی دهد. توسعه دهندگان برای این کار به کتابخانه های شخص ثالث نیاز دارند.
4. مزایای استفاده از Next.js نسبت به React.js چیست؟
Next.js چندین مزیت نسبت به React.js دارد:
رندر سمت سرور (SSR): Next.js SSR را فعال می کند، عملکرد و SEO را با پیش رندر کردن صفحات در سرور بهبود می بخشد.
تولید سایت استاتیک (SSG): صفحات را می توان به صورت ایستا در زمان ساخت برای بهبود عملکرد و مقیاس پذیری تولید کرد.
مسیریابی داخلی: بر خلاف React.js، Next.js دارای یک سیستم مسیریابی مبتنی بر فایل است که نیاز به کتابخانه های مسیریابی شخص ثالث را کاهش می دهد.
مسیرهای API: میتوانید مسیرهای API Backend را در Next.js بدون نیاز به سرور جداگانه ایجاد کنید.
تقسیم خودکار کد: کد به طور خودکار به بسته های کوچکتر تقسیم می شود و زمان بارگذاری صفحه را بهبود می بخشد.
بهینه سازی تصویر: Next.js بهینه سازی داخلی تصویر، افزایش سرعت بارگذاری و تجربه کاربر را ارائه می دهد.
5. رندر سمت سرور (SSR) در Next.js چگونه کار می کند؟
در Next.js، رندر سمت سرور (SSR) با رندر کردن صفحات روی سرور در زمان درخواست کار می کند. هنگامی که یک درخواست انجام می شود، Next.js داده های لازم را واکشی می کند و مؤلفه ها را در سرور ارائه می دهد و HTML کاملاً رندر شده را به مشتری برمی گرداند. این باعث بهبود عملکرد و سئو می شود. SSR با استفاده از یک تابع سرور پیاده سازی می شود، که تضمین می کند که محتوای پویا در هر درخواست واکشی و ارائه می شود.
6. Static Site Generation (SSG) در Next.js چیست و چه زمانی از آن استفاده می کنید؟
Static Site Generation (SSG) در Next.js به صفحات اجازه می دهد تا در زمان ساخت از قبل رندر شوند و فایل های HTML ایستا تولید کنند که می توانند به کاربران ارائه شوند. این برای صفحاتی که نیازی به به روز رسانی مکرر ندارند، مانند وبلاگ ها یا صفحات محصول مفید است. SSG عملکرد و مقیاس پذیری را بهبود می بخشد زیرا محتوا از قبل رندر شده و در حافظه پنهان است. می توانید از یک تابع ویژه برای واکشی داده ها در طول فرآیند ساخت استفاده کنید.
7. مسیرهای API در Next.js چیست و چگونه کار می کنند؟
مسیرهای API در Next.js به شما این امکان را می دهند که منطق باطن را مستقیماً در داخل برنامه بدون نیاز به سرور خارجی ایجاد کنید. شما مسیرهای API را در یک دایرکتوری خاص تعریف می کنید و هر فایل مربوط به یک نقطه پایانی API متفاوت است. این مسیرها میتوانند روشهای مختلف HTTP (GET، POST، و غیره) را مدیریت کنند، که آنها را برای ایجاد سرویسهای باطنی مانند احراز هویت، ارسال فرم یا مدیریت APIهای شخص ثالث مناسب میسازد.
به عنوان مثال، ایجاد یک فایل در یک فهرست خاص به طور خودکار یک نقطه پایانی مانند ایجاد می کند /api/user.
8. Incremental Static Regeneration (ISR) در Next.js چیست و چه تفاوتی با SSG دارد؟
بازسازی استاتیک افزایشی (ISR) به صفحات استاتیک اجازه می دهد تا پس از زمان ساخت به روز شوند. با ISR، میتوانید یک بازه زمانی مشخص کنید که بعد از آن Next.js صفحه را در پسزمینه بازسازی میکند. این به شما امکان می دهد بدون بازسازی کل سایت، محتوا را به روز نگه دارید. در مقابل، Static Site Generation (SSG) تنها یک بار در زمان ساخت صفحات را می سازد و برای به روز رسانی محتوا باید سایت را بازسازی کنید.
9. چگونه مسیرهای پویا را در Next.js مدیریت می کنید؟
در Next.js، مسیرهای پویا با تعریف فایل هایی با براکت مربع در نام آنها ایجاد می شوند. به عنوان مثال، یک فایل به نام [id].js مسیرهایی مانند /user/1 یا /user/2. برای واکشی یا نمایش داده های خاص بر اساس URL می توانید به پارامترهای پویا در داخل اجزای خود دسترسی داشته باشید. مسیریابی پویا همچنین می تواند مسیرهای تودرتو و پارامترهای متعدد را مدیریت کند.
10. تقسیم کد در Next.js چگونه کار می کند؟
Next.js به طور خودکار تقسیم کد را با ایجاد بسته های جاوا اسکریپت جداگانه برای هر صفحه پیاده سازی می کند. هنگامی که کاربر به صفحه ای هدایت می شود، تنها کد مورد نیاز برای آن صفحه خاص بارگیری می شود و حجم کلی جاوا اسکریپتی را که مشتری باید دانلود کند کاهش می دهد. این منجر به زمان بارگذاری سریعتر و بهبود عملکرد می شود. Next.js بدون پیکربندی دستی، کدها را از جعبه جدا می کند.
1. Next.js چیست؟
Next.js یک چارچوب محبوب منبع باز React است که بر روی Node.js ساخته شده است که به توسعه دهندگان امکان می دهد وب سایت های رندر شده (SSR) و استاتیک را ایجاد کنند. این برنامه توسعه وب را با ارائه ویژگی هایی مانند مسیریابی مبتنی بر فایل، تقسیم خودکار کد، مسیرهای API و بهینه سازی برای عملکرد و سئو ساده می کند.
2. ویژگی های کلیدی Next.js چیست؟
- رندر سمت سرور (SSR): Next.js اجازه می دهد تا کامپوننت های React را قبل از ارسال به کلاینت بر روی سرور رندر کرده و عملکرد و سئو را بهبود بخشد.
- تولید سایت استاتیک (SSG): این صفحات را در زمان ساخت از قبل رندر می کند که برای وبلاگ ها یا سایت های تجارت الکترونیک مفید است.
- مسیرهای API: شما می توانید با استفاده از مسیرهای API در همان پایگاه کد بدون نیاز به سرور خارجی یک Backend بسازید.
-
مسیریابی مبتنی بر فایل: Next.js به طور خودکار مسیرهایی را بر اساس ساختار فایل در داخل ایجاد می کند
pages
دایرکتوری - رندر سمت مشتری (CSR): همانند React، Next.js نیز از رندر سنتی سمت کلاینت پشتیبانی می کند.
- بهینه سازی تصویر: قابلیت های داخلی بهینه سازی تصویر که اندازه تصویر را کاهش می دهد و زمان بارگذاری را افزایش می دهد.
- تقسیم خودکار کد: Next.js کد را به بستههای کوچکتری تقسیم میکند، که فقط در صورت نیاز بارگیری میشوند و عملکرد را بهبود میبخشند.
- پشتیبانی TypeScript: پشتیبانی بومی از TypeScript، امکان تایپ دقیق و تجربه بهتر توسعه دهنده را فراهم می کند.
- بازسازی استاتیک افزایشی (ISR): صفحات را می توان به صورت ایستا در زمان اجرا تولید کرد و به صورت تدریجی به روز کرد.
- تازه سازی سریع: یک حلقه بازخورد فوری در هنگام کدنویسی، مشابه بارگذاری مجدد داغ React ارائه می دهد.
3. چه تفاوت هایی بین Next.js و React.js وجود دارد
Next.js یک چارچوب مبتنی بر React است که ویژگیهای قدرتمندی مانند رندر سمت سرور، تولید سایت استاتیک، مسیریابی مبتنی بر فایل و موارد دیگر را اضافه میکند و توسعهدهندگان را قادر میسازد تا برنامههای وب بسیار بهینهشده بسازند. از سوی دیگر، React.js یک کتابخانه جاوا اسکریپت برای ساخت رابط های کاربری است که در درجه اول بر روی رندر سمت مشتری متمرکز است. بیایید تفاوت های کلیدی بین Next.js و React.js را در جدول زیر بررسی کنیم:
ویژگی | Next.js | React.js |
---|---|---|
رندرینگ | از رندر سمت سرور (SSR)، تولید سایت استاتیک (SSG) و رندر سمت مشتری (CSR) پشتیبانی می کند. | به طور پیش فرض فقط از رندر سمت مشتری (CSR) پشتیبانی می کند. |
مسیریابی | سیستم مسیریابی مبتنی بر فایل داخلی. به طور خودکار مسیرها را بر اساس ساختار پوشه ایجاد می کند. | بدون مسیریابی داخلی به کتابخانه هایی مانند React Router نیاز دارد. |
سئو | برای SEO عالی است زیرا از SSR و SSG پشتیبانی می کند و به محتوای از پیش رندر شده اجازه می دهد تا توسط موتورهای جستجو نمایه شود. | قابلیت های محدود SEO به دلیل رندر سمت مشتری. کارهای بیشتری برای بهینه سازی سئو مورد نیاز است. |
عملکرد | بارگذاری صفحه اولیه سریعتر به دلیل SSR، تقسیم خودکار کد و تولید استاتیک. | ممکن است برای برنامه های بزرگ صفحه کندتر بارگیری شود زیرا همه چیز در کلاینت ارائه می شود. |
پیکربندی | حداقل پیکربندی مورد نیاز است. همراه با SSR، SSG، و مسیریابی خارج از جعبه. | به تنظیم دستی برای SSR، مسیریابی و سایر ویژگی های پیشرفته نیاز دارد. |
منحنی یادگیری | به دلیل ویژگیهای پیشرفته داخلی مانند مسیرهای SSR، SSG و API کمی تندتر. | یادگیری در ابتدا آسان تر است، اما به ابزارهای اضافی برای SSR و مسیریابی نیاز دارد. |
مسیرهای API | مسیرهای API داخلی که می توانند منطق باطن را در همان پروژه مدیریت کنند. | عدم پشتیبانی از مسیرهای API. برای توسعه باطن به ابزارهای خارجی نیاز دارد. |
تقسیم کد | به طور خودکار کد را به بستههای کوچکتر تقسیم میکند و فقط آنچه را که برای یک صفحه خاص لازم است بارگیری میکند. | به تقسیم کد دستی یا استفاده از بارگذاری تنبل برای بهینه سازی عملکرد نیاز دارد. |
استقرار | برای استقرار آسان در پلتفرم هایی مانند Vercel (سازندگان Next.js) بهینه شده و از عملکردهای بدون سرور پشتیبانی می کند. | استقرار معمولاً به پیکربندی اضافی برای میزبانی بهینه و SSR نیاز دارد. |
بهینه سازی تصویر | داخلی دارد Image جزء برای تغییر اندازه و بهینه سازی خودکار تصویر. |
بهینه سازی تصویر را ارائه نمی دهد. توسعه دهندگان برای این کار به کتابخانه های شخص ثالث نیاز دارند. |
4. مزایای استفاده از Next.js نسبت به React.js چیست؟
Next.js چندین مزیت نسبت به React.js دارد:
- رندر سمت سرور (SSR): Next.js SSR را فعال می کند، عملکرد و SEO را با پیش رندر کردن صفحات در سرور بهبود می بخشد.
- تولید سایت استاتیک (SSG): صفحات را می توان به صورت ایستا در زمان ساخت برای بهبود عملکرد و مقیاس پذیری تولید کرد.
- مسیریابی داخلی: بر خلاف React.js، Next.js دارای یک سیستم مسیریابی مبتنی بر فایل است که نیاز به کتابخانه های مسیریابی شخص ثالث را کاهش می دهد.
- مسیرهای API: میتوانید مسیرهای API Backend را در Next.js بدون نیاز به سرور جداگانه ایجاد کنید.
- تقسیم خودکار کد: کد به طور خودکار به بسته های کوچکتر تقسیم می شود و زمان بارگذاری صفحه را بهبود می بخشد.
- بهینه سازی تصویر: Next.js بهینه سازی داخلی تصویر، افزایش سرعت بارگذاری و تجربه کاربر را ارائه می دهد.
5. رندر سمت سرور (SSR) در Next.js چگونه کار می کند؟
در Next.js، رندر سمت سرور (SSR) با رندر کردن صفحات روی سرور در زمان درخواست کار می کند. هنگامی که یک درخواست انجام می شود، Next.js داده های لازم را واکشی می کند و مؤلفه ها را در سرور ارائه می دهد و HTML کاملاً رندر شده را به مشتری برمی گرداند. این باعث بهبود عملکرد و سئو می شود. SSR با استفاده از یک تابع سرور پیاده سازی می شود، که تضمین می کند که محتوای پویا در هر درخواست واکشی و ارائه می شود.
6. Static Site Generation (SSG) در Next.js چیست و چه زمانی از آن استفاده می کنید؟
Static Site Generation (SSG) در Next.js به صفحات اجازه می دهد تا در زمان ساخت از قبل رندر شوند و فایل های HTML ایستا تولید کنند که می توانند به کاربران ارائه شوند. این برای صفحاتی که نیازی به به روز رسانی مکرر ندارند، مانند وبلاگ ها یا صفحات محصول مفید است. SSG عملکرد و مقیاس پذیری را بهبود می بخشد زیرا محتوا از قبل رندر شده و در حافظه پنهان است. می توانید از یک تابع ویژه برای واکشی داده ها در طول فرآیند ساخت استفاده کنید.
7. مسیرهای API در Next.js چیست و چگونه کار می کنند؟
مسیرهای API در Next.js به شما این امکان را می دهند که منطق باطن را مستقیماً در داخل برنامه بدون نیاز به سرور خارجی ایجاد کنید. شما مسیرهای API را در یک دایرکتوری خاص تعریف می کنید و هر فایل مربوط به یک نقطه پایانی API متفاوت است. این مسیرها میتوانند روشهای مختلف HTTP (GET، POST، و غیره) را مدیریت کنند، که آنها را برای ایجاد سرویسهای باطنی مانند احراز هویت، ارسال فرم یا مدیریت APIهای شخص ثالث مناسب میسازد.
به عنوان مثال، ایجاد یک فایل در یک فهرست خاص به طور خودکار یک نقطه پایانی مانند ایجاد می کند /api/user
.
8. Incremental Static Regeneration (ISR) در Next.js چیست و چه تفاوتی با SSG دارد؟
بازسازی استاتیک افزایشی (ISR) به صفحات استاتیک اجازه می دهد تا پس از زمان ساخت به روز شوند. با ISR، میتوانید یک بازه زمانی مشخص کنید که بعد از آن Next.js صفحه را در پسزمینه بازسازی میکند. این به شما امکان می دهد بدون بازسازی کل سایت، محتوا را به روز نگه دارید. در مقابل، Static Site Generation (SSG) تنها یک بار در زمان ساخت صفحات را می سازد و برای به روز رسانی محتوا باید سایت را بازسازی کنید.
9. چگونه مسیرهای پویا را در Next.js مدیریت می کنید؟
در Next.js، مسیرهای پویا با تعریف فایل هایی با براکت مربع در نام آنها ایجاد می شوند. به عنوان مثال، یک فایل به نام [id].js
مسیرهایی مانند /user/1
یا /user/2
. برای واکشی یا نمایش داده های خاص بر اساس URL می توانید به پارامترهای پویا در داخل اجزای خود دسترسی داشته باشید. مسیریابی پویا همچنین می تواند مسیرهای تودرتو و پارامترهای متعدد را مدیریت کند.
10. تقسیم کد در Next.js چگونه کار می کند؟
Next.js به طور خودکار تقسیم کد را با ایجاد بسته های جاوا اسکریپت جداگانه برای هر صفحه پیاده سازی می کند. هنگامی که کاربر به صفحه ای هدایت می شود، تنها کد مورد نیاز برای آن صفحه خاص بارگیری می شود و حجم کلی جاوا اسکریپتی را که مشتری باید دانلود کند کاهش می دهد. این منجر به زمان بارگذاری سریعتر و بهبود عملکرد می شود. Next.js بدون پیکربندی دستی، کدها را از جعبه جدا می کند.