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

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

81. قراردادهای واکشی داده در App Router چیست و چه تفاوتی با مسیریاب صفحات دارد؟

در Next.js با روتر برنامه، واکشی داده ها از قراردادهای جدیدی پیروی می کند که با قراردادهای قدیمی متفاوت است روتر صفحات رویکرد

واکشی اطلاعات روتر برنامه:

واکشی داده های سمت سرور در App Router با استفاده از آن انجام می شود async توابع در کد سطح جزء واکشی داده‌ها می‌تواند مستقیماً در کامپوننت استفاده شود useEffect یا جدید getServerSidePropsمانند تابع است، اما بیشتر با ساختار جزء ادغام می شود.

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

واکشی داده های موازی: App Router اجازه می دهد تا چندین عملیات واکشی داده را به صورت موازی اجرا کنند (با بازگرداندن مجموعه ای از وعده ها)، که کارآمدتر از واکشی متوالی داده های پیج روتر است.

جریان و تعلیق: App Router از React Suspense و استریم استفاده می‌کند و به صفحات اجازه می‌دهد در حالی که سایر داده‌ها هنوز در حال واکشی هستند، جریان داشته باشند و عملکرد را بهبود بخشد.

واکشی داده های روتر صفحات:

واکشی داده ها در مسیریاب صفحات از روش های سنتی مانند getServerSideProps، getStaticProps، و getInitialProps. این توابع در سطح صفحه فراخوانی می شوند و رویکرد ایستا یا محدود به سرور دارند.

بدون طرح‌بندی تودرتو: در مسیریاب صفحات، داده ها معمولاً در هر صفحه واکشی می شوند و هیچ مفهومی از واکشی داده در سطح طرح یا واکشی داده های موازی مانند روتر برنامه وجود ندارد.

رندر سنکرون: بر خلاف مسیریاب برنامه، که در آن داده ها می توانند به صورت ناهمزمان واکشی شوند و به صفحه منتقل شوند، مسیریاب صفحات به طور سنتی قبل از رندر کردن صفحه منتظر می ماند تا همه داده ها واکشی شوند.

به طور خلاصه:

روتر برنامه واکشی داده های انعطاف پذیرتر، موازی و جریانی تر را با یکپارچگی بیشتر در سطوح مؤلفه و چیدمان معرفی می کند.

روتر صفحات متکی بر روش های واکشی داده های استاتیک و سمت سرور خاص صفحه است.

82. نقش چیست async اجزای موجود در Next.js، و چرا در روتر برنامه مفید هستند؟

در Next.js با روتر برنامه، async کامپوننت ها برای فعال کردن استفاده می شوند رندر سمت سرور (SSR) برای اجزایی که نیاز به واکشی داده ها به صورت ناهمزمان دارند. این مؤلفه‌ها برای سناریوهایی که داده‌ها قبل از رندر کردن مؤلفه مورد نیاز است، اما باید از یک سرور یا API خارجی واکشی شوند، مفید هستند. با استفاده از async اجزا به Next.js اجازه می دهد تا بهینه سازی فرآیند رندر با واکشی داده های لازم قبل از رندر شدن کامپوننت در سرور، بهبود عملکرد و سئو.

چرا آنها در App Router مفید هستند؟

واکشی داده ها بهبود یافته است: async اجزا اجازه می دهد واکشی داده های موازی، به این معنی که چندین قطعه داده را می توان به صورت موازی در طول SSR یا در طرح بندی ها واکشی کرد که زمان بارگذاری را بهبود می بخشد.

عملکرد تقویت شده: از آنجایی که داده‌ها از سمت سرور واکشی می‌شوند و قبل از رندر به مؤلفه منتقل می‌شوند، نیاز به انتظار روی داده‌ها برای بارگیری سمت مشتری را از بین می‌برد و منجر به تجربه کاربر سریع‌تر می‌شود.

ادغام با Suspense: async ماهیت این مؤلفه‌ها به خوبی با React 18's Suspense ادغام می‌شود و به مؤلفه‌ها اجازه می‌دهد تا «تعلیق» رندرینگ تا زمانی که داده‌ها واکشی شوند، تجربه کاربر را بهبود می‌بخشد و برنامه را مقیاس‌پذیرتر می‌کند.

