nextJS – קורס fullstack – רכיבים של nextjs

קורס fullstack עם nextjs והפעם נדבר על רכיבים של nextjs שכדאי מאד להכיר. nextjs ממשיך להקל עלינו בעבודה וגם פותר לנו בעיות שאפילו ריאקט מתקשים בהם. אז על מה נדבר?

רכיבים ופתרונות מובנים של nextjs בקליינט

Link

בדומה ללינק של ריאקט, רק לינק של next, שמותאם יותר לצרכים של נקסט בסביבה שהיא SSR

דוגמה והסברים על השימושים של Link:

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
      // Navigate to /about?name=test
      <li>
      <Link
        href={{
          pathname: '/about',
          query: { name: 'test' },
        }}
      >
  About
</Link>

      </li>      
    </ul>
  )
}
 
export default Home;

להלן כל הפורפס של Link עם nextjs:

image

רכיב IMAGE מחליפה את <img> ועושה לנו חיים קלים עם תמונות. להלן דומגה:

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

רכיב זה עושה הרבה קסמים, למשל יבצע אופטימיזציה לתמונה בצורה מושלמת, אם אתה תעלו תמונה גודלה, תוכלו לראות כי המשקל של התמונה משנה למצב אופלימלי. כמו כן אם תרצו לשלוט ברזולוציה, תוכלו להשתמש בפרופ – quality . בשימוש ברכיב זה תדרשו לשים with and height ואם לא תרצו לשים יכול להיות שיהיה לכם קצת בעיה, אבל יש טריק, והטריק הוא להשתמש בתמונה בצורה הבאה:

import Image from 'next/image'
import imgOfCodcodile from './images/dog.png

export default function Page() {
  return (
    <Image
      src={imgOfCodcodile}
      alt="Picture of the author"
    />
  )
}

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

ברגע שתייבאו את התמונה, תכול להזין לsrc את המשתנה ולא תהיו חייבים להגדיר width and height. כמו כן הרכיב הוא רספונסיבי.

עוד משהו שימושי הוא loader – תוכלו לשים לואודר כלשהו שיעלה בזמן שהתמונה תטען.

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

font

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

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'
 
// define your variable fonts
const inter = Inter()
const lora = Lora()
// define 2 weights of a non-variable font
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// define a custom local font where GreatVibes-Regular.ttf is stored in the styles folder
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })
 
export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

ניתן לראות בדוגמה שימושים גם בפונטים של גוגל שנקסט תומך בהם build in, וגם מקבצי פונט לוקאליים.

ובשביל להיות לנו זמינים במקומות הרלוונטיים לנו נוכל להגדיר זאת כך:

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'
 
export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

לסיכום שיעור בנושא רכיבים של nextjs

אם והחלטתם ללמוד nextjs אני מציע לכם לעקוב אחר עדכונים בלינקדים או דרך הניוזרלטר של next ולהרשם בnextjsweekly.com . וכן להכיר את הרכיבים build in שנקסט בונים, מכוון שלרוב יתנו מענה יעיל ביותר. בפוסט הזה סקרתי חלק מהרכיבים על מנת שתכירו את הנושא הזה ותוכלו לגשת להיכרות עם רכיבים נוספים בהמשך ביתר קלות. בפוסט הבא נדבר על הוקים של נקסט שעושים לנו חיים עוד יותר קלים! נסקור לא מעט דברים כגון useRouter, usParams וכו.. והכי חשוב, נתחיל לדבר על use client ו use server שהוא אחד הדברים היותר מרכזיים והייחודים בnextjs.

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

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