nextJS – קורס fullstack – פונקציות והוקים ב nextjs

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

Nextjs Hooks – לא רק עם use client

נכון שעוד לא דיברנו על use client / use server וכן אני ארשום על זה בפוסט הבא בפירוט מלא, ובכל זאת אסביר כמה דברים בנושא כי לא כל רכיב של נקסט יכול לעשות שימוש בhooks. לכן אם תרצו לעשות שימוש בuseParams ככל הנראה תקבלו שגיאה מוכרת של nextjs compiler שאתם צריכים להגדיר את הרכיב כ CSR כלומר client side rendering וכן ניחשתם נכון, הרכיבים של נקסט כברירת מחדל הם SSR – server side rendering. אבל אם רוצים להשתמש בפונקציות מסוימות ברכיבים מרונדרים צד שרת? גם לזה יש פתרון ונציג אותו בהמשך הפוסט.

להלן דוגמה של ההוקים שנסקור בפוסט ברכיבים שהם use client , ושימו לב שיש שבשורה 1 הגדרנו לקומפיילר של נקסט שהרכיב הוא אכן use client:

"use client";

import qs from "query-string";
import { useState } from "react";
import { useRouter } from "next/navigation";

export const Search = () => {
    const router = useRouter();
    const [value, setValue] = useState("");

    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        if (!value) return;

        const url = qs.stringifyUrl(
          {
                url: "/",
                query: { search: value },
            },
            { skipEmptyString: true }
        );

        router.push(url);
    };

    return (
       <div>
         <form onSubmit={onSubmit}>
            <Input
                value={value}
                onChange={(e) => setValue(e.target.value)}
                placeholder="Search"
            />
            <button type="submit">Search</button>
        </form>
        <div>
          <span>search for: {search}</span>
        </div>
        </div>
      
    );
};

useRouter

ככל הנראה את useRouter אתם מכירים מתוך ריאקט, אבל שימו לב שזה לא הוק של ריאקט אלא של next/navigation. מכוון שנקסט עשו מימוש שונה לראוטר של ריאקט אז גם שכתבו את ההוקים של הנביגציה של ריאקט. כמו כן תגית Link כפי שראינו בפוסט הקודם nextJS – קורס fullstack – רכיבים של nextjs

useParams

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

פונקציות של nextjs בצד שרת – use server

מה עושים עם רוצים מידע על נתיבים שמתרנדרים בצד השרת ? גם לזה יש פתרונות. למשל אם תרצו לנתב משתמשים תוכלו להשתמש ב redirect שגם הוא מגיע אלינו מ next/navigation

למשל תוכלו לראות בדוגמה הבאה שימוש ב redirect בעמוד layout.tsx שהוא משחק כ use server (לא חייב לרשום את ההגדרה כי בנקסט use server הוא ברירת המחדל). כמו כן redirect זמין גם עבור רכיבים שהם use client אם כי יותר נפוץ ברכיבי צד שרת ושימוש של רידיירקט עושים ב router.push('/')

import { redirect } from "next/navigation";

import { getUserByUsername } from "@/lib/auth-service";

import { Navbar } from "./_components/navbar";

interface DashboardLayoutProps {
    params: { username: string };
    children: React.ReactNode;
}

const DashboardLayout = async ({ params, children }: DashboardLayoutProps) => {
    const user = await getUserByUsername(params.username);

    if (!user) {
        redirect("/");
    }

    return (
        <>
            <Navbar /> 
            <Container>{children}</Container>
        </>
    );
};

export default DashboardLayout;

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

• cookies
• headers
• revalidatePath
• notFound

פונקציות אלו שימושיות ונמצאות כמעט בכל פרויקט.

notFound

מאפשר לכם לרנדר רביב של notFound מצד שרת

import { notFound } from 'next/navigation'
 
async function fetchUser(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function Profile({ params }) {
  const user = await fetchUser(params.id)
 
  if (!user) {
    notFound()
  }
 
  // ...
}

revalidatePath

אחד החשובים במידה ותרצו לייצר רנדור נוסף עבור נתיבים ספציפיים מצד שרת. נפוץ גם מתוך actions וגם מתוך קבצי route.ts. זאת מכוון שכל קובץ שנוצר מהשרת עם נקסט, נשמר הקאש של המידע, מה שיכול לגרום למידע לא להתעדכן בזמן. מלבד revalidatePath ישנם פתרונות נוספים לבצע revalidate עם נקסט וכן יוזכר לפרטים בהמשך.

import { revalidatePath } from 'next/cache'
import { NextRequest } from 'next/server'
 
export async function GET(request: NextRequest) {
  const path = request.nextUrl.searchParams.get('path')
 
  if (path) {
    revalidatePath(path)
    return Response.json({ revalidated: true, now: Date.now() })
  }
 
  return Response.json({
    revalidated: false,
    now: Date.now(),
    message: 'Missing path to revalidate',
  })
}

headers

יאפשר לכם לקרוא מידע המגיע מההדאר של העמוד גם מרכיבי SSR .

import { headers } from 'next/headers'
 
export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')
 
  return <div>Referer: {referer}</div>
}

cookies

תוכלו לקרוא קוקיס דרך קבצי SSR וגם תוכלו לכתוב בקבצים המוגדרים כ actions או route

import { cookies } from 'next/headers'
 
export default function Page() {
  const cookieStore = cookies()
  return cookieStore.getAll().map((cookie) => (
    <div key={cookie.name}>
      <p>Name: {cookie.name}</p>
      <p>Value: {cookie.value}</p>
    </div>
  ))
}

'use server'
 
import { cookies } from 'next/headers'
 
async function create(data) {
  cookies().set('name', 'lee')
  // or
  cookies().set('name', 'lee', { secure: true })
  // or
  cookies().set({
    name: 'name',
    value: 'lee',
    httpOnly: true,
    path: '/',
  })
}

לסיכום קורס fullstack – פונקציות והוקים ב nextjs

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

תוכלו לייצר גם פונקציות משלכם כמובן לשימוש נרחב בכל הרכיבים שלכם, בין אם הם רכיבי SSR או CSR. וכן בהמשך הקורס נבנה גם הוקים ופונקציות ייחודיים ונראה כיצד להשתמש בהן (יותר לקראת סיום הקורס – יהיה מיני פרויקט). בפוסט הבא נדבר על use client ו use server ואיך עובדים נכון ומתכננים נכון רכיבים אלו וכמובן מה קורה לרכיב שהוא CSR שמכיל רכיבים שהם SSR. יהיה מעניין, ממליץ להמשיך לעקוב 🤓🐊.

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

nextJS – קורס fullstack – רכיבים של nextjs nextJS – קורס fullstack – איך מתחילים nextJS – קורס fullstack – עמודים ותבניות של nextJs מדריך ריאקט – react hooks | useContext