كيفية ترحيل تطبيق Next.js من الإصدار 14 إلى الإصدار 15

مقدمة

يقدم Next.js 15 تحسينات في الأداء، وسلوك التخزين المؤقت، واستقرار التوجيه، وتكامل TurboPack. يمكن عادةً ترقية التطبيقات المبنية باستخدام Next.js 14 بسلاسة، ولكن العملية لا تزال تتطلب التحقق من صحة تغييرات التكوين وإزالة الأنماط المهجورة. يوفر هذا الدليل سير عمل واضح خطوة بخطوة لترحيل تطبيق Next.js 14 الحالي إلى Next.js 15.

المتطلبات الأساسية

قبل البدء، تأكد من أن لديك:

• تطبيق Next.js 14 قيد التشغيل
• Node.js 18.18+ أو 20+ أو 22+
• Git للتحكم في الإصدارات
• إلمام بنموذج توجيه التطبيق وعرض المكونات

1. مراجعة ملاحظات الإصدار

قبل الترقية، راجع ملاحظات إصدار Next.js الرسمية للحصول على أحدث التغييرات والتوجيهات: ملاحظات إصدار Next.js: وثائق Next.js

قبل الترقية، راجع ملاحظات إصدار Next.js الرسمية للتحقق من:

• قيم التكوين المهجورة
• تحديثات أنظمة التوجيه
• التغييرات في خط أنابيب العرض والتخزين المؤقت

فهم هذه التغييرات يساعد في منع المشكلات المتعلقة بالترحيل.

2. تحديث التبعيات الأساسية

راجع وثائق Next.js الرسمية للحصول على تعليمات التثبيت المحدثة: وثائق Next.js

لترقية الإطار، قم بتحديث Next.js وReact وReact DOM: قم بترقية Next.js وReact وReact DOM:

npm install next@latest react@latest react-dom@latest

npm install next@latest react@latest react-dom@latest

أو باستخدام yarn:

yarn add next@latest react@latest react-dom@latest

yarn add next@latest react@latest react-dom@latest

قم بتشغيل:

npm install

npm install

هذا يضمن توافق جميع التبعيات الثانوية مع أحدث إصدار.

3. تحديث next.config.js

يقدم Next.js 15 إعدادات افتراضية محسنة ويزيل الأعلام التجريبية القديمة.

يبدو التكوين النظيف كما يلي:

/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
 experimental: {
 serverActions: true
 }
};

module.exports = nextConfig;

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    serverActions: true
  }
};

module.exports = nextConfig;

قم بإزالة الخيارات المهجورة مثل أعلام TurboPack القديمة.

4. التحقق من صحة بنية موجه التطبيق

للحصول على فهم أعمق لأساسيات موجه التطبيق المستخدمة في كل من Next.js 14 و15، راجع دليلنا: إتقان موجه تطبيق Next.js

إذا كان تطبيقك يستخدم موجه التطبيق، تحقق من:

• كل جزء يحتوي على ملفات page.tsx وlayout.tsx صالحة
• مكونات الخادم لا تستورد واجهات برمجة التطبيقات الخاصة بالعميل فقط
• تتضمن مكونات العميل سطرًا علويًا "use client"

مثال:

"use client";
import { useState } from "react";

export default function Toggle() {
 const [open, setOpen] = useState(false);
 return <button onClick={() => setOpen(!open)}>Toggle</button>;
}

"use client";
import { useState } from "react";

export default function Toggle() {
  const [open, setOpen] = useState(false);
  return <button onClick={() => setOpen(!open)}>Toggle</button>;
}

يفرض Next.js 15 حدود المكونات بشكل أكثر صرامة.

5. تحديث نظام البيانات الوصفية

للحصول على نظرة عامة كاملة على واجهة برمجة تطبيقات البيانات الوصفية وقدراتها، راجع وثائق البيانات الوصفية لـ Next.js الرسمية يستمر Next.js 15 في دعم واجهة برمجة تطبيقات البيانات الوصفية. تأكد من أن تطبيقك يستخدم: يستمر Next.js 15 في دعم واجهة برمجة تطبيقات البيانات الوصفية. تأكد من أن تطبيقك يستخدم:

• تصدير metadata في layout.tsx
• البيانات الوصفية الديناميكية عبر generateMetadata

مثال:

export const metadata = {
 title: "Dashboard",
 description: "User dashboard"
};

export const metadata = {
  title: "Dashboard",
  description: "User dashboard"
};

قم بإزالة التنفيذات القديمة مثل استخدام استيرادات Head.

6. حل أخطاء وتحذيرات البناء

ابدأ خادم التطوير:

npm run dev

npm run dev

تشمل الأخطاء الشائعة:

• مكونات الخادم التي تستورد الخطافات
• استيرادات المسار غير الصحيحة
• استخدام البيانات الوصفية المهجورة

راجع التحذيرات بعناية، لأنها غالبًا ما تشير إلى التغييرات المطلوبة.

7. مراجعة الوسيط ومعالجات المسارات

تحقق من ملف middleware.ts الخاص بك وتأكد من أن المطابقات تتبع الاتفاقيات المحدثة:

export const config = {
 matcher: ["/dashboard/:path*"]
};

export const config = {
  matcher: ["/dashboard/:path*"]
};

تحقق من صحة معالجات المسارات باستخدام نمط route.ts.

8. اختبار مسارات API

لمزيد من التفاصيل حول معالجات المسارات وأفضل الممارسات، راجع وثائق توجيه API لـ Next.js، تأكد من مسارات API الخاصة بك تحت app/api/.../route.ts: تأكد من مسارات API الخاصة بك تحت app/api/.../route.ts:

export async function GET() {
 return Response.json({ status: "ok" });
}

export async function GET() {
  return Response.json({ status: "ok" });
}

اختبر الاستجابات المتدفقة وسلوك التخزين المؤقت لضمان التوافق.

9. البناء والنشر

أخيرًا، قم بتشغيل:

npm run build

npm run build

قم بحل أي تحذيرات وانشر باستخدام البيئة المفضلة لديك.

الخاتمة

الترحيل من Next.js 14 إلى 15 أمر بسيط عند اتباع نهج منظم. من خلال تحديث التبعيات، ومراجعة تغييرات التكوين، والتحقق من صحة اتفاقيات موجه التطبيق، واختبار مسارات API، تضمن أن تطبيقك يستفيد من الأداء والاستقرار المحسنين. الترقية المنتظمة لإصدار Next.js الخاص بك تحافظ على مشروعك آمنًا وقابلاً للصيانة وجاهزًا للتحسينات المستقبلية.