Next.js 15.5 |Next.js

Next.js 15.5 شامل نسخه های بتا Turbopack، میان افزار پایدار Node.js، بهبودهای TypeScript، next lint هشدارهای منسوخ شدن و منسوخ شدن برای Next.js 16. نکات برجسته این نسخه عبارتند از:

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

# 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 build --turbopack در beta.Turbopack اکنون به وب‌سایت‌های Vercel، از جمله vercel.com، v0.app، و nextjs.org قدرت می‌دهد و سرعت تکرار را از طریق ساخت‌های پیش‌نمایش سریع‌تر و استقرار تولید افزایش می‌دهد.

این برنامه‌های مجهز به Turbopack در سرویس آزمایش شده‌اند 1.2 میلیارد درخواست های مربوط به آزادی

لینک عنوان را کپی کنیدعملکرد و آمپر نتایج عملکرد

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

ما بیلدهای Turbopack را بر روی بسیاری از محصولات Vercel پیاده‌سازی کرده‌ایم و شاهد بهبودهای مداوم در زمان‌های ساخت بوده‌ایم:

• سایت مشتری: 2 برابر سریعتر در دستگاه 4 هسته ای
• سایت مشتری: 2.2 برابر سریعتر در دستگاه 14 هسته ای
• سایت کوچک (10 هزار ماژول): 4 برابر سریعتر در دستگاه 30 هسته ای
• سایت متوسط (40K ماژول): 2.5 برابر سریعتر در دستگاه 30 هسته ای
• سایت بزرگ (70 هزار ماژول): 5 برابر سریعتر در دستگاه 30 هسته ای

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

در مقایسه با Webpack، نظارت بر معیار تولید ما نشان می‌دهد که سایت‌هایی که با Turbopack ساخته شده‌اند، مقادیر مشابه یا کمتری از جاوا اسکریپت و CSS را با درخواست‌های کمتر ارائه می‌کنند که در نتیجه معیارهای FCP، LCP، و TTFB قابل مقایسه یا بهتری است.

برای تیم هایی که Turbopack را در حال توسعه پذیرفته اند، اکنون توصیه می کنیم Turbopack را برای ساخت ها امتحان کنید.

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

پروژه های کوچکتر: در ماشین‌های کوچکتر یا پروژه‌های کوچک‌تر، ما بهبودهای جزئی یا خنثی زمان ساخت را به دلیل حافظه پنهان داخلی داخلی Webpack اندازه‌گیری کرده‌ایم. ما در حال حاضر در حال کار بر روی یک راه‌حل ذخیره‌سازی دائمی برای Turbopack هستیم تا به هدف طراحی خود یعنی ساختن تمام ساخت‌ها افزایشی و سریع برسیم.

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

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

توجه داشته باشید: این تفاوت ها مستند شده است و ما فعالانه روی بهبود کار می کنیم. برای اطلاعات دقیق و راه‌حل‌ها، به مستندات Turbopack ما مراجعه کنید.

همانطور که به سمت انتشار پایدار پیش می رویم، لطفاً هر گونه مشکلی را در GitHub گزارش دهید.

پس از معرفی پشتیبانی آزمایشی از زمان اجرا Node.js در نسخه 15.2 و آزمایش گسترده برنامه های تولیدی خود، ما هیجان زده هستیم که پشتیبانی پایدار از زمان اجرا میان افزار Node.js را اعلام کنیم.

پیش از این، میان‌افزار Next.js تنها از Edge Runtime پشتیبانی می‌کرد که عملکرد و انزوا بهتری را ارائه می‌کرد، اما هنگام ادغام با کتابخانه‌ها و APIهای ویژه Node.js محدودیت‌هایی داشت.

import { NextRequest, NextResponse } from 'next/server';
 
export const config = {
  runtime: 'nodejs', // Now stable!
};
 
export function middleware(request: NextRequest) {
  // Access to full Node.js APIs and npm packages
  const fs = require('fs');
  const crypto = require('crypto');
 
  // Complex authentication logic
  const token = request.headers.get('authorization');
 
  if (!isValidToken(token)) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
 
  return NextResponse.next();
}
 
function isValidToken(token: string | null): boolean {
  // Use Node.js crypto for validation
  // Access file system, databases, etc.
  return true;
}

این تغییر به میان‌افزار اجازه می‌دهد تا در عین حال که همان تجربه توسعه‌دهنده را حفظ کند، موارد استفاده پیچیده‌تری را مدیریت کند.