83. چگونه App Router واکشی داده ها را با ویژگی های جدید React 18 ساده می کند؟

را روتر برنامه عمدتاً با معرفی ویژگی‌های React 18 واکشی داده‌ها را ساده می‌کند تعلیق و رندر همزمان. این ویژگی‌ها به Next.js اجازه می‌دهند تا واکشی داده‌ها را به شیوه‌ای کارآمدتر، انعطاف‌پذیرتر و ساده‌تر انجام دهد:

تعلیق برای واکشی داده ها:

روتر برنامه به طور کامل پشتیبانی می کند تعلیقکامپوننت‌های React را قادر می‌سازد تا زمانی که منتظر تکمیل عملیات ناهمزمان (مانند واکشی داده) هستند، رندر را به حالت تعلیق درآورند. این امر رسیدگی به حالت های بارگیری و عملیات ناهمزمان در رابط کاربری را آسان تر می کند.
واکشی داده‌ها را می‌توان به‌صورت ناهمزمان در خود مؤلفه‌ها انجام داد و Suspense به شما اجازه می‌دهد تا وضعیت‌های بارگذاری مؤلفه‌های منتظر داده را مدیریت کنید.

رندر همزمان:

با React 18 رندر همزمان، Next.js می تواند مؤلفه ها را در پس زمینه رندر کند و به روز رسانی های با اولویت بالا را در اولویت قرار دهد. این به این معنی است که واکشی داده‌ها می‌تواند در کنار رندر اتفاق بیفتد و React می‌تواند تصمیم بگیرد که کدام مؤلفه‌ها را ابتدا بر اساس اهمیت رندر کند که منجر به بارگذاری سریع‌تر صفحه و تجربه کاربری بهتر می‌شود.
را روتر برنامه از این مزیت استفاده می کند و به چندین عملیات واکشی داده اجازه می دهد تا همزمان اجرا شوند و بارگذاری صفحات پیچیده ای را که به داده هایی از منابع مختلف نیاز دارند آسان تر می کند.

جریان داده ها:

App Router همچنین اجازه می دهد تا داده ها به صورت موازی پخش شوند، به این معنی که می توانید در حالی که منتظر دریافت سایر داده ها هستید، بخش هایی از صفحه را رندر کنید. این به طور قابل توجهی زمان تا اول بایت (TTFB) را کاهش می دهد و به کاربران امکان می دهد مطالب را سریعتر ببینند.

طرح بندی ها:

سیستم چیدمان App Router می تواند این کار را انجام دهد واکشی داده ها برای سطوح مختلف برنامه، بنابراین واکشی داده‌ها را می‌توان در سطح طرح‌بندی به جای هر صفحه جداگانه انجام داد، و مدیریت و اشتراک‌گذاری داده‌ها را در چندین صفحه یا مؤلفه آسان‌تر می‌کند.

84. چه چیزی جدید است use هوک کردن، و چگونه مدیریت داده های همگام در Next.js را ساده می کند؟

را use قلاب ویژگی جدیدی است که در React 18 معرفی شده و با روتر App در Next.js ادغام شده است. عادت دارد مدیریت واکشی ناهمزمان داده ها مستقیماً در مؤلفه‌ها، واکشی و مدیریت داده‌های ناهمگام در یک مؤلفه عملکردی را ساده‌تر و شفاف‌تر می‌کند. را use قلاب بخشی از واکنش همزمان ویژگی‌ها و برای ساده‌سازی وعده‌ها در مؤلفه‌های React طراحی شده است.

چگونه مدیریت داده های async را در Next.js ساده می کند؟

سادگی: به جای استفاده useEffect و useState برای مدیریت چرخه حیات یک درخواست ناهمزمان، use قلاب به شما اجازه می دهد تا به طور مستقیم منتظر وعده ها باشید برای حل و فصل و استفاده از داده ها پس از در دسترس بودن.

