מדריך Next.JS חלק 3 - ניווט בין דפים
אחד האתגרים המשמעותיים בפיתוח Single Page Application ושימוש ב JavaScript Frameworks היה תמיד הניווט בין דפים. בפעולה הרגילה שלו בדפדפן כל פעם שעוברים לדף חדש באתר הדפדפן טוען קובץ HTML חדש ואת כל הנכסים שלו ומציג את התוכן החדש, וכמובן מנקה את כל הזיכרון של ה JavaScript. הבעיה ביישומי Single Page Applications, או אולי יותר נכון להגיד היתרון ביישומים כאלה, הוא שעכשיו אין צורך לטעון את כל הדף מחדש במעבר בין דפים, ושבעזרת JavaScript אפשר לתת למשתמש הרגשה של מעבר בין דפים בלי לעבור דרך מנגנון זה בדפדפן, וכך לקבל ביצועים הרבה יותר טובים.
1. איך זה עובד
ב Next.JS מנגנון המעבר בין דפים מובנה בתוך הפריימוורק. ל next יש קומפוננטה מיוחדת בשם Link שלחיצה עליה גורמת ל JavaScript לטעון את הקוד של ה"דף" הבא ולהציג אותו. כמובן שהם מטפלים בשבילנו בלחיצות על כפתור אחורה בדפדפן ובשינוי כתובת העמוד (בשביל סימניות ושיתוף). בנוסף Next ישמור בזיכרון מטמון בדפדפן את התוצאות שקיבל מהשרת כך שניווט לדפים אחורה יהיה מהיר יותר.
את הדפים עצמם אנחנו מגדירים בתור תיקיות חדשות בתיקיית הפרויקט כאשר בכל תיקיה שמייצגת דף צריך להיות קובץ בשם page.tsx שאחראי על התוכן של הדף.
בואו ננסה את זה עם האפליקציה שהתחלנו לכתוב בחלקים הקודמים של המדריך. ניצור תיקיה חדשה בשם about ובתוכה קובץ בשם page.tsx עם התוכן הבא:
export default () => {
return (
<div>
<h1>About Us</h1>
<p>This is an example lesson for using next.js router</p>
</div>
)
}
רק עד כאן זה מספיק כדי לראות את שני הדפים שלנו. נווטו לשתי הכתובות:
http://localhost:3000
http://localhost:3000/about
כדי לראות את שני הדפים שיצרנו.
2. מעבר בין דפים
נוסיף שורת תפריט עליון כדי לעבור בין הדפים. צרו קובץ חדש בתיקיה הראשית בשם menu.tsx עם התוכן הבא:
import Link from 'next/link';
export default () => {
return (
<nav className='flex my-4 border-4 border-indigo-200 border-l-indigo-500'>
<Link href="/" className='flex-1 px-2'>Home</Link>
<Link href="/about" className='flex-1 px-2'>About</Link>
</nav>
)
}
נוסיף את התפריט העליון לקובץ layout.tsx באמצעות השינוי הבא:
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import TopMenu from './menu';
import './globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
<TopMenu />
{children}
</body>
</html>
)
}
עכשיו כשנכנס מחדש לדף אנחנו רואים תפריט עליון עם שני הלינקים, ובנוסף לחיצה על כל אחד מהלינקים תגרום לשינוי הדף הפעיל ולהצגת הדף עליו לחצנו.
3. הצגת הדף הנוכחי
בשביל להבין מי הדף הנוכחי ולשנות את העיצוב שלו בתפריט אנחנו יכולים להשתמש ב Hooks בשם usePathname. העדכון הבא לקומפוננטת התפריט יגרום להצגת עיגול קטן ליד הדף הנוכחי כדי שנדע איפה אנחנו:
"use client";
import Link from 'next/link';
import { usePathname } from 'next/navigation'
export default () => {
const pathname = usePathname()
return (
<nav className='flex my-4 border-4 border-indigo-200 border-l-indigo-500'>
<div className='flex-1 px-2'>
<Link href="/" >Home</Link>
{pathname == "/" &&
<span className="ml-2 w-2 h-2 bg-blue-500 rounded-full inline-block"></span>
}
</div>
<div className='flex-1 px-2'>
<Link href="/about" >About</Link>
{pathname == "/about" &&
<span className="ml-2 w-2 h-2 bg-blue-500 rounded-full inline-block"></span>
}
</div>
</nav>
)
}
4. עכשיו אתם
הוסיפו דף נוסף לאפליקציה בשם Contact והציגו בו טופס "צור קשר". שימו לב לעדכן את התפריט כדי להציג את שלושת הדפים.
בואו נשחק עם מנגנון ה Cache של נקסט - הוסיפו עמוד נוסף שמציג את התאריך ושעה הנוכחיים עם new Date. נסו לנווט אליו דרך התפריט ושימו לב מתי הערך ישתנה. נסו גם לרענן את העמוד עם F5 ושימו לב לשינויים.
הוציאו את ה Link יחד עם העיגול שלו לקומפוננטה נפרדת כדי שתוכלו להפוך את קומפוננטת התפריט חזרה לקומפוננטת צד-שרת.