קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
קודקודייל
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
  • קודקודייל
  • מי אתם קודקודייל?
  • קורסים בחינם
  • צרו קשר
  • בניית אתרים
    • וורדפרס
  • נגישות אתרים
  • כל הקטגוריות
    • אנגולר
    • HTML
    • CSS
    • Javascript
    • Typescript
    • NodeJs
    • בלוקציין
ראשי ♦ fullstack ♦ nextJS – קורס fullstack – כתיבה בצד שרת – route handler

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

וינר יאיר 23 באפריל 2024 אין תגובות

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

איך מתחילים?

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

const sqlite3 = require("sqlite3").verbose();

// create a new database
const db = new sqlite3.Database("mydb.db");

// define a schema for the users table
db.run(`
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT NOT NULL UNIQUE,
    password TEXT NOT NULL
  )
`);

// SQL command for insertion
const createUserSQL = `INSERT INTO users (name, email, password) VALUES ('yair3', '[email protected]', '1234')`;

// Execute insert commands for each value
db.run(createUserSQL, (data, err) => {
    console.log(data);
    if (err) {
        return console.error(err.message);
    }
});

db.all("SELECT * FROM users", (err, rows) => {
    if (err) {
        return console.error(err.message);
    }
    console.log(rows);
});

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

כבר מההיכרות שלנו עם NextJs, אפשר לזהות את תיקיית API שכולה מוקדשת לקימפול של צד השרת, אפשר גם לזהות את הendpoint שנוצר בזכות היררכיית התיקיות – api/users (אפשר לראות גם api/user/[userId])
קובץ router.ts חוזר על עצמו כי הוא מייצר את הלוגיקה של אותו endpoint (בדומה ל index), ניתן להפריד לקבצים נוספים אך route יהיה הקובץ שראשי כמובן.

עכשיו נסתכל על המימוש של קובץ route עבור endpoint – api/users, כפי שמכונה route handler

// Import the necessary modules for SQLite
import sqlite3 from "sqlite3";
import { open } from "sqlite";
import { NextRequest, NextResponse } from "next/server";

// Initialize a variable to hold the SQLite database connection
let db: any = null;

export async function GET(req: NextRequest, res: NextResponse) {
    // Open a new connection if there is none
    if (!db) {
        db = await open({
            filename: "./mydb.db",
            driver: sqlite3.Database,
        });
    }

    // Query to get all users from the "user" table
    const allUsers = await db.all("SELECT * FROM u1sers");

    // Return the todos as a JSON response with a 200 status code
    return new Response(JSON.stringify(allUsers), {
        headers: { "content-type": "application/json" },
        status: 200,
    });
}

צורת כתיבה זו חוזרת על עצמה בשימושים אלו של route handler, כמו כן, יכולות להיות מספר פונקציות שמשתמשות למגוון שימושים למשל POST, DELELT וכו..

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

ותחזיר את NextResponse שהוא מבית היוצר של nextJS, והינו הרחבה של Web Response הבסיסי.

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

export async function POST(req: NextRequest, res: NextResponse) {
    if (!db) {
        db = await open({
            filename: "./mydb.db",
            driver: sqlite3.Database,
        });
    }

    const createUserSQL = `INSERT INTO users (name, email, password) VALUES ('yair18', '[email protected]', '1234')`;

    // Execute insert commands for each value
    const user = db.run(createUserSQL, (err: Error | null) => {
        if (err) {
            return new Response(JSON.stringify({ message: err.message }), {
                status: 500,
            });
        }
    });

    const userData = await user;
    return Response.json({ id: userData.lastID, status: 200 });
}

אם נרצה לשנות אייטם או לבקש מידע עבור אייטם ספציפי נוכל לייצר תיקיה [userId] כפי שהצגתי בתמונה למעלה, ושם נוכל להגדיר את הראוטים הרלוונטיים, שכן עושים שימוש בפרמטר שהגדרנו בשם התיקיה בסוגריים המרובעים, למשל דוגמה:

