נתיבי API ב-Next.js: תבניות פיתוח Full-Stack

Next.js חוללה מהפכה בפיתוח React על ידי מתן מסגרת חזקה לבניית יישומי אינטרנט ביצועיסטיים וסקיילביליים. אחת התכונות המרכזיות שלה היא נתיבי API (API Routes), המאפשרים למפתחים ליצור פונקציונליות צד-שרת ישירות בתוך פרויקטי ה-Next.js שלהם. גישה זו מייעלת את הפיתוח, מפשטת את הפריסה ופותחת יכולות full-stack עוצמתיות.

מהם נתיבי API של Next.js?

נתיבי API של Next.js הם פונקציות serverless הנכתבות ישירות בתוך ספריית /pages/api שלכם. כל קובץ בספרייה זו הופך לנקודת קצה (endpoint) של API, המנתבת אוטומטית בקשות HTTP לפונקציה המתאימה לו. זה מבטל את הצורך בשרת צד-אחורי נפרד, מפשט את ארכיטקטורת היישום שלכם ומפחית את התקורה התפעולית.

חשבו עליהם כעל פונקציות serverless מיניאטוריות שחיות בתוך אפליקציית ה-Next.js שלכם. הן מגיבות לבקשות HTTP כמו GET, POST, PUT, DELETE, ויכולות לתקשר עם מסדי נתונים, ממשקי API חיצוניים ומשאבי צד-שרת אחרים. באופן מכריע, הן רצות רק על השרת, לא בדפדפן המשתמש, מה שמבטיח את אבטחת המידע הרגיש כמו מפתחות API.

יתרונות מרכזיים של נתיבי API

• פיתוח מפושט: כתבו קוד צד-לקוח וצד-שרת באותו פרויקט.
• ארכיטקטורת Serverless: נצלו פונקציות serverless לסקלביליות ויעילות בעלויות.
• פריסה קלה: פרוס את צד הלקוח וצד השרת יחד בפקודה אחת.
• ביצועים משופרים: רינדור צד-שרת ויכולות שליפת נתונים משפרים את מהירות היישום.
• אבטחה משופרת: נתונים רגישים נשארים על השרת, מוגנים מפני חשיפה בצד הלקוח.

תחילת עבודה עם נתיבי API

יצירת נתיב API ב-Next.js היא פשוטה. פשוט צרו קובץ חדש בתוך ספריית /pages/api. שם הקובץ יקבע את נתיב ה-API. לדוגמה, יצירת קובץ בשם /pages/api/hello.js תיצור נקודת קצה של API הנגישה ב-/api/hello.

דוגמה: API פשוט של ברכת שלום

הנה דוגמה בסיסית לנתיב API שמחזיר תגובת JSON:

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API Route!' });
}

קוד זה מגדיר פונקציה אסינכרונית handler שמקבלת שני ארגומנטים:

• req: מופע של http.IncomingMessage, בתוספת כמה middlewares מובנים.
• res: מופע של http.ServerResponse, בתוספת כמה פונקציות עזר.

הפונקציה מגדירה את קוד הסטטוס של ה-HTTP ל-200 (OK) ומחזירה תגובת JSON עם הודעה.

טיפול במתודות HTTP שונות

