📢 آشنایی با Zod – تایپ اسکریپت + ولیدیشن عالی 🚀

Zod یه کتابخونه‌ی فوق‌العاده برای اعتبارسنجی و تایپ‌سیف بودن در TypeScript هست! 😍

✅ ولیدیشن سریع و قوی
✅ تولید تایپ خودکار 🎯
✅ خطایابی بهتر و دیباگ راحت‌تر 🛠
✅ سازگار با TypeScript و Next.js 🔥

---

### 🛠 نمونه کد:

import { z } from "zod";

const UserSchema = z.object({
  name: z.string(),
  age: z.number().min(15).optional(), // 🎂 این فیلد اختیاریه  
  gender: z.enum(["male", "female"]).optional(), // 🎭 اینم اختیاریه  
});

type User = z.infer<typeof UserSchema>; // 🎯 تایپ خودکار  

const user1 = UserSchema.parse({ name: "Ali" }); // ✅ مشکلی نداره!  
const user2 = UserSchema.parse({ name: "Sara", age: 20, gender: "female" }); // ✅ اوکیه!  
const user3 = UserSchema.parse({ name: "Reza", gender: "male" }); // ✅ بدون age هم درسته  

⚡ با Zod دیگه نیازی به تعریف جداگانه تایپ و اسکیما نداری! یه تیر، دو نشون 🎯🔥

#TypeScript #Zod #Validation


@NextPro_Ch

خسته شدی از نوشتن تایپ‌های دستی توی Next.js؟ 😩

همه ما تو getServerSideProps و getStaticProps بارها تایپ‌ها رو دستی نوشتیم، ولی دیگه وقتشه که Next.js خودش برامون تایپ بسازه! 🎯

با TypeScript و InferGetServerSidePropsType یا InferGetStaticPropsType می‌تونی تایپ خروجی رو اتوماتیک بسازی! 😍

---

✨ دیگه لازم نیست اینجوری بنویسی:

export const getServerSideProps = async () => {
  return { props: { name: "Ali", age: 25 } };
};

type Props = { name: string; age: number }; // 😵‍💫 دستی نوشتن تایپ؟ نه دیگه!

---

🚀 فقط اینو بنویس و راحت باش:

import { InferGetServerSidePropsType } from "next";

export const getServerSideProps = async () => {
  return { props: { name: "Ali", age: 25 } };
};

type Props = InferGetServerSidePropsType<typeof getServerSideProps>; // 🎯 تایپ خودکار!

یا برای getStaticProps:

import { InferGetStaticPropsType } from "next";

export const getStaticProps = async () => {
  return { props: { posts: ["Post 1", "Post 2"] } };
};

type Props = InferGetStaticPropsType<typeof getStaticProps>; // 🎉 تایپ آماده!

---

💡 نتیجه؟
✅ بدون دردسر، تایپ دقیق داری!
✅ خطایابی بهتر و دیباگ راحت‌تر 🛠
✅ همیشه تایپ‌ها به‌روز می‌مونن 🔥

دیگه وقتشه که از این روش استفاده کنی و Next.js رو تایپ‌سیف‌تر کنی! 😎

#NextJS #TypeScript #InferType

@NextPro_Ch

تو این پست میخوایم راجب یک قابلیت خیلی فوق العاده که تایپ اسکریپت بوجود اورده صحبت کنیم ، متادیتا !

متادیتا (Metadata) در TypeScript مثل یادداشت‌های نامرئی روی کد هامونه که به سیستممون میگه چطور با اجزای مختلف برنامه رفتار کنه. این ویژگی، به خصوص وقتی با Decoratorها ترکیب میشه، می‌تونه برنامه‌نویسی رو حرفه‌ای‌تر و شیرین تر کنه !

چرا متادیتا مهمه؟
• انعطاف‌پذیری: بدون تغییر منطق اصلی کد، رفتارش رو اصلاح می‌کنه.
• کاهش کد تکراری: مثلاً برای اعتبارسنجی، دیباگ یا لاگینگ.
• قابلیت استفاده در فریمورک‌ها: مثل NestJS یا Angular که از متادیتا برای Routeها و Dependency Injection استفاده میشه .

چه موقع از متادیتا استفاده کنیم؟
• ساخت کتابخانه/فریمورک
• اعتبارسنجی خودکار داده‌ها
• پیاده‌سازی AOP (برنامه‌نویسی جنبه‌گرا)

اگه میخوای بیشتر راجبش بدونی راجب reflect metadata api بخون.

#TypeScript #MetaData

@NextPro_Ch 🚀

معجزه‌ای به نام React Bits ✨

گاهی برای ساخت یک UI جذاب، نیاز به پیچیدگی بیشتر نیست؛ فقط انتخاب ابزار درست کافی است. 🚀

چند وقت اخیر با ReactBits.dev آشنا شدم؛ مجموعه‌ای از کامپوننت‌ها و افکت‌های آماده در React که تمرکز اصلی آن‌ها روی motion و interaction است.

چیزی که آن را متمایز می‌کند:
- انیمیشن‌های سبک و کاربردی ⚡
- کامپوننت‌های قابل شخصی‌سازی
- مناسب برای لندینگ‌ها و پروژه‌های مدرن

نکته مهم اینجاست:

UI خوب فقط زیبایی نیست، بلکه هدایت درست توجه کاربر است. 👁️
React Bits دقیقاً در همین نقطه ارزش ایجاد می‌کند؛
با جزئیاتی کوچک، تجربه کاربر را متفاوت می‌سازد.

اگر در حوزه Frontend کار می‌کنید، ارزش دیدن دارد. 🔥

#فرانت_اند #نکست #TypeScript #ReactBits

🚀 @NextPro_Ch