Next.js 15.1 | Next.js

Next.js 15.1 ارتقاهای عمده، APIهای جدید و بهبودهایی را در تجربه توسعه دهندگان به ارمغان می آورد. به روز رسانی های کلیدی عبارتند از:

همین امروز ارتقا دهید یا با:

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
 
# ...or start a new project
npx create-next-app@latest

Next.js 15.1 اکنون به طور کامل از React 19 پشتیبانی می کند:

• درباره روتر صفحات: اکنون می‌توانید از React 19 stable بدون نیاز به نسخه‌های Release Candidate یا Canary به همراه پشتیبانی مداوم از React 18 استفاده کنید.
• برای روتر برنامه: ما به ارائه نسخه های داخلی React Canary ادامه خواهیم داد. اینها شامل همه تغییرات پایدار در React 19 و همچنین ویژگی‌های جدیدتر است که قبل از انتشار جدید React در چارچوب تأیید شده است.

پس از انتشار Next.js 15، یکی از موارد اضافه شده قابل توجه به React 19 «پیش گرم شدن برادر» بود.

برای بررسی دقیق به‌روزرسانی‌های React 19، لطفاً به پست رسمی وبلاگ React 19 مراجعه کنید.

ما برای اشکال‌زدایی در Next.js بهبودهایی ایجاد کرده‌ایم تا اطمینان حاصل کنیم که می‌توانید به سرعت منبع مشکلات را پیدا کنید، خواه در ترمینال، مرورگر، یا اشکال‌زدای پیوست شده ظاهر شوند. این بهبودها برای Webpack و Turbopack اعمال می‌شوند (از قبل با Next.js 15 پایدار هستند).

لینک را به عنوان کپی کنیدبهبود در نقشه های منبع

اکنون با استفاده بهتر از نقشه‌های منبع می‌توان باگ‌ها را به منشأ خود ردیابی کرد. اجرا کردیم ignoreList ویژگی source maps که به Next.js اجازه می‌دهد تا فریم‌های پشته‌ای را برای وابستگی‌های خارجی مخفی کند و کد برنامه شما را به تمرکز اصلی تبدیل کند.

برای نگاشت منبع کمی دقیق تر از نام روش ها، پیشنهاد می کنیم از Turbopack (اکنون پایدار) استفاده کنید، که مدیریت و کشف نقشه های منبع را بر روی Webpack بهبود بخشیده است.

برای نویسندگان کتابخانه: توصیه می کنیم پر کنید ignoreList ویژگی در نقشه های منبع زمانی که کتابخانه های خود را منتشر می کنید، به خصوص اگر آنها به عنوان خارجی پیکربندی شده باشند (مثلاً در serverExternalPackages پیکربندی).

لینک را به عنوان کپی کنیدقاب های پشته ای جمع شده

ما منطق جمع شدن قاب های پشته ای را بهبود بخشیده ایم تا مرتبط ترین بخش های کد شما را برجسته کنیم.

• همپوشانی درون مرورگر و خطا: چارچوب‌های پشته وابستگی شخص ثالث به طور پیش‌فرض با تمرکز بر روی کد برنامه شما پنهان هستند. می‌توانید فریم‌های مخفی را با کلیک کردن روی «نمایش فریم‌های نادیده گرفته» در ابزارهای توسعه یا همپوشانی آشکار کنید.
• در ترمینال: چارچوب‌های وابستگی شخص ثالث نیز به‌طور پیش‌فرض جمع می‌شوند و قالب‌بندی خطا اکنون با خروجی مرورگر برای یک تجربه اشکال‌زدایی ثابت هماهنگ است. خطاها در مرورگر بازتولید می شوند تا اطمینان حاصل شود که اگر به دنباله کامل پشته نیاز دارید، اطلاعات مهم را در طول توسعه از دست ندهید.

لینک را به عنوان کپی کنیدپروفایل بهبود یافته

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

لینک را به عنوان کپی کنیدبا Edge Runtime بهبود یافته است

هنگام استفاده از زمان اجرا Edge، خطاها اکنون به طور مداوم در محیط های توسعه نمایش داده می شوند و اشکال زدایی یکپارچه را ارائه می دهند. قبلاً خطاهای ثبت شده فقط شامل پیام بود اما پشته را شامل نمی شد.

