سئوی قدرتمند در Next.js 🛠

سئو نقش بسیار مهمی در دیده شدن وب‌سایت و پروژه داره و شما به عنوان دولوپر، باید اطلاعاتی راجع به این موضوع داشته باشید. مقاله زیر نکته هایی برای سئوی بهتر در پروژه های نکستی جمع اوری کرده و یشنهاد میکنم، حتما مطالعش کنید.

🔗 Article

#seo #tips
@CodeModule

دیگه تویی که کل پروژه هات رو شاخ Ai میچرخه، نباید استوری بزاری و امروز رو به خودت بگیری😔

#fun
@CodeModule

بدرود با نوشتن دستی API ها و تایپ هاشون ☃️

پکیج Orval یک ابزار هوشمنده که از روی فایل OpenAPI یا Swagger (که بک‌اند دولوپر برات می‌فرسته)، به صورت خودکار ریکوست‌ها و تایپ‌ مدل ها و رسپانس هارو برای کار با API می‌سازه.

تو پروژه‌های بزرگ که تعداد APIها زیاده (مثلاً ۵۰ تا endpoint یا بیشتر)، نوشتن دستی اون همه ریکوست و تایپ خیلی وقت‌گیره و امکان بروز اشتباه و باگ هست.

این پکیج ساخته شده تا:

سرعت توسعه رو بالا ببره.

هماهنگی با بک‌اند رو حفظ کنه.

خطاهای تایپی و ارتباطی رو از بین ببره.

ویژگی و مزیت های Orval

🌪تولید خودکار کد API: از روی فایل OpenAPI (.yaml) یا (json.) Swagger، به‌صورت خودکار توابع ریکوست (GET, POST, …) می‌سازه.

🌪تولید تایپ های TypeScript: تایپ مدل‌های داده و رسپانس هارو کامل جنریت میکنه.

🌪هماهنگی کامل با بک‌اند: وقتی بک‌اند تغییر می‌کنه، فقط نیازه یک بار کامند Orval رو اجرا کنی تا همه‌چی آپدیت بشه.

🌪پشتیبانی از کتابخونه‌های مختلف: بر اساس نیازتون میتونه خروجی رو برای Axios، Fetch API، React Query، SWR و … تولید کنه.

🌪امکان Mock کردن API: بدون نیاز به سرور واقعی، پاسخ‌های فیک Mock می‌سازه.

🌪 ساختار تمیز و سازمان‌یافته کدها: خروجی‌ها منظم، خوانا و آماده استفاده در پروژه هستن.

🔗 Document

#orval
@CodeModule @CodeModuleGap

حالا مگه بک اند دولوپر زیر بار سواگر type safe میره؟😞

اگه برای تمرین و کدنویسی دنبال ui خاصی میگردید، این طرح فیگما رو به هیچ وجه از دست ندید 💀

🔗 Link

#figma
@CodeModule @CodeModuleGap

ترکیبی از مودال و منوی کشویی با Credenza 🐝

پکیج Credenza یک کامپوننت آماده به ما میده که ترکیبی از dialog و drawer هست، یعنی در سایز دسکتاپ، به صورت مودال معمولی باز میشه و در سایز موبایل، به شکل drawer (منو کشویی) نمایش داده میشه.

🔗 Document

#credenza
@CodeModule @CodeModuleGap

خیلی خوب بوددد 😂😂😂

#fun
@CodeModule @CodeModuleGap

با Nuqs بیشتر آشنا بشید 🕷

پکیج Nuqs یک کتابخونه‌ هست که برای مدیریت state از طریق query string در پروژه‌های Next.js طراحی شده.

به زبان ساده‌تر: با nuqs می‌تونی stateهایی مثل فیلترها، سرچ کاربر، پیجینیشن، یا هر متغیری رو که می‌خوای در URL نگه داری و خیلی راحت و type-safe مدیریت کنی. بدون اینکه خودت دستی با useSearchParams یا useRouter سر و کله بزنی.

قابلیت‌های مهم این پکیج

💥 پشتیبانی از انواع داده (string number, boolean, date, array و ...)

💥 سازگاری کامل با App Router

💥 سینک خودکار بین state و URL

💥 ساده‌تر از useSearchParams

خلاصه که اگه از دست useSearchParams و useRouter خسته شدی، پکیج Nuqs دقیقاً همونه که دنبالش بودی.

🔗 Document

#nuqs
@CodeModule @CodeModuleGap