اگرچه زمان اجرا Node.js پیش‌فرض در Next.js 16 نخواهد بود، اما ما در حال بررسی امکان پیش‌فرض شدن آن از Next.js 17 بر اساس بازخورد جامعه و الگوهای استفاده هستیم.

Next.js 15.5 با سازگاری کامل Turbopack و ایمنی نوع جامع برای مسیریابی، پیشرفت‌های عمده‌ای را برای TypeScript در App Router به ارمغان می‌آورد.

لینک عنوان را کپی کنیدمسیرهای وارد شده (پایدار)

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

این ویژگی در پشت موجود است typedRoutes پرچمی که قبلا آزمایشی بود و اکنون ثابت است. مسیرهای تایپ ایستا اکنون با Turbopack از طریق پیاده سازی جدیدی کار می کنند که ایمنی نوع را در هر دو ساخت Webpack و Turbopack تضمین می کند:

const nextConfig = {
  typedRoutes: true, // Now stable!
};
 
export default nextConfig;

import Link from 'next/link'
 
// Full type safety for route paths
Link href="/blog/example-slug?ui=dark">Read PostLink>
 
// TypeScript catches invalid routes at compile time
Link href="/invalid-route">Broken LinkLink> // ← Type error

لینک عنوان را کپی کنیداعتبار سنجی صادرات مسیر (Turbopack)

اعتبار سنجی صادرات مسیر نیز بر روی Turbopack از طریق یک سیستم جدید کار می کند که یک فایل typeafe ایجاد می کند که صفحات، طرح بندی ها و کنترل کننده های مسیر را با استفاده از TypeScript تأیید می کند. satisfies اپراتور

این صادرات نامعتبر را نادرست می داند dynamic مقادیر زمان کامپایل در زمان اجرا next build، جایگزین پلاگین Webpack قدیمی با یک راه حل کارآمدتر که روی هر دو سیستم ساخت کار می کند.

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

Next.js به طور خودکار در دسترس جهانی تولید می کند PageProps، LayoutProps، و RouteContext انواع با ورودی پارامتر کامل و بدون نیاز به واردات:

قبل: ورود و واردات دستی

import { Metadata } from 'next';
 
interface Props {
  params: Promise: string }>;
  children: React.ReactNode;
  analytics: React.ReactNode; // Manual parallel route typing
  team: React.ReactNode; // Manual parallel route typing
}
 
export default function DashboardLayout(props: Props) {
  return (
    div>
      {props.children}
      {props.analytics} {/* No type safety for parallel routes */}
      {props.team} {/* No type safety for parallel routes */}
    div>
  );
}

بعد: ورودی خودکار با پشتیبانی از مسیر موازی

// No need to import LayoutProps - globally available
export default function DashboardLayout(props: LayoutProps'/dashboard'>) {
  return (
    div>
      {props.children}
      {props.analytics} {/* Fully typed parallel route slot */}
      {props.team} {/* Fully typed parallel route slot */}
    div>
  );
}

سیستم به طور خودکار مسیرها را از ساختار فایل شما شناسایی می کند، از مسیرهای پویا، مسیرهای موازی و مسیرهای سفارشی پشتیبانی می کند. next.config.js. تولید تایپ هم در حالت توسعه و هم در حالت ساخت کار می‌کند، زمانی که ساختار فایل شما در توسعه تغییر می‌کند، فوراً انواع را بازسازی می‌کند و با تولید تنها چند فایل بهینه‌شده به‌جای تعداد زیادی از فایل‌های فردی که در اجرای قبلی استفاده شده‌اند، به طور موثر در پروژه‌های بزرگ مقیاس می‌شوند.

لینک عنوان را کپی کنیدnext typegen

a اضافه کردیم next typegen دستور تولید دستی یک نوع بدون راه اندازی next dev یا next build. این به ویژه برای سناریوهای اعتبارسنجی نوع خارجی مفید است.

پیش از این، انواع مسیر تنها در طول تولید می شد next dev یا next build، که به معنای دویدن بود tsc --noEmit مستقیماً انواع مسیرهای شما را تأیید نمی کند. اکنون می توانید انواع را به طور مستقل تولید کنید و آنها را به صورت خارجی تأیید کنید:

# Generate route types first, then validate with TypeScript
next typegen && tsc --noEmit
 
# Or in CI workflows for type checking without building
next typegen && npm run type-check

شروع با Next.js 15.5، next lint فرمان یک اخطار منسوخ شدن را نمایش می‌دهد و در Next.js 16 حذف می‌شود. این امر با انتقال به پیکربندی‌های صریح ESLint و معرفی Biome به‌عنوان یک جایگزین سریع، تجربه پرده‌سازی را مدرن می‌کند.