لینک را به عنوان کپی کنیدقبل و بعد

ترمینال قبل از:

 ⨯ app/page.tsx (6:11) @ eval
 ⨯ Error: boom
    at eval (./app/page.tsx:12:15)
    at Page (./app/page.tsx:11:74)
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at stringify ()
    at AsyncLocalStorage.run (node:async_hooks:346:14)
    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
digest: "380744807"
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |           ^
  7 |   }, [])
  8 |
  9 |   throwError()
 GET / 500 in 2354ms

ترمینال بعد از:

  ⨯ Error: boom
    at eval (app/page.tsx:6:10)
    at Page (app/page.tsx:5:32)
  4 | export default function Page() {
  5 |   const throwError = myCallback(() => {
> 6 |     throw new Error('boom')
    |          ^
  7 |   }, [])
  8 |
  9 |   throwError() {
  digest: '225828171'
}

همپوشانی خطا قبل از

همپوشانی خطا بعد از

این پیشرفت‌ها خطاها را واضح‌تر و شهودی‌تر می‌کنند و به شما این امکان را می‌دهند که به جای اشکال‌زدایی، زمان خود را بر روی ساخت برنامه خود متمرکز کنید.

ما همچنین هیجان‌زده هستیم که معرفی یک رابط کاربری بازطراحی شده همپوشانی خطا را در نسخه‌های آینده اعلام کنیم.

را after() API اکنون از زمان معرفی آن در اولین Next.js 15 RC پایدار است.

after() راهی برای انجام کارهایی مانند ثبت گزارش، تجزیه و تحلیل و سایر همگام‌سازی سیستم پس از پایان یافتن پاسخ به کاربر بدون مسدود کردن پاسخ اصلی ارائه می‌کند.

لینک را به عنوان کپی کنیدتغییرات کلیدی

از زمان معرفی آن، ما به ثبات رسیده ایم after() و بازخورد پرداخته شده، از جمله:

• پشتیبانی بهبود یافته برای سرورهای Next.js خود میزبانی شده.
• رفع اشکال برای سناریوهایی که در آن after() با سایر ویژگی های Next.js تعامل دارد.
• قابلیت کشش بهبود یافتهبه پلتفرم‌های دیگر اجازه می‌دهد خودشان را تزریق کنند waitUntil() بدوی ها به قدرت after().
• پشتیبانی از زمان اجرا API مانند مثال cookies() و headers() در اقدامات سرور و مدیریت مسیرها.

import { after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Secondary task
  after(() => {
    log();
  });
 
  // Primary task
  return {children}>;
}

بیشتر بخوانید در مورد after API و نحوه استفاده از آن در مستندات.

لینک را به عنوان کپی کنیدforbidden و unauthorized (تجربی)

Next.js 15.1 شامل دو API آزمایشی است، forbidden() و unauthorized()، بر اساس بازخورد جامعه.

ما از بازخورد شما قدردانی خواهیم کرد – لطفاً آن را در محیط های توسعه خود امتحان کنید و نظرات خود را در این موضوع بحث به اشتراک بگذارید.

لینک را به عنوان کپی کنیدبررسی کنید

اگر با App Router آشنایی دارید، احتمالاً از آن استفاده کرده اید notFound() برای فعال کردن یک رفتار 404 همراه با رفتار سفارشی not-found.tsx فایل با نسخه 15.1، ما این رویکرد را به خطاهای مجوز گسترش می دهیم:

• forbidden() ماشه a خطای 403 با رابط کاربری سفارشی از طریق forbidden.tsx.

• unauthorized() ماشه a خطای 401 با رابط کاربری سفارشی از طریق unauthorized.tsx.

خوب است بدانید: همانطور که در notFound() خطاها، کد وضعیت خواهد بود 200 اگر خطا پس از ارسال هدرهای پاسخ اولیه ایجاد شود. بیشتر بدانید.

لینک را به عنوان کپی کنیدفعال کردن ویژگی

از آنجایی که این ویژگی هنوز آزمایشی است، باید آن را در خود فعال کنید next.config.ts فایل:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
};
 
export default nextConfig;

توجه: next.config.ts پشتیبانی در Next.js 15 معرفی شد. بیشتر بدانید.

