נתחיל ונאמר כי כתיבת צד שרת בפרויקט 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 . שכן נדבר עליכם בפרקים הבאים במדריך זה.
בהצלחה לכולם 🐲





