Magdy Atef Zahran

Advanced Features: Image Optimization

هنكمل كلامنا عن الحاجات المتقدمة في Next.js وهنركز على مميزات ممكن تحسن تجربة المستخدم والموقع بشكل كبير زي Image Optimization، Built-in Analytics، وCustom App وDocument. كل واحدة من دول هتفتحلك باب جديد في تحسين موقعك ان شاء الله

1. تحسين الصور (Image Optimization):

في البدايه الصور بتاخد جزء كبير من وقت تحميل أي موقع عشان كدا Next وفر <Image /> كحل لتحسين الصور بشكل أوتوماتيكي.

طيب اي اللي بيميز <Image />؟

تحسين تلقائي للصورة لانه هيختار الجودة المناسبة حسب الشاشة والجهاز.
Responsive Images لان الصورة بتتغير حجمها حسب الشاشة.
ودعم لصيغ حديثة زي WebP اللي بتقلل الحجم من غير ما تأثر على الجودة

مثال عملي

import Image from 'next/image'; export default function Example() { return ( <Image src="/example.jpg" alt="وصف للصورة" width={600} height={400} placeholder="blur" priority /> ); }

لو عندك صور كتير استخدم حاجه زي Cloudinary افضل.

Built-in Analytics:

هتقدر تعرف إيه أكتر الصفحات اللي الناس بتزورها و سرعة تحميل موقعك في أماكن مختلفة وغيره…

طيب إزاي افعلها؟

هتنزل الباكدج:

npm install @vercel/analytics

هتفعلها في مشروعك من لوحة التحكم على Vercel وهتلاقي تقارير شاملة عن أداء الموقع والزيارات وغيره.

Custom App و Document:

Custom App (_app.js):

لو عايز تضيف Global Layout لكل الصفحات زي الهيدر والفوتر هتستخدم الملف ده.

// _app.js export default function MyApp({ Component, pageProps }) { return ( <> <Header /> <Component {...pageProps} /> <Footer /> </> ); }

Custom Document (_document.js):

لو محتاج تتحكم في الـ <html> أو <body>:

import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( <Html lang="ar"> <Head> <link rel="icon" href="/favicon.ico" /> <meta name="theme-color" content="#ffffff" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); }