لینک را به عنوان کپی کنیداستفاده forbidden() و unauthorized()

می توانید استفاده کنید forbidden() و unauthorized() در اقدامات سرور، اجزای سرور، مؤلفه‌های مشتری، یا کنترل‌کننده‌های مسیر. در اینجا یک مثال است:

import { verifySession } from '@/app/lib/dal';
import { forbidden } from 'next/navigation';
 
export default async function AdminPage() {
  const session = await verifySession();
 
  // Check if the user has the 'admin' role
  if (session.role !== 'admin') {
    forbidden();
  }
 
  // Render the admin page for authorized users
  return h1>Admin Pageh1>;
}

لینک را به عنوان کپی کنیدصفحات خطای سفارشی ایجاد کنید

برای سفارشی کردن صفحات خطا، فایل های زیر را ایجاد کنید:

import Link from 'next/link';
 
export default function Forbidden() {
  return (
    div>
      h2>Forbiddenh2>
      p>You are not authorized to access this resource.p>
      Link href="/">Return HomeLink>
    div>
  );
}

import Link from 'next/link';
 
export default function Unauthorized() {
  return (
    div>
      h2>Unauthorizedh2>
      p>Please log in to access this page.p>
      Link href="/login">Go to LoginLink>
    div>
  );
}

مایلیم از Clerk برای ارائه این ویژگی از طریق روابط عمومی و کمک به ما در ایجاد نمونه اولیه API تشکر کنیم. قبل از اینکه این ویژگی را در نسخه 15.2 تثبیت کنیم، قصد داریم قابلیت ها و بهبودهای بیشتری را به API اضافه کنیم تا از طیف وسیع تری از موارد استفاده پشتیبانی کند.

اسناد را بخوانید unauthorized و forbidden API برای جزئیات بیشتر.

• [Feature] از ESLint 9 اینچ استفاده کنید create-next-app (PR)
• [Feature] حداکثر تگ کش را به 128 افزایش دهید (PR)
• [Feature] افزودن گزینه برای غیرفعال کردن CssChunkingPlugin آزمایشی (PR)
• [Feature] افزودن پشتیبانی درون خطی CSS (PR)
• [Improvement] سایلنس ساس legacy-js-api هشدار (PR)
• [Improvement] رفع رد خام هنگام استفاده از بازنویسی (PR)
• [Improvement] اطمینان حاصل کنید که فرآیند والد در صورت خرابی وب‌پک (PR)
• [Improvement] رهگیری ثابت مسیر از طریق مسیر برای پوشش همه (PR)
• [Improvement] رفع مشکل شبیه سازی پاسخ هنگام حذف درخواست (PR)
• [Improvement] تغییر مسیر عملکرد سرور بین چندین PR ثابت شد
• [Improvement] پشتیبانی از ارائه پلاگین های MDX به عنوان رشته هایی برای سازگاری Turbopack (PR)

Next.js نتیجه کار مشترک بیش از 3000 توسعه دهنده فردی است. این نسخه توسط:

• را Next.js تیم: اندرو، هندریک، یانکا، جیاچی، جیمی، جیوون، جی جی، جاش، جود، سم، سباستین، سبی، وایات و زک.
• را پکیج توربو تیم: الکس، بنجامین، دانی، مایا، نیکلاس، تیم، توبیاس و ویل.
• را Next.js Docs تیم: دلبا، ریچ، اسماعیل و لی.

با تشکر فراوان از @sokra، @molebox، @delbaoliveira، @eps1lon، @wbinnssmith، @JamBalaya56562، @hyungjikim، @adrian-faustino، @mottox2، @lubieowoce، @bgw، @mknichel، @wyattjoh @dy,ijk @huozhimi @icyJoseph، @acdlite، @unstubbable، @gaojude،، @tobySolutions، @kevinmitch14، @leerob، @emmanuelgautier، @mrhrifat، @lid0a، @boar-is، @nisabmohd، @PapatMayuri، @ovolexmap، @Ref @betterthanhajin، @HerringtonDarkholme، @bpb54321، @ahmoin، @Kikobeats، @abdelrahmanAbouelkheir، @lumirlumir، @yeeed711، @petter و @suu3 برای کمک!