یکپارچه سازی تعلیق خودکار: use قلاب یکپارچه با تعلیق، به این معنی که اگر یک جزء از use برای واکشی داده‌ها، React به‌طور خودکار کامپوننت را تعلیق می‌کند تا زمانی که داده‌ها در دسترس باشند، و در این فاصله حالت بارگیری را نشان می‌دهد. این امر نیاز به دست زدن به حالت های بارگیری یا استفاده از قلاب های اضافی را از بین می برد.

پشتیبانی از رندر همزمان: use قلاب بهره می برد رندر همزمان React قابلیت ها، به این معنی که واکشی داده ها می تواند به موازات سایر عملیات رندر انجام شود. این کار کارایی برنامه را بهبود می بخشد و مدیریت عملیات همگام در برنامه های پیچیده را آسان تر می کند.

دیگ بخار کاهش یافته: به طور سنتی، واکشی داده های ناهمزمان در React شامل مدیریت بارگیری، خطا و وضعیت های موفقیت به صورت دستی با استفاده از قلاب هایی مانند useState و useEffect. را use هوک این کار را با کنترل وضوح وعده به طور مستقیم در داخل اجزا، کاهش کد دیگ بخار و تمیزتر و مختصرتر کردن پایه کد، ساده‌تر می‌کند.

خلاصه:

async اجزاء با بارگذاری ناهمزمان داده ها قبل از رندر، امکان واکشی و بهینه سازی سمت سرور را فراهم می کند و عملکرد را بهبود می بخشد.

React 18 ویژگی مانند Suspense و Concurrent Rendering که به طور کامل با App Router یکپارچه شده است، واکشی موازی داده ها را ساده می کند و تجربه کاربر را با رندر سریعتر بهبود می بخشد.
را use قلاب با آسان‌تر کردن واکشی و استفاده مستقیم از وعده‌ها در قطعات، کاهش صفحه دیگ بخار و ادغام یکپارچه با Suspense، مدیریت داده‌های ناهمگام را ساده‌تر می‌کند.

84. چگونه می توانید پارامترهای جستجو را به صورت پویا در App Router مدیریت کنید؟

در روتر برنامه، کنترل پارامترهای جستجوی پویا را می توان با استفاده از useSearchParams قلاب یا با خواندن رشته پرس و جو در منطق صفحه یا سمت سرور خود. را useSearchParams هوک توسط React برای کار با پارامترهای پرس و جو به صورت پویا در یک جزء ارائه شده است.

مثال با استفاده از useSearchParams:

import { useSearchParams } from ‘next/navigation’;

