Next.js 13.3 | Next.js العربية

يضيف Next.js 13.3 ميزات مطلوبة من المجتمع، بما في ذلك:

واجهة برمجة تطبيقات Metadata المعتمدة على الملفات: إنشاء خرائط المواقع، ملفات robots، الأيقونات المفضلة، وغيرها ديناميكيًا.
صور Open Graph الديناميكية: إنشاء صور OG باستخدام JSX، HTML، وCSS.
التصدير الثابت لموجه التطبيق (App Router): دعم المواقع الثابتة / تطبيقات الصفحة الواحدة (SPA) لمكونات الخادم.
المسارات المتوازية والاعتراض: ميزات توجيه متقدمة لموجه التطبيق.

قم بالتحديث اليوم عن طريق تشغيل:

Terminal

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

نحن نقترب من وضع علامة على موجه التطبيق كإصدار مستقر في الإصدار الثانوي القادم ونركز الآن على تحسين الأداء، تحسين السلوكيات، وإصلاح الأخطاء.

بينما ما زلنا نعمل على بعض الميزات مثل الطفرات (Mutations)، لا نتوقع أن تؤثر هذه على سطح واجهة برمجة التطبيقات لميزات موجه التطبيق الأخرى. نحن متحمسون لرؤية ما ستبنيه باستخدام موجه التطبيق ونتطلع إلى ملاحظاتك.

واجهة برمجة تطبيقات Metadata المعتمدة على الملفات

في Next.js 13.2، أعلنا عن واجهة برمجة تطبيقات Metadata جديدة، تتيح لك تعريف البيانات الوصفية (مثل علامات title، meta، و link داخل عنصر head في HTML) عن طريق تصدير كائن Metadata من تخطيط أو صفحة.

layout.js or page.js

// إما بيانات وصفية ثابتة
export const metadata = {
  title: 'الصفحة الرئيسية',
};
// الناتج:
// <head>
//	 <title>الصفحة الرئيسية</title>
// </head>
 
// أو بيانات وصفية ديناميكية
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return { title: product.title };
}
// الناتج:
// <head>
//	 <title>منتجي الفريد</title>
// </head>
 
export default function Page() {}

بالإضافة إلى البيانات الوصفية المعتمدة على التكوين، تدعم واجهة برمجة تطبيقات Metadata الآن اصطلاحات ملفات جديدة، مما يسمح لك بتخصيص صفحاتك بسهولة لتحسين تحسين محركات البحث (SEO) والمشاركة على الويب:

opengraph-image.(jpg|png|svg)
twitter-image.(jpg|png|svg)
favicon.ico
icon.(ico|jpg|png|svg)
sitemap.(xml|js|jsx|ts|tsx)
robots.(txt|js|jsx|ts|tsx)
manifest.(json|js|jsx|ts|tsx)

على سبيل المثال، يمكنك استخدام البيانات الوصفية المعتمدة على الملفات لإضافة أيقونة مفضلة لتطبيقك وصورة Open Graph لصفحة /about:

app
├── favicon.ico
├── layout.js
├── page.js
└── about
    ├── opengraph-image.jpg
    └── page.js

سيقوم Next.js تلقائيًا بتقديم هذه الملفات مع تجزئات (لاسم الملف) في الإنتاج للتخزين المؤقت، وتحديث عناصر head ذات الصلة بمعلومات البيانات الوصفية الصحيحة مثل عنوان URL للأصل، نوع الملف، وحجم الصورة.

// عند زيارة "/"
<link rel="icon" href="<computedUrl>"/>
 
// عند زيارة "/about"
<link rel="icon" href="<computedUrl>"/>
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />

إضافة ملفات ثابتة إلى تطبيقك هو غالبًا أبسط نهج، ولكن هناك حالات قد تحتاج فيها إلى إنشاء ملفات ديناميكيًا. لكل اصطلاح ملف ثابت، هناك متغير ديناميكي مصاحب (.js|.jsx|.ts|.tsx) يسمح لك بكتابة كود لإنشاء الملف.

على سبيل المثال، بينما يمكنك إضافة ملف sitemap.xml ثابت، فإن معظم المواقع لديها بعض الصفحات التي يتم إنشاؤها ديناميكيًا باستخدام مصدر بيانات خارجي. لإنشاء خريطة موقع ديناميكية، يمكنك إضافة ملف sitemap.js يعيد مصفوفة من مساراتك الديناميكية.

app/sitemap.js

