دليل تحسين أداء تطبيقات Next.js: تقنيات عملية وتسريع المواقع
تعلم كيفية تسريع تطبيقات Next.js من خلال تحسين الصور وتقسيم الكود والتوليد الثابت وتحميل الخطوط وتقليل حجم الحزمة.
إنشاء تطبيقات ويب سريعة أمر ضروري. يوفر Next.js العديد من ميزات الأداء المدمجة، لكن المطورين بحاجة لاستخدامها بذكاء ومواكبة التحديثات. في هذا الدليل، سنغطي تقنيات عملية لتسريع تطبيقات Next.js، مع ملاحظات حول التغييرات في الإصدارات الحديثة (14 و15).
تحديثات هامة في Next.js 14 و15
- الحد الأدنى لإصدار Node.js أصبح 18.17.
- تم إزالة الأمر
next exportلصالح إعدادoutput: 'export'فيnext.config.js. - تم إزالة الحزمة
@next/fontنهائيًا، ويجب استخدامnext/fontالمدمجة. - APIs مثل
cookiesوheadersوdraftModeأصبحت الآن غير متزامنة (async) ويجب استخدامawaitمعها في Next.js 15. - لم تعد طلبات
fetchتُخزن مؤقتًا افتراضيًا. استخدم{ cache: 'force-cache' }إذا كنت بحاجة للتخزين المؤقت. - تم تحديث بعض إعدادات التكوين مثل
experimental-edgeإلىedgeفقط. - إذا كنت تستخدم TypeScript، تأكد من تحديث
@types/reactو@types/react-dom.
راجع دليل الترقية الرسمي لمزيد من التفاصيل.
تحسين الصور
الصور الكبيرة أو غير المحسنة هي عنق زجاجة شائع للأداء. مكون <Image> المدمج في Next.js يساعد في تحسين الصور تلقائياً. يقوم بتقديم الصور بالحجم المناسب وبصيغ حديثة (مثل WebP/AVIF) ويفعّل Lazy Loading افتراضياً. على سبيل المثال، استخدم <Image> في مكونك:
1import Image from "next/image";
2
3export default function Hero() {
4 return (
5 <div>
6 <Image
7 src="/images/hero.jpg"
8 alt="Hero section"
9 width={1200}
10 height={600}
11 priority
12 />
13 <p>مرحباً بك في الموقع!</p>
14 </div>
15 );
16}- Lazy Loading: يتم تحميل الصور فقط عند ظهورها في نافذة العرض.
- أحجام متجاوبة: يختار
<Image>تلقائياً الحجم والصيغة المناسبة لكل جهاز. - Placeholder: يمكنك استخدام
placeholder="blur"لعرض معاينة منخفضة الجودة أثناء تحميل الصورة الكاملة.
تقسيم الكود وLazy Loading
يقوم Next.js بتقسيم الكود تلقائياً على مستوى الصفحة. كل صفحة ومكون خادمي يتم تجميعه بشكل منفصل، لذا يتم تحميل جافاسكريبت اللازم فقط للصفحة الحالية. يمكنك أيضاً استخدام Lazy Loading للمكونات الثقيلة:
1import dynamic from "next/dynamic";
2
3const DynamicChart = dynamic(() => import("../components/Chart"), {
4 loading: () => <p>جاري تحميل الرسم البياني...</p>,
5});
6
7export default function Dashboard() {
8 return (
9 <div>
10 <h1>لوحة تحكم المبيعات</h1>
11 <DynamicChart />
12 </div>
13 );
14}التوليد الثابت (SSG) والتحديثات التزايدية
يدعم Next.js عدة استراتيجيات للعرض. التوليد الثابت للموقع (SSG) غالباً ما يكون الأسرع: يتم بناء الصفحات مسبقاً في وقت البناء وتقديمها كـ HTML ثابت.
1// pages/index.js
2export async function getStaticProps() {
3 const res = await fetch("https://api.example.com/posts");
4 const posts = await res.json();
5 return { props: { posts } };
6}
7
8export default function HomePage({ posts }) {
9 return (
10 <div>
11 <h1>أحدث المقالات</h1>
12 <ul>
13 {posts.map((post) => (
14 <li key={post.id}>{post.title}</li>
15 ))}
16 </ul>
17 </div>
18 );
19}تحميل الخطوط وتحسينها
استخدم next/font المدمجة (وليس @next/font):
1// app/layout.tsx
2import { Roboto } from "next/font/google";
3
4const roboto = Roboto({
5 weight: "400",
6 subsets: ["latin"],
7});
8
9export default function RootLayout({ children }) {
10 return (
11 <html lang="ar" className={roboto.className}>
12 <body>{children}</body>
13 </html>
14 );
15}تقليل حجم حزمة جافاسكريبت
- استخدم
@next/bundle-analyzerلتحليل الحزمة. - استورد فقط ما تحتاجه (Tree-shaking).
- استخدم مكتبات خفيفة.
- مكونات الخادم (App Router) لا تُرسل للعميل.
نصائح وأدوات إضافية
- استخدم التخزين المؤقت HTTP وCDN.
- فعّل gzip/Brotli.
- راقب Core Web Vitals باستخدام Lighthouse أو Next.js Analytics.
الخلاصة
تابع تحديثات Next.js وراجع دائمًا دليل الترقية عند كل إصدار جديد. استخدام الميزات المدمجة وأفضل الممارسات سيحسن الأداء ورضا المستخدم.