export default function Page() {
const searchParams = useSearchParams();
const searchTerm = searchParams.get(‘search’) || ”;

return (
<div>
<h1>Search Results for: {searchTerm}h1>
{/* Render search results based on the searchTerm */}
div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مسیریابی پویا با پارامترهای پرس و جو: می توانید به صورت پویا به پارامترهای پرس و جو دسترسی داشته باشید و اقداماتی مانند واکشی داده ها بر اساس عبارات جستجو یا اعمال فیلترها را انجام دهید.

دستکاری URL: همچنین می توانید پارامترهای پرس و جو را با استفاده از آن تغییر دهید useSearchParams برای دستکاری URL بر اساس تعامل کاربر با صفحه، مانند به روز رسانی فیلترها یا عبارت های جستجو.

85. تقسیم کد با App Router چگونه کار می کند؟

در روتر برنامه، تقسیم کد به طور خودکار انجام می شود تا تحویل جاوا اسکریپت برنامه شما بهینه شود. Next.js بسته جاوا اسکریپت را بر اساس مسیرها و مؤلفه ها تقسیم می کند، بنابراین فقط کد مورد نیاز برای صفحه فعلی بارگیری می شود.

ویژگی های کلیدی تقسیم کد در روتر برنامه:

تقسیم خودکار بر اساس مسیر: هنگامی که کاربر به یک مسیر خاص هدایت می شود، فقط جاوا اسکریپت مورد نیاز برای آن مسیر بارگیری می شود. این باعث کاهش زمان بارگذاری اولیه و بهبود عملکرد می شود.

رندر سمت سرور (SSR) و رندر سمت مشتری (CSR): App Router تقسیم کد را با رندر کردن صفحه اولیه روی سرور (در صورت استفاده از SSR) و سپس بارگیری کد اضافی در صورت درخواست هنگام جابجایی بین صفحات یا مسیرها در سمت مشتری، بهینه سازی می کند.

تعلیق و بارگذاری تنبل: App Router می تواند با React Suspense به اجزای بارگذاری تنبلی کار کند. این اجازه می دهد تا قسمت هایی از برنامه در صورت نیاز بارگذاری شوند و عملکرد را بیشتر بهینه سازی کند.

نمونه ای از کامپوننت های بارگذاری تنبل با تقسیم کد:

import dynamic from ‘next/dynamic’;

const DynamicComponent = dynamic(() => import(‘./DynamicComponent’), {
loading: () => <p>Loading…p>,
});

export default function Page() {
return (
<div>
<h1>Page with dynamic componenth1>
<DynamicComponent />
div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این تضمین می کند که تقسیم کد به صورت پویا انجام می شود و اجزا و مسیرها فقط در صورت نیاز بارگذاری می شوند.

86. App Router چگونه از Route Groups پشتیبانی می کند و برای چه مواردی استفاده می شود؟

در روتر برنامه، گروه های مسیر راهی برای سازماندهی مسیرهای خود و درخواست ارائه دهید طرح بندی، اجزای مشترک، یا میان افزارها به گروه های خاصی از صفحات بدون تغییر ساختار URL.

Route Groups برای چه مواردی استفاده می شود؟

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

طرح‌بندی‌ها یا اجزای مشترک: می‌توانید طرح‌بندی‌های به اشتراک‌گذاشته‌شده را در مسیرهای متعدد بدون تأثیر بر URL اعمال کنید. به عنوان مثال، گروهی از صفحات که یک نوار کناری یا سرصفحه مشترک را به اشتراک می گذارند، می توانند تحت یک طرح بندی واحد با هم گروه بندی شوند.

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

نمونه ای از گروه های مسیر:

/app/
├── dashboard/
│ └── page.js
├── admin/
│ └── page.js
└── public/
└── page.js

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال:

dashboard/، admin/، و public/ نشان دهنده گروه بندی منطقی صفحات
می‌توانید طرح‌بندی‌های خاص را به هر گروه اختصاص دهید، مانند یک AdminLayout برای admin/ گروه یا الف PublicLayout برای public/ گروه

نحوه ایجاد گروه های مسیر:گروه های مسیر با استفاده از ()، به شما امکان می دهد برنامه خود را بدون تغییر مسیر واقعی ساختار دهید:

/app/
├── (admin)/
│ └── page.js // Admin group route
├── (public)/
│ └── page.js // Public group route

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مورد، مسیر URL شامل نمی شود (admin) یا (public)، اما به شما امکان می دهد مسیرها را در بخش های مختلف سازماندهی کنید.

خلاصه:

کنترل پارامترهای جستجو: می توانید به صورت پویا به پارامترهای جستجو در App Router با استفاده از دسترسی داشته باشید useSearchParams یا دسترسی مستقیم به رشته پرس و جو در کد سمت سرور.

تقسیم کد: App Router به طور خودکار کدها را بر اساس مسیرها، مؤلفه ها و صفحات با پشتیبانی از SSR و CSR برای بهبود عملکرد تقسیم می کند.

گروه های مسیر: اینها به سازماندهی منطقی مسیرهای شما کمک می کنند و در عین حال ساختار URL تمیزی را حفظ می کنند، از طرح بندی های مشترک پشتیبانی می کنند و پیکربندی های مسیریابی پیچیده را فعال می کنند.

87. بهترین روش ها برای سازماندهی یک پروژه بزرگ Next.js با App Router چیست؟

هنگام سازماندهی یک پروژه بزرگ Next.js با روتر برنامه، تمرکز بر مقیاس پذیری، قابلیت نگهداری و مدولار بودن بسیار مهم است. در اینجا برخی از بهترین شیوه ها برای ساختار و سازماندهی یک پروژه بزرگ آورده شده است:

1. استفاده کنید app/ دایرکتوری برای روتر برنامه

با Next.js 13 و App Router، از app/ دایرکتوری برای مسیریابی به جای دایرکتوری سنتی pages/ دایرکتوری این امکان را برای ویژگی های مسیریابی پیشرفته تری مانند مسیرهای تو در تو، طرح بندی ها و مسیرهای موازی فراهم می کند که برای پروژه های بزرگتر ضروری هستند.

ساختار دایرکتوری:

از یک قرارداد نامگذاری واضح و ثابت برای فهرست ها و فایل های خود استفاده کنید. برنامه‌تان را بر اساس ویژگی‌هایی، مانند داشتن پوشه‌های مجزا برای ماژول‌ها یا بخش‌های مختلف برنامه، ساختار دهید.

مثال:
app/
├── dashboard/
│ ├── page.js # Dashboard main page
│ ├── settings/ # Nested route
│ │ └── page.js
├── auth/ # Authentication-related pages
│ ├── login/
│ └── register/
├── user/
│ ├── profile/
│ └── account/
└── layout.js # Layout for the whole app

2. از Layouts برای Common UI استفاده کنید

اهرم طرح بندی ها برای جلوگیری از تکرار و حفظ طراحی ثابت در صفحات یا بخش های مختلف برنامه خود. طرح‌بندی‌ها به اشتراک‌گذاری اجزای رابط کاربری مانند نوارهای پیمایش، پاورقی، یا نوارهای کناری بدون تکرار کد کمک می‌کنند.

تقسیم ویژگی ها به ماژول ها (ساختار مبتنی بر ویژگی)

یک رویکرد مبتنی بر ویژگی برای سازماندهی پروژه شما، مقیاس و نگهداری آن را آسان تر می کند. هر ویژگی می تواند دایرکتوری خاص خود را با اجزای لازم، قلاب ها و توابع ابزار داشته باشد.

مسیرهای API را سازماندهی کنید

استفاده کنید app/api/ دایرکتوری برای مدیریت مسیرهای API. آنها را بر اساس ویژگی یا دامنه مرتبط سازماندهی کنید. این به شما کمک می کند کد خود را ماژولار نگه دارید و مدیریت آن آسان تر باشد.

برای تایپ قوی از TypeScript استفاده کنید

برای پروژه های بزرگتر، TypeScript بسیار توصیه می شود زیرا کیفیت کد را بهبود می بخشد، تکمیل خودکار را فراهم می کند و خطاهای زمان اجرا را کاهش می دهد. برای اطمینان از قابلیت نگهداری و مقیاس پذیری بهتر، انواع props، وضعیت ها و پاسخ های API را تعریف کنید.

از میان افزار API استفاده کنید

برای منطق مشترک (به عنوان مثال، بررسی احراز هویت، ورود به سیستم، یا ذخیره سازی)، استفاده کنید میان افزار در app/api/ دایرکتوری برای جلوگیری از تکرار منطق در چندین مسیر API.

مثال:
// app/api/middleware.js
export async function checkAuth(req, res, next) {
const token = req.headers[‘Authorization’];
if (!token) return res.status(401).json({ message: ‘Unauthorized’ });

try {
// verify token logic here
next();
} catch (error) {
return res.status(401).json({ message: ‘Unauthorized’ });
}
}

بهینه سازی واکشی و ذخیره سازی داده ها

استفاده کنید بازسازی استاتیکی افزایشی (ISR) یا رندر سمت سرور (SSR) برای صفحاتی که نیاز به داده های بلادرنگ یا پویا و تولید استاتیک دارند (getStaticProps) برای محتوایی که مرتباً تغییر نمی کند. برای واکشی کارآمد داده ها، این را با حافظه پنهان و بازسازی پس زمینه ترکیب کنید.

مثال:
export async function getStaticProps() {
const res = await fetch(”);
const posts = await res.json();

return {
props: { posts },
revalidate: 60, // Revalidate after 60 seconds
};
}

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

منطق قابل استفاده مجدد مانند واکشی داده ها، مدیریت فرم یا مدیریت حالت را در قلاب های سفارشی کپسوله کنید. این به شما کمک می کند تا کدهای تمیز و DRY را حفظ کنید و در عین حال از تکرار در اجزای مختلف جلوگیری کنید.

مثال:
// hooks/useFetch.js
export const useFetch = (url) => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (error) {
setError(error);
}
};
fetchData();
}, [url]);

return { data, error };
};