export default async function sitemap() {
  const res = await fetch('https://.../posts');
  const allPosts = await res.json();
 
  const posts = allPosts.map((post) => ({
    url: `https://acme.com/blog/${post.slug}`,
    lastModified: post.publishedAt,
  }));
 
  const routes = ['', '/about', '/blog'].map((route) => ({
    url: `https://acme.com${route}`,
    lastModified: new Date().toISOString(),
  }));
 
  return [...routes, ...posts];
}

مع خيارات المعتمدة على التكوين والجديدة المعتمدة على الملفات، لديك الآن واجهة برمجة تطبيقات Metadata شاملة لتغطية البيانات الوصفية الثابتة والديناميكية.

واجهة برمجة تطبيقات Metadata متاحة في 13.3 لموجه التطبيق (app). وهي غير متاحة في دليل pages. تعلم المزيد عن البيانات الوصفية المعتمدة على الملفات وعرض مرجع واجهة برمجة التطبيقات.

إنشاء صور Open Graph الديناميكية

قبل ستة أشهر، أصدرنا @vercel/og و Satori، مكتبات تتيح لك إنشاء صور ديناميكيًا باستخدام JSX، HTML، وCSS.

تم اختبار @vercel/og في Next.js Conf، حيث تم إنشاء أكثر من 100,000 صورة تذكرة ديناميكية لكل مشارك. مع اعتماد واسع النطاق بين عملاء Vercel وأكثر من 900,000 تنزيل منذ الإصدار، نحن متحمسون لجلب الصور المولدة ديناميكيًا إلى جميع تطبيقات Next.js دون الحاجة إلى حزمة خارجية.

يمكنك الآن استيراد ImageResponse من next/server لإنشاء الصور:

/app/about/opengraph-image.tsx

import { ImageResponse } from 'next/server';
 
export const size = { width: 1200, height: 600 };
export const alt = 'حول Acme';
export const contentType = 'image/png';
export const runtime = 'edge';
 
export default function og() {
  return new ImageResponse();
  // ...
}

يتكامل ImageResponse بشكل طبيعي مع واجهات برمجة تطبيقات Next.js الأخرى، بما في ذلك معالجات المسار والبيانات الوصفية المعتمدة على الملفات. على سبيل المثال، يمكنك استخدام ImageResponse في ملف opengraph-image.tsx لإنشاء صور Open Graph وTwitter في وقت البناء أو ديناميكيًا في وقت الطلب.

تعلم المزيد عن واجهة برمجة تطبيقات Image Response.

التصدير الثابت لموجه التطبيق

يدعم موجه تطبيق Next.js الآن التصدير الثابت بالكامل.

يمكنك البدء كموقع ثابت أو تطبيق صفحة واحدة (SPA)، ثم الترقية لاحقًا لاستخدام ميزات Next.js التي تتطلب خادمًا.

عند تشغيل next build، يقوم Next.js بإنشاء ملف HTML لكل مسار. عن طريق تقسيم تطبيق SPA صارم إلى ملفات HTML فردية، يمكن لـ Next.js تجنب تحميل كود JavaScript غير الضروري على جانب العميل، مما يقلل حجم الحزمة ويمكن تحميل الصفحات بشكل أسرع.

next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
};
 
module.exports = nextConfig;

يعمل التصدير الثابت مع ميزات موجه التطبيق الجديدة بما في ذلك معالجات المسار الثابتة، صور Open Graph، ومكونات الخادم React.

على سبيل المثال، ستقوم مكونات الخادم بالعمل أثناء البناء، بشكل مشابه لإنشاء المواقع الثابتة التقليدية، مما يؤدي إلى عرض المكونات في HTML ثابت للتحميل الأولي للصفحة وحمولة ثابتة للتنقل بين المسارات على العميل.

سابقًا، لاستخدام التصدير الثابت في دليل pages، كنت بحاجة إلى تشغيل next export. ومع ذلك، مع خيار next.config.js، سيقوم next build بإخراج دليل out عند تعيين output: 'export'. يمكنك استخدام نفس التكوين لموجه التطبيق ودليل pages. هذا يعني أن next export لم يعد مطلوبًا.

مع دعم التصدير الثابت المتقدم، ستحصل على أخطاء في وقت مبكر من عملية التطوير (next dev)، مثل عند محاولة استخدام وظيفة ديناميكية تتطلب خادمًا مثل cookies() أو headers().

تعلم المزيد عن التصدير الثابت.

المسارات المتوازية والاعتراض

يقدم Next.js 13.3 اصطلاحات ديناميكية جديدة تتيح لك تنفيذ حالات التوجيه المتقدمة: المسارات المتوازية ومسارات الاعتراض. تتيح لك هذه الميزات عرض أكثر من صفحة واحدة في نفس العرض، مثل لوحات التحكم المعقدة أو النوافذ المنبثقة.