هنگام ایجاد یک پروژه Next.js جدید، اکنون می توانید بین ESLint (قوانین جامع)، Biome (سریع با قوانین کمتر)، یا بدون لنگر یکی را انتخاب کنید. پروژه های ESLint اکنون به صورت واضح تولید می کنند eslint.config.mjs فایل ها به جای تکیه بر next lint دستور shell شفافیت کامل قوانین پرده‌بندی شما را فراهم می‌کند.

پروژه‌های Biome پیکربندی‌های بهینه‌سازی شده با قوانین Next.js و React به‌علاوه قابلیت‌های قالب‌بندی داخلی دریافت می‌کنند. تولید شده است package.json اکنون اسکریپت ها مستقیماً لینترها را فراخوانی می کنند:

{
  "scripts": {
    // ESLint projects
    "lint": "eslint", // Instead of "next lint"
    "lint:fix": "eslint --fix",
 
    // For Biome projects
    "lint": "biome check",
    "format": "biome format --write"
  }
}

برای پروژه‌های موجود، یک کد مد جدید انتقال از آن را خودکار می‌کند next lint به ESLint CLI:

npx @next/codemod@latest next-lint-to-eslint-cli .

کدمود هوشمندانه تغییر شکل می دهد package.json اسکریپت ها، در حالی که عملکرد را حفظ می کنند، به پرچم های خاص Next.js مانند --strict به --max-warnings 0و نصب خودکار وابستگی های مورد نیاز.

این انتقال به توسعه دهندگان امکان کنترل مستقیم بر روی تنظیمات پرده های خود را با سازگاری بهتر با اکوسیستم می دهد.

توجه داشته باشید: next build اگر پیکربندی ESLint وجود داشته باشد، همچنان یک مرحله بررسی لنتینگ را انجام خواهد داد. این پرز خودکار در حین ساخت‌ها نیز در Next.js 16 حذف می‌شود و به شما کنترل کامل بر زمان و نحوه اجرای پرزها می‌دهد.

Next.js 15.5 هشدارهای منسوخ شدن را معرفی می کند تا به شما کمک کند تا برای نسخه بعدی Next.js 16 آماده شوید. این هشدارها در گزارش های توسعه و ساخت ظاهر می شوند و به شما زمان می دهند تا قبل از حذف این ویژگی ها مهاجرت کنید.

لینک عنوان را کپی کنیدlegacyBehavior برای next/link

را legacyBehavior پشتیبانی برای next/link در Next.js 16 حذف خواهد شد. این پشتیبانی به عنوان یک لایه سازگاری موقت در طول انتقال از Next.js 12 به 13 معرفی شد.

// ❌ Will be removed in Next.js 16
Link href="/about" legacyBehavior>
  a>Abouta>
Link>
 
// ✅ Modern approach (no changes needed)
Link href="/about">AboutLink>

مهاجرت: حذف کنید legacyBehavior حمایت و هر کودک عناصر را Link کامپوننت اکنون به صورت خودکار سبک و قابلیت دسترسی را کنترل می کند.

// ❌ Will be removed in Next.js 16
import { useAmp } from 'next/amp';
 
export const config = { amp: true };
 
export default function AmpPage() {
  const isAmp = useAmp();
  return div>AMP Page: {isAmp ? 'AMP' : 'HTML'}div>;
}

const nextConfig = {
  amp: {
    // ❌ Will be removed in Next.js 16
    canonicalBase: 'https://example.com',
  },
};
 
export default nextConfig;

// ⚠️ Will show deprecation warning in Next.js 15.5
// when images.qualities is undefined and quality !== 75
Image src="/photo.jpg" quality={100} alt="Photo" />
 
// ✅ Explicit configuration required for Next.js 16

const nextConfig = {
  images: {
    qualities: [75, 100], // Explicitly allow quality={100}
  },
};
 
export default nextConfig;

// ⚠️ Will show deprecation warning in Next.js 15.5
// when images.localPatterns is not configured
Image src="/photo.jpg?v=1" alt="Test" />
 
// ✅ Explicit configuration required for Next.js 16

const nextConfig = {
  images: {
    localPatterns: [
      {
        pathname: '/photo.jpg', // allow exact path
        // omitting "search" will allow all query parameters
      },
      {
        pathname: '/photo.jpg', // allow exact path
        search: '?v=1', // allow exact query parameters
      },
      {
        pathname: '/assets/**', // allow wildcard path
        search: '', // empty search will block all query parameters
      },
    ],
  },
};
 
export default nextConfig;