ניתן לטפל במתודות HTTP שונות (GET, POST, PUT, DELETE, וכו') בתוך נתיב ה-API שלכם על ידי בדיקת המאפיין req.method. זה מאפשר לכם ליצור ממשקי API מסוג RESTful בקלות.

// pages/api/todos.js

export default async function handler(req, res) {
  if (req.method === 'GET') {
    // שליפת כל המשימות ממסד הנתונים
    const todos = await fetchTodos();
    res.status(200).json(todos);
  } else if (req.method === 'POST') {
    // יצירת משימה חדשה
    const newTodo = await createTodo(req.body);
    res.status(201).json(newTodo);
  } else {
    // טיפול במתודות לא נתמכות
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

דוגמה זו מדגימה כיצד לטפל בבקשות GET ו-POST עבור נקודת קצה היפותטית /api/todos. היא כוללת גם טיפול בשגיאות עבור מתודות לא נתמכות.

תבניות פיתוח Full-Stack עם נתיבי API

נתיבי API של Next.js מאפשרים תבניות פיתוח full-stack מגוונות. הנה כמה מקרי שימוש נפוצים:

1. שליפת נתונים ומניפולציה

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

דוגמה: שליפת נתוני משתמש ממסד נתונים

// pages/api/users/[id].js
import { query } from '../../../lib/db';

export default async function handler(req, res) {
  const { id } = req.query;

  try {
    const results = await query(
      'SELECT * FROM users WHERE id = ?',
      [id]
    );

    if (results.length === 0) {
      return res.status(404).json({ message: 'User not found' });
    }

    res.status(200).json(results[0]);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Internal Server Error' });
  }
}

דוגמה זו שולפת נתוני משתמש ממסד נתונים על בסיס מזהה המשתמש שסופק בכתובת ה-URL. היא משתמשת בספריית שאילתות למסד נתונים (שמניחים שהיא נמצאת ב-lib/db) כדי לתקשר עם מסד הנתונים. שימו לב לשימוש בשאילתות עם פרמטרים למניעת פגיעויות של הזרקת SQL.

2. אימות והרשאות (Authentication and Authorization)

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

דוגמה: אימות משתמש

// pages/api/login.js
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';
import { query } from '../../lib/db';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    try {
      const results = await query(
        'SELECT * FROM users WHERE email = ?',
        [email]
      );

      if (results.length === 0) {
        return res.status(401).json({ message: 'Invalid credentials' });
      }

      const user = results[0];

      const passwordMatch = await bcrypt.compare(password, user.password);

      if (!passwordMatch) {
        return res.status(401).json({ message: 'Invalid credentials' });
      }

      const token = jwt.sign(
        { userId: user.id, email: user.email },
        process.env.JWT_SECRET,
        { expiresIn: '1h' }
      );

      res.status(200).json({ token });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Internal Server Error' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

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

3. טיפול בטפסים והגשת נתונים

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

דוגמה: הגשת טופס יצירת קשר

// pages/api/contact.js
import { sendEmail } from '../../lib/email';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email, message } = req.body;

    try {
      await sendEmail({
        to: 'admin@example.com',
        subject: 'New Contact Form Submission',
        text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
      });

      res.status(200).json({ message: 'Email sent successfully' });
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: 'Failed to send email' });
    }
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

דוגמה זו מטפלת בהגשת טופס יצירת קשר על ידי שליחת אימייל למנהל המערכת. היא משתמשת בספרייה לשליחת אימיילים (שמניחים שהיא נמצאת ב-lib/email) כדי לשלוח את האימייל. עליכם להחליף את admin@example.com בכתובת האימייל האמיתית של הנמען.

4. Webhooks וטיפול באירועים

ניתן להשתמש בנתיבי API כדי לטפל ב-webhooks ולהגיב לאירועים משירותים חיצוניים. זה מאפשר לכם לשלב את יישום ה-Next.js שלכם עם פלטפורמות אחרות ולבצע אוטומציה של משימות.

דוגמה: טיפול ב-Webhook של Stripe

// pages/api/stripe-webhook.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export const config = {
  api: {
    bodyParser: false, // השבתת פירוק הגוף (body parsing) המוגדר כברירת מחדל
  },
};