مع المسارات المتوازية، يمكنك عرض صفحة واحدة أو أكثر في نفس الوقت في نفس العرض والتي يمكن التنقل بينها بشكل مستقل. يمكن أيضًا استخدامها لعرض الصفحات بشكل مشروط.

يتم إنشاء المسارات المتوازية باستخدام "فتحات" مسماة. يتم تعريف الفتحات باستخدام اصطلاح @folder:

dashboard
├── @user
│   └── page.js
├── @team
│   └── page.js
├── layout.js
└── page.js

يقبل التخطيط في نفس مقطع المسار الفتحات كخصائص:

app/dashboard/layout.js

export default async function Layout({ children, user, team }) {
  const userType = getCurrentUserType();
 
  return (
    <>
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}

في المثال أعلاه، يتم عرض فتحات المسار المتوازي @user و @team (الصريحة) بشكل مشروط بناءً على منطقك. children هي فتحة مسار ضمنية لا تحتاج إلى تعيينها إلى @folder. على سبيل المثال، dashboard/page.js يعادل dashboard/@children/page.js.

تسمح لك مسارات الاعتراض بتحميل مسار جديد داخل التخطيط الحالي مع "إخفاء" عنوان URL للمتصفح. هذا مفيد عندما يكون الحفاظ على سياق الصفحة الحالية مهمًا، مثل توسيع صورة في موجز من خلال نافذة منبثقة حيث يتم الاحتفاظ بالملخص في خلفية النافذة المنبثقة.

يمكن تعريف مسارات الاعتراض باستخدام اصطلاح (..)، مشابهًا للمسارات النسبية ../. يمكنك أيضًا استخدام اصطلاح (...) لإنشاء مسار نسبي لدليل app.

feed
├── @modal
│   └── (..)photo
│       └── [id]
│           └── page.tsx
├── page.tsx
└── layout.tsx
photo
└── [id]
    └── page.tsx

في المثال أعلاه، سيؤدي النقر على الصورة من ملف تعريف المستخدم إلى فتح الصورة في نافذة منبثقة أثناء التنقل على جانب العميل. ومع ذلك، سيؤدي التحديث أو مشاركة الصفحة إلى تحميل الصورة بتخطيطها الافتراضي.

تمكن المسارات المتوازية والاعتراض من التوجيه المشابه لـ Instagram في النوافذ المنبثقة.

هذا يحل التحديات التي قد تواجهها عند إنشاء النوافذ المنبثقة، مثل جعل محتوى النافذة المنبثقة قابل للمشاركة عبر عنوان URL، ومنع فقدان السياق عند تحديث الصفحة، وإغلاق وإعادة فتح النافذة المنبثقة مع التنقل للخلف وللأمام.

لمزيد من الأمثلة والسلوك، راجع توثيق المسارات المتوازية ومسارات الاعتراض.

تحسينات أخرى

تحديثات التصميم: تم تحديث الصفحة الرئيسية والمعرض لـ Next.js بتصميم جديد.
Turbopack: تمت إضافة دعم للـ Middleware، جميع خيارات next/font، والبث مع مكونات الخادم مع اقترابها من النسخة التجريبية (شاهد العرض التوضيحي). كما أصلحنا أخطاء إضافية تم اكتشافها أثناء الاختبار على تطبيقات Next.js ناضجة مثل vercel.com و nextjs.org. تعلم المزيد.
تحديث سريع لـ next.config.js: سيؤدي إجراء تغييرات على next.config.js الآن إلى إعادة تشغيل خادم التطوير المحلي تلقائيًا. هذا يمتد إلى التحميل التلقائي لملفات التكوين .env، .env.*، jsconfig.json، tsconfig.json.
إمكانية الوصول: يتضمن موجه التطبيق الآن إعلان المسار من pages. تعلن هذه الميزة عن انتقالات المسار على جانب العميل لقارئات الشاشة وتقنيات المساعدة الأخرى. تعلم المزيد.
روابط مكتوبة بشكل ثابت: يتم الآن اعتبار redirects و rewrites المحددة في next.config.js أثناء فحص النوع. تعلم المزيد.
Tailwind CSS لـ create-next-app: عند بدء مشروع جديد باستخدام npx create-next-app@latest، يمكنك الآن اختيار Tailwind CSS اختياريًا، أو استخدام علامة --tailwind، لتكوين تطبيقك مسبقًا باستخدام حل التصميم هذا.
معالجات المسار: استخدام export default بدلاً من فعل HTTP مدعوم يطرح الآن خطأ مفيد مع route.ts. تعلم المزيد عن معالجات المسار.
الصور: يدعم next/image الآن السمة fetchPriority="high".
البيانات الوصفية: تمت إزالة واجهة برمجة التطبيقات السابقة للبيانات الوصفية (head.js)، والتي تم إهمالها في 13.2. بدلاً من ذلك، استخدم الدعم المدمج لتحسين محركات البحث (SEO) من خلال واجهة برمجة تطبيقات Metadata.
إخراج المجلدات من التوجيه: أضف بادئة _ إلى مجلد لاستبعاده وأي مقاطع فرعية من التوجيه. على سبيل المثال، لن يكون app/_dashboard/page.tsx قابلاً للتوجيه.
موجه التطبيق: أضفنا خطاف مكون العميل useParams الجديد لقراءة المعلمات الديناميكية لمقطع المسار المحدد. تعلم المزيد.
تحسين تحميل أوراق الأنماط: ينفذ Next.js الآن CSS الخاص بـ React’s Suspense والذي يصحح العديد من المشكلات حول تحميل CSS وميض المحتوى غير المصمم، خاصة أثناء التنقل.
تحسين معالجة Not Found: بالإضافة إلى التقاط أخطاء notFound() المتوقعة، سيتعامل ملف app/not-found.js الجذري أيضًا مع أي عناوين URL غير متطابقة لتطبيقك بالكامل. هذا يعني أن المستخدمين الذين يزورون عنوان URL غير معالج بواسطة تطبيقك سيشاهدون واجهة المستخدم التي تم تصديرها بواسطة ملف app/not-found.js. تعلم المزيد.
تحسين ذاكرة التخزين المؤقت لموجه العميل: سيقوم router.refresh() الآن بإبطال ذاكرة التخزين المؤقت بالكامل وتكون معلمات البحث الآن جزءًا من مفتاح ذاكرة التخزين المؤقت مما يسمح بالتنقل بين معلمتي بحث (مثل /?search=leerob و /?search=tim) لاستعادة المحتوى الذي يعتمد على المعلمة بشكل صحيح.

المجتمع

Next.js هو نتيجة العمل المشترك لأكثر من 2,600 مطور فردي، شركاء صناعيين مثل Google و Meta، وفريقنا الأساسي في Vercel. مع أكثر من 4.2 مليون تنزيل npm أسبوعيًا وأكثر من 104,000 نجمة على GitHub، يعد Next.js أحد أكثر الطرق شيوعًا لبناء الويب.

انضم إلى المجتمع على مناقشات GitHub، Reddit، و Discord.

تم تقديم هذا الإصدار بواسطة:

فريق Next.js: أندرو، بالاز، هانز، جان، جيا تشي، جيمي، جي جي، جوش، سيبيستيان، شو، ستيفن، تيم، و وايات.
فريق Turbopack: أليكس، دوني، جاستن، ليا، لونج يينان، مايا، OJ، توبياس، و ويل.

ومساهمات: @shuding، @huozhi، @sokra، @hanneslund، @JesseKoldewijn، @kaguya3222، @yangshun، @ijjk، @konomae، @Brooooooklyn، @jridgewell، @zlrlyy، @JohnDaly، @abhiyandhakal، @benjie، @johnnyomair، @nk980113، @dirheimerb، @DerTimonius، @DuCanhGH، @padmaia، @stafyniaksacha، @Gladowar، @zek، @jankaifer، @styfle، @balazsorban44، @wbinnssmith، @chibicode، @ForsakenHarmony، @franktronics، @FSaldanha، @Schniz، @raisedadead، @AdamKatzDev، @wyattjoh، @leerob، @meesvandongen، @vladikoff، @feedthejim، @tka5، @pyjun01، @gdborton، @M3kH، @aretrace، @shivanshubisht، @alexkirsz، @agrattan0820، @vinaykulk621، @heyitsuzair، @mrkldshv، @timneutkens، @furkanmavili، @swaminator، @EndangeredMassa، @DevEsteves، @rishabhpoddar، @schehata، @molebox، @dlehmhus، @akshaynox، @sp00ls، @janicklas-ralph، @tomryanx، @kwonoj، @karlhorky، @kdy1، @dante-robinson، @lachlanjc، @ianmacartney، @hotters، @isaackatayev، @insik-han، @jayair، @ivanhofer، @javivelasco، @SukkaW، @visshaljagtap، @imranbarbhuiya، @nivak-monarch، @HarshaVardhanReddyDuvvuru، @ianldgs، @ricardofiorani، @swarnava، و @gustavostz.