https://virgool.io/feed/@MRNamvar fa 2026-04-15 08:01:48 https://files.virgool.io/upload/users/1182602/avatar/1uJJEx.jpg?height=120&width=120 https://virgool.io/@MRNamvar https://virgool.io/@MRNamvar/nextjs-middleware-cnoq3wa3pgiw در Middleware, Next.js یک تابع است که قبل از اینکه درخواست به منطق سمت سرور شما (مثل مسیرهای API یا کامپوننت‌های صفحه) برسد اجرا می‌شود. این امکان را به شما می‌دهد که کد را اجرا کنید، درخواست‌های ورودی را بررسی کنید، و پاسخ را قبل از رسیدن به مقصد نهایی تغییر دهید.Middleware می‌تواند برای وظایفی مانند احراز هویت، لاگ‌برداری، ریدایرکت‌ها، هدرهای سفارشی، محدودیت نرخ درخواست‌ها و موارد دیگر استفاده شود.ویژگی‌های کلیدی Middleware در Next.js:تابع Middleware روی Edge Runtime اجرا می‌شود که سبک و سریع است و قبل از رندر شدن صفحه اجرا می‌شود.کنترل دقیقی بر مسیریابی به شما می‌دهد، از جمله بازنویسی URL، ریدایرکت و تغییر درخواست.تابع Middleware بر هر درخواست به صفحات یا مسیرهای API که بر آن اعمال شده است، اجرا می‌شود. مثال - Middleware در Next.jsبرای ایجاد middleware، باید فایلی با نام middleware.ts یا middleware.js در ریشه پروژه خود تعریف کنید.مثال ساده از Middleware:// middleware.tsimport { NextResponse } from 'next/server';import type { NextRequest } from 'next/server';export function middleware(req: NextRequest) { // به عنوان مثال، می‌توانید بررسی‌های احراز هویت را در اینجا انجام دهید const { pathname } = req.nextUrl; // کاربر را در صورتی که در حال تلاش برای دسترسی به مسیر محافظت‌شده باشد ریدایرکت کنید if (pathname.startsWith('/admin')) { const token = req.cookies.get('token'); if (!token) { // اگر احراز هویت نشده باشد، ریدایرکت به صفحه لاگین return NextResponse.redirect(new URL('/login', req.url)); } } // اگر همه چیز درست بود، درخواست ادامه پیدا می‌کند return NextResponse.next();}// مشخص کنید که middleware بر روی چه مسیرهایی اجرا شودexport const config = { matcher: ['/admin/:path*'], // اجرای middleware برای مسیرهای admin};در این مثال، middleware:بررسی می‌کند که آیا کاربر در حال دسترسی به صفحه /admin است.اگر کوکی‌ای به نام token وجود نداشته باشد (یعنی کاربر احراز هویت نشده)، کاربر را به صفحه لاگین ریدایرکت می‌کند.اگر کاربر احراز هویت شده باشد، درخواست اجازه ادامه پیدا می‌کند.آنچه می‌توانید با Middleware انجام دهید:احراز هویت و مجوز: می‌توانید مسیرهای محافظت‌شده را با بررسی توکن‌ها یا کوکی‌ها قبل از اجازه دسترسی کاربران، محافظت کنید. به عنوان مثال، کاربرانی که احراز هویت نشده‌اند را به صفحه لاگین ریدایرکت کنید:if (!req.cookies.get('auth')) { return NextResponse.redirect(new URL('/login', req.url));}۲. بازنویسی و ریدایرکت URL: می‌توانید URLها را به صورت پویا بازنویسی یا ریدایرکت کنید.ریدایرکت: if (pathname === '/old-path') { return NextResponse.redirect(new URL('/new-path', req.url));} بازنویسی: بازنویسی URL را تغییر می‌دهد بدون اینکه URL نمایش داده شده در مرورگر تغییر کند.return NextResponse.rewrite(new URL('/another-path', req.url));۳. اقدامات بر اساس موقعیت جغرافیایی: می‌توانید از req.geo برای بررسی مکان کاربر و تغییر پاسخ استفاده کنید (برای مثال، ریدایرکت کاربران به زیر دامنه‌های کشور خاص).const country = req.geo?.country || 'US';return NextResponse.rewrite(new URL(`/${country}${pathname}`, req.url));۴. هدرهای سفارشی و سیاست‌های امنیتی: می‌توانید هدرها را برای امنیت بیشتر یا نیازهای سفارشی تغییر دهید (مثل CORS یا Content Security Policy).const response = NextResponse.next();response.headers.set('X-Custom-Header', 'Custom Value');return response;۵. آزمون A/B یا فعال‌سازی ویژگی‌ها: از middleware برای ارائه نسخه‌های مختلف از برنامه به کاربران مختلف بر اساس معیارهایی مانند کوکی‌های کاربر یا مکان جغرافیایی استفاده کنید.۶. لاگ‌برداری و آنالیز: Middleware می‌تواند برای لاگ کردن درخواست‌های ورودی، رفتار کاربر یا استفاده از API قبل از ارسال پاسخ استفاده شود.console.log(`Incoming request for ${req.url}`);return NextResponse.next();اعمال Middleware به مسیرهای خاصویژگی config.matcher به شما اجازه می‌دهد که مشخص کنید Middleware بر روی چه مسیرهایی اعمال شود. این کار باعث بهبود عملکرد می‌شود زیرا Middleware تنها بر روی مسیرهای مرتبط اجرا می‌شود.export const config = { matcher: ['/protected/:path*', '/dashboard/:path*'],};نکات مهم:Middleware قبل از رندر صفحه اجرا می‌شود و شما نمی‌توانید به توابع دریافت داده‌های سمت سرور (مثل getServerSideProps) دسترسی داشته باشید.این طراحی شده تا سریع اجرا شود، بنابراین ا ز انجام عملیات سنگین که می‌تواند درخواست‌ها را کند کند، خودداری کنید.موارد استفاده برای Middleware در Next.js:محافظت از مسیرهای خاص (مثل صفحات admin یا صفحات کاربری).ایجاد ریدایرکت‌های مبتنی بر منطقه (مثل ریدایرکت کاربران به محتوای محلی).پیاده‌سازی آزمون A/B یا ویژگی‌های جدید بدون نیاز به جاوااسکریپت سمت کاربر.اضافه کردن هدرهای سفارشی برای امنیت یا آنالیز.بازنویسی URL برای داشتن ساختار مسیریابی بهتر. MohammadReza Namvar MohammadReza Namvar Sun, 08 Sep 2024 16:05:12 +0330 https://virgool.io/@MRNamvar/%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-webotp-api-%D8%AF%D8%B1-nextjs-react-a302xpx8lkhk در برنامه های امروزی، مشاهده کرده ایم که هنگام ورود به سیستم یا انجام کارهای آنلاین حساس ، رمزهای یکبار مصرفی را به شماره تلفن ثبت شده شما ارسال میکنند تا از این فعالیت ها محافظت کنند. اما به عنوان یک کاربر، به خاطر سپردن کد و سپس تایپ کردن آن در فیلدهای مورد نیاز، کمی آزاردهنده است. در عین حال، ممکن است بتوانیم این پیامک ها را به طور خودکار در برنامه های بومی اندروید یا ios شناسایی کنیم، اما کاربران برنامه های مبتنی بر وب این کار را نمی توانند انجام دهند. اما اکنون با کمک WebOTP API این امکان وجود دارد. این API به وبسایتها این امکان را میدهد که رمز عبور یکبار مصرف را از یک پیام کوتاه دریافت کنند و بهطور خودکار فرم را برای کاربران تنها با یک ضربه بدون تغییر برنامه پر کنند.چگونه کار می کند؟استفاده از WebOTP API از سه بخش تشکیل شده است:یک تگ <input> با حاشیه نویسی مناسبنحوه پیاده سازی در Nextjs / Reactارسال پیامک با فرمت مناسبیک تگ <input> با حاشیه نویسی مناسب اضافه کردن autocomplete="one-time-code"به تگ<input>جایی که باید OTP وارد شود.مثال: <input autocomplete='one-time-code' />نحوه پیاده سازی در Nextjs / React:مثال:useEffect(() => { if ('OTPCredential' in window) { const ac = new AbortController() const nav: CredentialRequestOptions | any = navigator.credentials setTimeout(() => { /*abort sms ditection after 1 minute */ ac.abort() }, 0.5 * 60 * 1000) nav .get({ otp: { transport: ['sms'] }, signal: ac.signal, }) .then((otp: any) => { /* Write your logic to set the value of input and then submit the form */ ac.abort() }) .catch((err) => { console.log(err) }) } }, [])مطمئن شوید که از ()ac.abort پس از تکمیل فرآیند ورود به سیستم / اتمام زمان ورود Otp استفاده کرده اید.میتوانیم کد خود را با شرط if ('OTPCredential' in window){ /* Code */} برای چک کردن قابلیت WebOTP API در مرورگر ببندیم.فرمت پیامک> پیام با متن قابل خواندن برای انسان (اختیاری) شروع می شود که شامل یک رشته الفبایی چهار تا ده کاراکتری با حداقل یک عدد است که آخرین خط را برای URL و OTP باقی می گذارد.> قسمت دامنه URL وب سایتی که API را فراخوانی کرده است باید قبل از @ باشد.> URL باید دارای علامت پوند ('#') باشد که با OTP همراه باشد.مثال :Your OTP is: 123456. @www.yourdomain.com #123456اکنون که کد ما آماده است، فرض کنید جزئیات ورود را به درستی وارد کرده اید. در پیامک ثبت شده خود یک OTP دریافت خواهید کرد. برای تست این کد می توانید از گوشی دیگری به تلفنی که در آن تست می کنید پیامک ارسال کنید.مطمئن شوید که:قابلیت Rich Communication Services) RCS) خاموش است.آن شماره تلفن نباید در لیست مخاطبین شما باشد.فرمت پیامک باید با نام دامنه صحیح معتبر باشد.پس از دریافت پیامک، یک پنجره بازشو نمایش داده می شود که از شما می خواهد به برنامه وب اجازه دهید پیامک دریافتی شما را بخواند.اگر سوالی در رابطه با این فرآیند دارید در بخش نظرات کامنت بگذارید. MohammadReza Namvar MohammadReza Namvar Fri, 05 Apr 2024 17:35:06 +0330