تقسیم کد اهرمی و بارگذاری تنبل

برای برنامه های بزرگ Next.js، استفاده کنید واردات پویا برای تقسیم کد و بارگذاری تنبل اجزایی که فورا مورد نیاز نیستند. این باعث کاهش اندازه اولیه باندل و بهبود عملکرد می شود.

مثال:
import dynamic from ‘next/dynamic’;

const DynamicComponent = dynamic(() => import(‘../components/DynamicComponent’), {
ssr: false, // Disable server-side rendering for this component
});

function Page() {
return <DynamicComponent />;
}

مدیریت جهانی دولت را با دقت اجرا کنید

در برنامه های بزرگ Next.js، با استفاده از React Context، Redux، یا وضعیت برای مدیریت دولتی می تواند بسیار مهم باشد. با این حال، مراقب باشید که ایالت در کجا ذخیره می شود و از پیچیده کردن بیش از حد مدیریت ایالت خودداری کنید، به خصوص اگر فقط بخش های کوچکی از برنامه نیاز به دسترسی به آن داشته باشد.

مثال با استفاده از React Context:
const MyContext = createContext();

export function MyProvider({ children }) {
const [state, setState] = useState(‘initial state’);

return (
<MyContext.Provider value={{ state, setState }}>
{children}
MyContext.Provider>
);
}

