دنیای زبانهای کدنویسی و توسعه نرمافزار
فونتها لباس ظاهری صفحات وب هستند. با استفاده از next/font در Next.js میتوانید فونتها را بهصورت خودکار بهینهسازی، self-host، و بدون هیچگونه تغییر چیدمان (layout shift) بارگذاری کنید. این مقاله نحوهٔ استفاده از فونتهای گوگل، فونتهای محلی، ادغام با Tailwind CSS، و بهترین شیوههای مدیریت فونت را آموزش میدهد.
در Next.js، فایل default.js برای مدیریت مسیرهای موازی (Parallel Routes) استفاده میشود، زمانی که پس از بارگذاری کامل صفحه، وضعیت فعال یک slot قابل بازیابی نیست. این مقاله نحوهٔ استفاده از default.js، دریافت پارامترهای داینامیک، تفاوت بین مسیرهای catch-all و optional catch-all، و استفاده از generateStaticParams برای ساخت مسیرهای استاتیک را آموزش میدهد.
Next.js ابزارهایی قدرتمند برای مدیریت خطاها، کنترل دسترسی، و مشاهدهپذیری ارائه میدهد. این مقاله نحوهٔ استفاده از error.js برای نمایش fallback UI، استفاده از forbidden.js برای نمایش صفحه 403، و استفاده از instrumentation.js برای ردیابی خطاها و عملکرد سرور را آموزش میدهد.
فایل instrumentation-client.js در Next.js امکان ثبت عملکرد، ردیابی خطا، و اجرای کدهای تحلیلی را قبل از تعامل کاربر فراهم میکند. همچنین با استفاده از مسیرهای قابلجایگذاری (Intercepting Routes)، میتوان محتواهایی مانند مودالها را بدون تغییر زمینه صفحه نمایش داد. این مقاله نحوهٔ استفاده از این دو قابلیت را با مثالهای عملی آموزش میدهد.
فایل layout.js در Next.js برای تعریف ساختار صفحات استفاده میشود. این فایل میتواند شامل layoutهای محلی یا root layout باشد و از طریق props مانند children و params، محتوا و پارامترهای داینامیک را دریافت کند. این مقاله نحوهٔ استفاده از layoutها، مدیریت پارامترها، ادغام با کامپوننتهای کلاینتی، و نکات مهم در عملکرد و کشینگ را آموزش میدهد.
Next.js با استفاده از فایل loading.js امکان نمایش رابط کاربری فوری هنگام بارگذاری را فراهم میکند و با فایلهای not-found.js و global-not-found.js مدیریت خطاهای 404 را بهصورت ظریف انجام میدهد. این مقاله نحوهٔ ساخت حالتهای بارگذاری، صفحات 404 سفارشی، و بهینهسازی تجربه کاربری و SEO را آموزش میدهد.
فایل page.js در Next.js برای تعریف رابط کاربری منحصر بهفرد هر مسیر استفاده میشود. این فایل میتواند پارامترهای مسیر (params) و پارامترهای جستجو (searchParams) را دریافت کند و بهصورت پیشفرض یک Server Component است. این مقاله نحوهٔ استفاده از page.js، مدیریت پارامترها، و ساخت صفحات پویا را آموزش میدهد.
Parallel Routes در Next.js به شما امکان میدهد چند صفحه را بهصورت همزمان یا شرطی در یک layout رندر کنید. این قابلیت برای ساخت داشبوردها، تبها، مودالها و مسیرهای شرطی بسیار مفید است. این مقاله نحوهٔ تعریف اسلاتها، استفاده از default.js، مدیریت مودالها، و ساخت تبهای مستقل را آموزش میدهد.
فایل proxy.ts در Next.js جایگزین middleware.ts شده و بهعنوان نگهبان لبهای قبل از اجرای اپلیکیشن عمل میکند. این فایل میتواند مسیرها را بازنویسی یا ریدایرکت کند، هدرها و کوکیها را تنظیم کند، دسترسی را محدود کند، و وظایف پسزمینه را اجرا کند. این مقاله نحوهٔ استفاده از proxy.ts، تعریف matcherها، و پیادهسازی سناریوهای واقعی مانند احراز هویت، تست A/B، و تنظیم CORS را آموزش میدهد.
پوشه public در Next.js برای ارائه فایلهای استاتیک مانند تصاویر، فونتها و فایلهای متنی استفاده میشود. فایلهای داخل این پوشه از طریق مسیر مستقیم قابل دسترسی هستند و بدون نیاز به import یا بارگذاری خاص در مرورگر نمایش داده میشوند. این مقاله نحوهٔ استفاده از public، نمایش تصاویر، و رفتار کشینگ را توضیح میدهد.
ساخت API سفارشی با Web Request و Response
فایل template.tsx در Next.js مشابه layout عمل میکند و صفحه یا layout را در خود میپیچد. اما برخلاف layout که در ناوبری حفظ میشود، template در هر تغییر مسیر با کلید یکتا بازسازی میشود. این ویژگی برای بازنشانی مؤلفههای کلاینتی، اجرای مجدد useEffect، و نمایش fallback در هر ناوبری مفید است.
