nextJS – קורס fullstack – כתיבה בצד שרת – middleware

middleware קיימים בכל אפליקציית צד שרת, מי שקצת מכיר קוד בצד שרת, יודע ומכיר מה זה middleware ומי שלא מכיר, אז הרעיון הכללי הוא לבצע פעולות רגע לפני ביצוע הבקשות. NextJs כפריימוורק פולסטק, מספק מענה מאד מעניין לmiddleware, שאותו נבחן בפוסט זה.

Middleware NextJs

בלב ליבו, Middleware פועל כשכבת ביניים הממוקמת בין בקשות HTTP נכנסות לבין ביצוע של נתיבים או נתיבי API. מיקום אסטרטגי זה מקנה לו את היכולת לבצע את הפעולות הבאות:

• בדיקת בקשות: לבחון בקפידה בקשות נכנסות, כולל כותרות, עוגיות וגוף הבקשה, כדי לאסוף מידע יקר על כוונת המשתמש והקשר שלו.
• שינוי בקשות: בהתבסס על המידע שנאסף, ניתן לשנות באופן דינמי את הבקשה עצמה. זה עשוי לכלול הוספה או הסרה של כותרות, כתיבה מחדש של נתיבים, או אפילו החלפה מלאה של הבקשה בתגובה מוגדרת מראש.
• בקרת תגובות: Middleware מציע את הגמישות לבנות ולשלוח תגובות ישירות, תוך עקיפת תהליך הרינדור של נתיבים או נתיבי API. זה שימושי במיוחד עבור תרחישים כמו הפניות אימות או טיפול בשגיאות.

דוגמאות נפוצות לשימוש middleware

Middleware פותח אפשרויות רבות, משפר את הפונקציונליות והחוזק של היישום שלך, למשל:

• אימות ואישורים: יישום מנגנוני אימות חזקים על ידי אימות אישורי משתמש או עוגיות הפעלה בשכבת ה-Middleware. זה מבטיח שרק משתמשים מורשים יקבלו גישה לנתיבים או נקודות קצה של API מוגנים.
• הפניות בצד השרת: הגדרת כללי הפניה דינמיים ברמת השרת. לדוגמה, אתה עשוי להפנות משתמשים בהתבסס על המיקום שלהם, תפקיד המשתמש או קריטריונים אחרים. זה מייעל את הניווט של המשתמש ומייצר חוויה אישית.
• אימות בקשות API: אבטחת נקודות הקצה של ה-API שלך על ידי אימות בקשות נכנסות ב-Middleware. זה יכול לכלול בדיקה של פרמטרים נדרשים, סוגי נתונים או אסימוני אישור ספציפיים.
• אסטרטגיות קאשינג מותאמות אישית: יישום לוגיקת קאשינג מותאמת אישית בתוך ה-Middleware כדי לייעל ביצועים ולהפחית עומס על השרת. על ידי קאשינג של נתונים שניגשים אליהם לעתים קרובות, אתה יכול לספק תוכן מהר יותר למשתמשים.
• רישום וניתוח: שילוב מסגרות רישום ב-Middleware כדי ללכוד תובנות חשובות לגבי התנהגות משתמש, דפוסי בקשות ושגיאות פוטנציאליות. זה מאפשר לך לקבל החלטות מבוססות נתונים כדי לשפר את היישום שלך.
• איסוף ושינוי נתונים: כדי לאסוף נתונים מ-API חיצוני או ממסד הנתונים שלך ולהעשיר אותם בעיבוד או טרנספורמציות נוספות לפני העברתם לנתיבים או לנתיבי API.

להלן דוגמה של קובץ middleware בNextJs:

import { NextRequest, NextResponse } from "next/server";


// נגיד והיוזר לא מחובר
const isLUserLoggedIn: boolean = false;

export function middleware(req: NextRequest) {
    let cookie = req.cookies.get("my-cookie");
    if (isLUserLoggedIn) {
        return NextResponse.next();
    }
    return NextResponse.redirect(new URL("/", req.url));
}

export const config = {
    matcher: ["/dashboard"],
};

אפשר לראות דוגמה פשוטה לקובץ middleware.ts אשר נמצא בroot של הפרויקט. עכשיו אסביר מה קורה בקובץ:

• נתחיל מהסוף, קונפיג מאפשר לנו להגדיר ערכים לmiddleware , למשל matcher שמאפשר לשים מער של נתיבים, ורק בהם תרוץ פונקציית middleware. במידה ולא נגדיר matcher, אז middleware ירוץ בכל נתיב.
• כפי שאפשר לראות, middleware מקבל את הבקשה, ומבצע איזו בדיקה, במקרה הזה יש תנאי שבודק עם היוזר מחובר או לא מחובר, במידה ומחובר, הבקשה תמשיך בדרכה ותאפשר גישה למשתמש להמשיך גם לנתיבים המוגנים לדוגמה dashboard. אם יוזר לא מחובר, אפשר לראות שהתנאי שולח אותו לredirect כך שהגולש יחזור לעמוד הראשי.

לסיכום – כתיבה בצד שרת – middleware

סיכום בנושא middleware יהיה יותר בסגנון "שיעורי בית", מכוון שהדוגמה פשוט ביותר, ולרוב השימוש בmiddleware יותר מורכב , אני מציע לעשות עוד קצת שיעורי בית בנושא זה מכוון שmiddleware הוא חלק אלמנטרי מפיתוח עם NextJS, ואם אתם לא אנשים של שיעורי בית, אין בעיה, בהמשך הקורס הזה יהיה פרויקט קטן שיציג שימושים נוספים של middleware. אז הישארו איתי להמשך קורס זה 🤩🐊🤖

פוסטים קשורים:

nextJS – קורס fullstack – כתיבה בצד שרת – server actions nextJS – קורס fullstack – כתיבה בצד שרת – route handler nextJS – קורס fullstack – פונקציות והוקים ב nextjs nextJS – קורס fullstack – use client & use server