Tushundim, har bir o'yin uchun alohida sahifa yarataman. O'yin ma'lumotlari uchun shared data faylini, har bir o'yin uchun dinamik route va o'yin sahifasi komponentlarini yasayman. O'yin kartochkalaridagi "Play" tugmasi o'sha sahifaga olib boradi.
Endi shared data fayli, dinamik route va o'yin sahifasi komponentlarini yarataman:
Endi game card va games section komponentlarini yangilayman — "Play" tugmasi va kartochkalar o'yin sahifasiga link bo'lishi kerak:
Endi navbardagi linklar ham to'g'ri ishlashi uchun yangilayman:
Har bir o'yin uchun alohida sahifalar tayyor. lib/games-data.ts da barcha 6 ta o'yinning to'liq ma'lumotlari (tavsif, xususiyatlar, system requirements, sharhlar, skrinshotlar, narx, teglar) bitta joyda saqlanadi. /games/[slug] dinamik route orqali har bir o'yinning sahifasi ochiladi — skrinshot galereyasi, tabli kontent (Haqida/Talablar/Sharhlar), va sidebar (teglar, o'xshash o'yinlar) bilan. Game card va navbar linklari endi to'g'ridan-to'g'ri o'yin sahifalariga yo'naltiradi.
The code returns the following error:
Image with src "/images/game-1.jpg" was detected as the Largest Contentful Paint (LCP). Please add the `loading="eager"` property if this image is above the fold.
Read more: https://nextjs.org/docs/app/api-reference/components/image#loading
Revise the code to address the error.
The warning is about the first game card image (/images/game-1.jpg) being detected as LCP. Since the hero background already has priority, the first game card image also needs to be marked for eager loading. I'll add a priority prop option to the GameCard component and pass it for the first card.
Now pass priority for the first card in the games section:
Birinchi o'yin kartochkasidagi rasmga priority xususiyati qo'shildi — bu Next.js ga LCP (Largest Contentful Paint) rasm sifatida tanilgan elementni loading="eager" bilan yuklashni buyuradi. Faqat birinchi kartochka uchun priority={true} uzatiladi, qolgan rasmlar oddiy lazy load qiladi. Bu xato endi ko'rinmaydi.
You can send messages while the preview loads