Next V15 هیولایی قدرتمند در نسخه Beta منتشر شد !! 😎

Next.js یک فریمورک قدرتمند برای توسعه وب است که بر پایه کتابخانه React ساخته شده است. این فریمورک به توسعه‌ دهندگان اجازه می‌دهد تا وب‌سایت‌ها و وب‌ اپلیکیشن‌ های سریع و کاربرپسندی را ایجاد کنند. 

نسخه جدید Next.js 15 اخیراً منتشر شده است 🥳 و شامل تغییرات و بهبودهای مهمی است که تجربه برنامه‌نویسی را به سطح جدیدی می‌برد.

 در اینجا به برخی از ویژگی‌ها و تغییرات کلیدی این نسخه می‌پردازیم:

╗ ویژگی‌ها و تغییرات کلیدی در Next.js 15 ╔

پشتیبانی از React 19 ╔

نسخه 15 اکنون از React 19 پشتیبانی می‌کند که شامل ویژگی‌های جدید برای کلاینت و سرور، مانند actionها است.

React Compiler ╔

این نسخه از React Compiler پشتیبانی می‌کند که به بهینه‌سازی خودکار کدها کمک می‌کند و نیاز به استفاده از API هایی مانند useMemo و useCallback را کاهش می‌دهد

بهبود خطاهای Hydration ╔

پیام‌های خطا و خطاهای hydration بهبود یافته‌اند و اکنون سورس کد خطا را با پیشنهاداتی در مورد نحوه رسیدگی به این مشکل نشان می‌دهند

Caching ╔

درخواست‌های fetch، GET Route Handlerها و client navigationها به‌طور پیش‌فرض در حافظه cache ذخیره نمی‌شوند

Partial Prerendering ╔

افزودن گزینه پیکربندی جدید برای لود تدریجی کامپوننت‌ها

API جدید next/after ╔

معرفی API جدید برای اجرای کد پس از اتمام stream توسط response

به‌روزرسانی create-next-app ╔

طراحی جدید و افزودن یک flag جدید به منظور فعال کردن Turbopack در توسعه لوکال

نحوه نصب Next.js 15 ╔

برای نصب نسخه بتا یا پیش‌نمایش Next.js 15، می‌توانید از دستور زیر استفاده کنید:

npm install next@canary

این دستور نسخه بتا یا پیش‌نمایش را نصب می‌کند که شامل ویژگی‌ها و بهبودهای جدید است. اگر می‌خواهید نسخه پایدار را نصب کنید، می‌توانید از دستور زیر استفاده کنید:

npm install next

پیکر بندی React Compiler ╔

برای استفاده از React Compiler، باید افزونه Babel مربوطه را نصب کنید و تنظیمات زیر را در فایل next.config.js اضافه کنید:

نصب افزونه Babel ╔

npm install babel-plugin-react-compiler

افزودن تنظیمات به next.config.js ╔ 

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

به صورت اختیاری، می‌توانید کامپایلر را برای اجرا در حالت “opt-in” به صورت زیر پیکربندی کنید ╔

const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};

module.exports = nextConfig;