async function buffer(req) {
  const chunks = [];
  for await (const chunk of req) {
    chunks.push(chunk);
  }
  return Buffer.concat(chunks).toString();
}

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const sig = req.headers['stripe-signature'];

    let event;

    try {
      const buf = await buffer(req);
      event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
    } catch (err) {
      console.log(`Webhook Error: ${err.message}`);
      res.status(400).send(`Webhook Error: ${err.message}`);
      return;
    }

    // טיפול באירוע
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent for ${paymentIntent.amount} was successful!`);
        // אז הגדירו וקראו למתודה שתטפל ב-payment intent המוצלח.
        // handlePaymentIntentSucceeded(paymentIntent);
        break;
      case 'payment_method.attached':
        const paymentMethod = event.data.object;
        // אז הגדירו וקראו למתודה שתטפל בצירוף המוצלח של PaymentMethod.
        // handlePaymentMethodAttached(paymentMethod);
        break;
      default:
        // סוג אירוע לא צפוי
        console.log(`Unhandled event type ${event.type}.`);
    }

    // החזרת תגובת 200 כדי לאשר קבלת האירוע
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

דוגמה זו מטפלת ב-webhook של Stripe על ידי אימות החתימה ועיבוד נתוני האירוע. היא משביתה את מפרק הגוף (body parser) המוגדר כברירת מחדל ומשתמשת בפונקציית buffer מותאמת אישית כדי לקרוא את גוף הבקשה הגולמי. חיוני להשבית את מפרק הגוף המוגדר כברירת מחדל מכיוון ש-Stripe דורש את הגוף הגולמי לאימות חתימה. זכרו להגדיר את נקודת הקצה של ה-webhook בלוח הבקרה של Stripe ולהגדיר את משתנה הסביבה STRIPE_WEBHOOK_SECRET.

שיטות עבודה מומלצות עבור נתיבי API

כדי להבטיח את האיכות והתחזוקתיות של נתיבי ה-API שלכם, פעלו לפי שיטות העבודה המומלצות הבאות:

1. מודולריזציה של הקוד

הימנעו מכתיבת נתיבי API גדולים ומונוליתיים. במקום זאת, פרקו את הקוד שלכם למודולים קטנים יותר וניתנים לשימוש חוזר. זה הופך את הקוד שלכם לקל יותר להבנה, לבדיקה ולתחזוקה.

2. הטמיעו טיפול בשגיאות

טפלו בשגיאות כראוי בנתיבי ה-API שלכם. השתמשו בבלוקים של try...catch כדי לתפוס חריגים ולהחזיר תגובות שגיאה מתאימות ללקוח. תעדו (log) שגיאות כדי לסייע באיתור באגים וניטור.

3. אימות נתוני קלט

אמתו תמיד נתוני קלט מהלקוח כדי למנוע פגיעויות אבטחה ולהבטיח את שלמות הנתונים. השתמשו בספריות אימות כמו Joi או Yup כדי להגדיר סכמות אימות ולאכוף אילוצי נתונים.

4. הגנה על נתונים רגישים

אחסנו נתונים רגישים, כגון מפתחות API ופרטי התחברות למסד נתונים, במשתני סביבה. לעולם אל תכניסו (commit) נתונים רגישים למאגר הקוד שלכם.

5. הטמיעו הגבלת קצב (Rate Limiting)

הגנו על נתיבי ה-API שלכם מפני שימוש לרעה על ידי הטמעת הגבלת קצב. זה מגביל את מספר הבקשות שלקוח יכול לבצע בפרק זמן נתון. השתמשו בספריות להגבלת קצב כמו express-rate-limit או limiter.

6. אבטחת מפתחות API

אל תחשפו מפתחות API ישירות בקוד צד-הלקוח. תמיד העבירו בקשות דרך נתיבי ה-API שלכם (proxy) כדי להגן על מפתחות ה-API שלכם מגישה לא מורשית. אחסנו מפתחות API באופן מאובטח במשתני סביבה בשרת שלכם.

7. שימוש במשתני סביבה

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

8. רישום וניטור (Logging and Monitoring)

הטמיעו רישום וניטור כדי לעקוב אחר ביצועי נתיבי ה-API שלכם. תעדו אירועים חשובים, כגון שגיאות, אזהרות ובקשות מוצלחות. השתמשו בכלי ניטור כדי לעקוב אחר מדדים כמו זמן תגובה של בקשות, שיעורי שגיאות ושימוש במשאבים. שירותים כמו Sentry, Datadog או New Relic יכולים להיות מועילים.

שיקולי פריסה

נתיבי API של Next.js מיועדים לפריסה על פלטפורמות serverless. אפשרויות פריסה פופולריות כוללות:

• Vercel: Vercel היא הפלטפורמה המומלצת לפריסת יישומי Next.js. היא מספקת אינטגרציה חלקה עם Next.js ומבצעת אופטימיזציה אוטומטית של היישום שלכם לביצועים.
• Netlify: Netlify היא פלטפורמת serverless פופולרית נוספת התומכת בפריסות Next.js. היא מציעה תכונות דומות ל-Vercel, כגון פריסות אוטומטיות ואינטגרציית CDN.
• AWS Lambda: AWS Lambda הוא שירות מחשוב serverless המאפשר לכם להריץ קוד מבלי להקצות או לנהל שרתים. ניתן לפרוס את נתיבי ה-API של Next.js שלכם כפונקציות Lambda באמצעות כלים כמו Serverless Framework או AWS SAM.
• Google Cloud Functions: Google Cloud Functions היא סביבת הרצה serverless המאפשרת לכם ליצור ולחבר שירותי ענן. ניתן לפרוס את נתיבי ה-API של Next.js שלכם כ-Cloud Functions באמצעות כלים כמו Firebase CLI או Google Cloud SDK.
• Azure Functions: Azure Functions הוא שירות מחשוב serverless המאפשר לכם להריץ קוד לפי דרישה מבלי לנהל תשתית. ניתן לפרוס את נתיבי ה-API של Next.js שלכם כ-Azure Functions באמצעות כלים כמו Azure Functions Core Tools או Azure CLI.

בעת פריסת יישום ה-Next.js שלכם עם נתיבי API, ודאו שמשתני הסביבה שלכם מוגדרים כראוי בפלטפורמת הפריסה. כמו כן, קחו בחשבון את זמן ההתחלה הקרה (cold start) של פונקציות serverless, אשר יכול להשפיע על זמן התגובה הראשוני של נתיבי ה-API שלכם. אופטימיזציה של הקוד ושימוש בטכניקות כמו provisioned concurrency יכולים לסייע בהפחתת בעיות התחלה קרה.

סיכום

נתיבי API של Next.js מספקים דרך עוצמתית ונוחה לבנות יישומי full-stack עם React. על ידי ניצול פונקציות serverless, ניתן לפשט את הפיתוח, להפחית את התקורה התפעולית ולשפר את ביצועי היישום. על ידי ביצוע שיטות העבודה המומלצות המתוארות במאמר זה, תוכלו ליצור נתיבי API חזקים וניתנים לתחזוקה שיניעו את יישומי ה-Next.js שלכם.

בין אם אתם בונים טופס יצירת קשר פשוט או פלטפורמת מסחר אלקטרוני מורכבת, נתיבי API של Next.js יכולים לעזור לכם לייעל את תהליך הפיתוח שלכם ולספק חוויות משתמש יוצאות דופן.

למידה נוספת

• תיעוד נתיבי API של Next.js
• תיעוד Vercel
• תיעוד Netlify Functions
• תיעוד AWS Lambda