خلاصه:

استفاده کنید app/ دایرکتوری برای مسیریابی و چیدمان ها

ویژگی ها را در ماژول ها سازماندهی کنید برای نگهداری راحت تر

مسیرهای API را سازماندهی کنید در app/api/ دایرکتوری

اهرم TypeScript برای تایپ قوی

از میان افزار استفاده کنید برای منطق مشترک در مسیرهای API.

بهینه سازی واکشی داده ها با SSR، SSG و ISR.

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

تقسیم کد را اعمال کنید با واردات پویا

دولت جهانی را مدیریت کنید با دقت با React Context یا کتابخانه مدیریت ایالت.

پیروی از این بهترین شیوه ها به حفظ کد تمیز، مقیاس پذیر و با کارایی بالا برای برنامه های بزرگ Next.js با روتر App کمک می کند.

88. مراحل اصلی برای پیاده سازی قابلیت ثبت نام/ورود در Next.js چیست؟

گرفتن اطلاعات کاربری: فرمی ایجاد کنید که در هنگام ارسال، یک اقدام سرور را فراخوانی کند.

فیلدهای فرم را در سرور اعتبار سنجی کنید: از کتابخانه اعتبارسنجی طرحواره مانند Zod یا Yup استفاده کنید.

یک حساب کاربری ایجاد کنید: کاربر را در پایگاه داده وارد کنید یا با API کتابخانه Auth تماس بگیرید.

یک جلسه کاربر ایجاد کنید: با استفاده از استراتژی های مدیریت جلسه، وضعیت احراز هویت کاربر را مدیریت کنید.

89. چگونه می توانید جلسات را در Next.js مدیریت کنید؟

جلسات بدون تابعیت: از کتابخانه هایی مانند iron-session یا Jose برای ایجاد و مدیریت جلسات استفاده کنید.

جلسات پایگاه داده: داده های جلسه را در یک پایگاه داده ذخیره کنید و از کوکی ها برای بررسی احراز هویت خوشبینانه استفاده کنید.

90. نقش Middleware در احراز هویت Next.js چیست؟

از میان‌افزار می‌توان برای بررسی‌های اولیه استفاده کرد تا کاربران را بر اساس وضعیت احراز هویت آنها تغییر مسیر دهد. باید جلسه را از کوکی بخواند و از بررسی پایگاه داده برای جلوگیری از مشکلات عملکرد خودداری کند.