import { NextResponse } from "next/server";
import sqlite3 from "sqlite3";
import { open } from "sqlite";

let db: any = null;

export async function GET(
    request: Request,
    { params }: { params: { userId: string } }
) {
    const { userId } = params;

    if (!db) {
        db = await open({
            filename: "./mydb.db",
            driver: sqlite3.Database,
        });
    }

    const user = await db.get("SELECT * FROM users WHERE id = ?", userId);

    return NextResponse.json(
        {
            user,
        },
        { status: 201 }
    );
}

לסיכום פוסט route handler

החלוקה שנסט מצאה לנכון לעשות לנו בין כתיבת צד שרת ובין הקליינט, עושים סדר כי הכל מבוסס על תיקיות, כמו כן כתיבת הend points שונה במקצת, למשל שימוש עם NextResponse.

מי ששם לב, יש מעט בלגן בקבצים שהצגתי, כל המימוש של הresponse ו Errors . אשאיר את הנושא הזה להמשך המדריך.

שימוש בroute handler היה נפוץ עם nextjs אך עם הגרסאות החדשות רואים פחות שימושים בהם ויותר שימושים בactions server . שכן נדבר עליכם בפרקים הבאים במדריך זה.

בהצלחה לכולם 🐲

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

coures nextjs hooks codcodilenextJS – קורס fullstack – פונקציות והוקים ב nextjs קורס fullstack עם nextjs use client and use servernextJS – קורס fullstack – use client & use server קורס fullstack עם nextjsnextJS – קורס fullstack – רכיבים של nextjs nextJS – קורס fullstack – עמודים ותבניות של nextJs
fullstack next js nextjs מדריך nextjs קורס fullstack קורס nextjs

אודות המחבר

יאיר וינר להציג את כל הפוסטים של וינר יאיר


« פוסט קודם
פוסט הבא »

השארת תגובה

ביטול

חיפוש באתר
בחירת העורכים
29 בדצמבר 2023 עידן יצחקי

שדה טקסט עשיר עם תמונות

אתם הולכים להיות מופתעים עד כמה HTML יכול להיות חכם ולבצע משהו כל כך מורכב, שאם אנחנו היינו רוצים ליצור

1 באוקטובר 2021 עידן יצחקי

איך למשוך דינמית favicon של אתרים אחרים ב-JS

בפוסט זה נראה איך אפשר על פי לינקים בדף למשוך את ה-favicon מהדומיין שלהם באופן דינמי, בדיקה של תקינות התמונה

פופולרי
Javascript functions – היכרות עם סוגי פונקציות
Javascript
21 בדצמבר 2024 אין תגובות
Nested routing in angular standalone component
Typescript
15 בנובמבר 2024 תגובה אחת
בחרו לפי תגיות
angular blockchain css ethers express front-end fullstack GQL html javascript next js nextjs nodejs react hooks reactjs solidity webgl אנגולר בלוקציין וורדפרס לימודי אנגולר לימודי וורדפרס לימוד ריאקט מדריך front-end מדריך GQL מדריך אנגולר מדריך וורדפרס מדריך חינם react מדריך ריאקט מפתח בלוק מפתח בלוקציין מתכנת front-end מתכנת בלוקציין מתכנת פרונט סולידיטי קורס front end קורס fullstack קורס nextjs קורס אנגולר קורס בלוקציין קורס בלוקציין בחינם קורס סולידיטי קורס ריאקט קורס תכנות קורס תכנות בחינם
סינון על פי קטגוריות
CSS fullstack HTML IIS Javascript nodeJs SEO Typescript אנגולר בלוקציין בניית אתרים וורדפרס חיפוש עבודה כלים נוספים כללי נגישות קורסים ריאקט תלת מימד תקלות ופתרונות
צור קשר
כל הזכויות שמורות לקודקודייל
ליצירת קשר: @ קודקודייל
גלילה לראש העמוד