Next.js 13 | Next.js

همانطور که در Next.js Conf اعلام کردیم، Next.js 13 (Stable) زمینه را برای پویا و بدون محدودیت ایجاد می کند:

Next.js 13 و pages دایرکتوری پایدار و آماده برای تولید است. امروز با اجرا به روز رسانی کنید:

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

امروز ما در حال بهبود تجربه مسیریابی و چیدمان در Next.js و همسویی با آینده React با معرفی app اشاره گر این ادامه Layouts RFC است که قبلا برای بازخورد جامعه منتشر شده بود.

را app دایرکتوری در حال حاضر در نسخه بتا است و ما هنوز استفاده از آن را در محیط تولید توصیه نمی کنیم. می توانید از Next.js 13 با استفاده کنید pages دایرکتوری با ویژگی های پایدار مانند بهبود یافته next/image و next/link قطعات و وصل کنید app دایرکتوری با سرعت دلخواه شما را pages دایرکتوری برای آینده قابل پیش بینی همچنان حفظ خواهد شد.

را app دایرکتوری شامل پشتیبانی برای:

• چیدمان ها: به راحتی UI را بین مسیرها به اشتراک بگذارید و در عین حال حالت را حفظ کنید و از رندرهای مجدد پرهزینه اجتناب کنید.
• اجزای سرور: سرور پیش فرض برای پویاترین برنامه ها شوید.
• پخش جریانی: نمایش وضعیت‌های بارگیری و جریان فعلی در واحدهای UI همانطور که رندر می‌شوند.
• پشتیبانی استخراج داده ها: async اجزای سرور و پیشرفته fetch API امکان استخراج را در سطح جزء فراهم می کند.

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

را app/ دایرکتوری طراحی رابط های پیچیده را آسان می کند که حالت را در مسیرهای ناوبری حفظ می کند، از رندرهای گران قیمت جلوگیری می کند و امکان الگوهای مسیریابی پیشرفته را فراهم می کند. شما همچنین می توانید طرح بندی و کد برنامه را با هم قرار دهید با مسیرهای شما، مانند مؤلفه‌ها، آزمایش‌ها و سبک‌ها.

مسیرهایی را در داخل ایجاد کنید app/ به یک فایل نیاز دارد، page.js:

// This file maps to the index route (/)
export default function Page() {
  return h1>Hello, Next.js!h1>;
}

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

export default function BlogLayout({ children }) {
  return section>{children}section>;
}

درباره طرح‌بندی‌ها و صفحات بیشتر بیاموزید یا نمونه‌ای را برای امتحان آن به کار ببرید.

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

را app/ دایرکتوری پشتیبانی از معماری اجزای سرور جدید React را معرفی می کند. مؤلفه‌های سرور و کلاینت از سرور و کلاینت هر کدام برای بهترین کاری که انجام می‌دهند، استفاده می‌کنند—به شما این امکان را می‌دهند که برنامه‌های کاربردی سریع و بسیار تعاملی با یک مدل برنامه‌نویسی واحد بسازید که تجربه توسعه‌دهنده عالی را ارائه می‌دهد.

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

هنگامی که یک مسیر بارگذاری می شود، زمان های اجرا Next.js و React بارگذاری می شوند، که اینطور است قابل ذخیره سازی و قابل پیش بینی در اندازه این زمان اجرا انجام می دهد نه با بزرگ شدن برنامه شما، اندازه آن افزایش می یابد. علاوه بر این، زمان اجرا به صورت ناهمزمان بارگذاری می شود و به HTML شما از سرور اجازه می دهد تا به صورت تدریجی روی کلاینت افزایش یابد.

درباره مؤلفه‌های سرور بیشتر بیاموزید یا نمونه‌ای را برای آزمایش آن به کار ببرید.

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

را app/ دایرکتوری توانایی رندر تدریجی و انتقال تدریجی واحدهای رندر شده از UI به مشتری را معرفی می کند.

با اجزای سرور و طرح‌بندی‌های تودرتو در Next.js، می‌توانید فوراً بخش‌هایی از صفحه را که به طور خاص به داده نیاز ندارند، رندر کنید و وضعیت بارگیری را برای بخش‌هایی از صفحه که داده‌ها را بازیابی می‌کنند نمایش دهید. با این رویکرد، کاربر مجبور نیست قبل از شروع تعامل با صفحه، منتظر بارگذاری کل صفحه باشد.

هنگامی که در Vercel مستقر می شود، Next.js 13 برنامه کاربردی که استفاده می کنند app/ دایرکتوری پاسخ ها را به صورت پیش فرض در هر دو زمان اجرا Node.js و Edge برای بهبود عملکرد پخش می کند.

درباره پخش جریانی بیشتر بیاموزید یا نمونه‌ای را برای آزمایش آن به کار ببرید.

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

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

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}
 
// This is an async Server Component
export default async function Page() {
  const data = await getData();
 
  return main>{/* ... */}main>;
}

بومی fetch Web API نیز در React و Next.js گسترش یافته است. به طور خودکار درخواست های واکشی را حذف می کند و ارائه می دهد یکی روشی منعطف برای بازیابی، حافظه پنهان و اعتبارسنجی مجدد داده ها در سطح مؤلفه. این بدان معناست که تمام مزایای ایجاد سایت ایستا (SSG)، رندر سمت سرور (SSR) و بازسازی استاتیک افزایشی (ISR) اکنون از طریق یک API در دسترس هستند:

// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });
 
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
 
// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });

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

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

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

درباره داده کاوی بیشتر بیاموزید یا یک مثال برای آزمایش آن بکار ببرید.

Next.js 13 شامل Turbopack، جانشین جدید Webpack مبتنی بر Rust است.

وب پک دانلود شده است 3 میلیارد بار. اگرچه بخشی جدایی ناپذیر از ساخت وب است، اما با ابزارهای مبتنی بر جاوا اسکریپت به حداکثر عملکرد ممکن رسیده ایم.

در Next.js 12، انتقال خود را به ابزارهای بومی با استفاده از Rust آغاز کردیم. ما با مهاجرت به دور از بابل شروع کردیم که منجر به انتقال 17 برابر سریعتر شد. سپس Terser را جایگزین کردیم، که منجر به کوچک سازی 6 برابر سریعتر شد. وقت آن است که همه چیز را روی بسته بندی های بومی قرار دهید.

استفاده از Turbopack alpha با Next.js 13 نتیجه می دهد:

• 700 برابر سریعتر به روز رسانی از Webpack
• 10 برابر سریعتر به روز رسانی از Vite
• 4 برابر سریعتر شروع سرد از Webpack

Turbopack تنها حداقل دارایی های مورد نیاز برای توسعه را در خود دارد، بنابراین زمان راه اندازی بسیار سریع است. در برنامه ای با 3000 ماژول، توربوپک 1.8 ثانیه طول می کشد شارژ کردن Vite 11.4 ثانیه طول می کشد و Webpack 16.5 ثانیه طول می کشد.

Turbopack از اجزای سرور، TypeScript، JSX، CSS و غیره پشتیبانی خارج از جعبه دارد. در طول انتشار آلفا، بسیاری از ویژگی‌ها هنوز پشتیبانی نمی‌شوند. ما دوست داریم نظرات شما را در مورد استفاده از Turbopack برای سرعت بخشیدن به تکرارهای محلی خود بشنویم.

توجه: Turbopack در Next.js در حال حاضر فقط پشتیبانی می کند next dev. ویژگی های پشتیبانی شده را ببینید. ما همچنین در حال کار بر روی افزودن پشتیبانی برای next build از طریق Turbopak

امروز Turbopack alpha را در Next.js 13 امتحان کنید next dev --turbo.

Next.js 13 یک را معرفی می کند کامپوننت تصویر جدید قدرتمند، که به شما امکان می دهد تصاویر را بدون تغییر طرح به راحتی نمایش دهید و فایل ها را در صورت نیاز برای افزایش کارایی بهینه سازی کنید.

در طول نظرسنجی جامعه Next.js، 70 درصد از پاسخ دهندگان به ما گفت که آنها از کامپوننت Next.js Image در تولید و به نوبه خود اره استفاده کردند Core Web Vitals بهبود یافته است. با Next.js 13، ما بهتر می شویم next/image حتی بیشتر

جزء تصویر جدید:

• جاوا اسکریپت سمت کلاینت کمتری ارائه می کند
• سبک کردن و پیکربندی آسان تر است
• یک نیاز مقرون به صرفه تر alt برچسب های پیش فرض
• با بستر وب هماهنگ می شود
• سریع تر، زیرا شارژ تنبل طبیعی نیازی به هیدراتاسیون ندارد

import Image from 'next/image';
import avatar from './lee.png';
 
export default function Home() {
  // "alt" is now required for improved accessibility
  // optional: image files can be colocated inside the app/ directory
  return Image alt="leeerob" src={avatar} placeholder="blur" />;
}

درباره مؤلفه Image بیشتر بیاموزید یا یک مثال برای آزمایش آن بکار ببرید.

لینک را به عنوان کپی کنیدارتقا دهید next/image به Next.js 13

مولفه قدیمی Image به تغییر نام داده شد next/legacy/image. ما یک کد مد ارائه کرده‌ایم که به‌طور خودکار استفاده فعلی شما را به‌روزرسانی می‌کند next/image به next/legacy/image. به عنوان مثال، این دستور کد مد را بر روی شما اجرا می کند ./pages دایرکتوری هنگام اجرا از ریشه:

npx @next/codemod next-image-to-legacy-image ./pages

درباره کدمود بیشتر بدانید.

Next.js 13 یک را معرفی می کند سیستم فونت کاملاً جدید که:

• به طور خودکار فونت های شما از جمله فونت های سفارشی را بهینه می کند
• درخواست های شبکه خارجی را برای بهبود حریم خصوصی و عملکرد حذف می کند
• خود میزبانی خودکار داخلی برای هر فایل فونت
• صفر به طور خودکار با استفاده از CSS طرح بندی را جبران می کند size-adjust دارایی

این سیستم فونت جدید به شما این امکان را می دهد که به راحتی از تمام فونت های Google استفاده کنید و در عین حال کارایی و حریم خصوصی را در نظر داشته باشید. فایل‌های CSS و فونت در زمان ساخت دانلود می‌شوند و با بقیه دارایی‌های استاتیک شما میزبانی می‌شوند. مرورگر درخواستی به گوگل ارسال نمی کند.

import { Inter } from '@next/font/google';
 
const inter = Inter();
 
html className={inter.className}>html>;

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

import localFont from '@next/font/local';
 
const myFont = localFont({ src: './my-font.woff2' });
 
html className={myFont.className}>html>;

شما می توانید هر قسمت از تجربه بارگیری فونت را سفارشی کنید در حالی که از عملکرد عالی و بدون تغییر طرح، از جمله font-display، بارگذاری اولیه، نسخه های پشتیبان و غیره

درباره مؤلفه جدید فونت بیشتر بیاموزید یا نمونه ای را برای امتحان کردن آن به کار ببرید.

next/link دیگر نیازی به افزودن دستی ندارد مثل یک بچه

این به عنوان یک گزینه آزمایشی در 12.2 اضافه شد و اکنون پیش فرض است. در Next.js 13، همیشه یک و به شما این امکان را می دهد که props را به تگ اصلی ارسال کنید. به عنوان مثال:

npx @next/codemod new-link ./pages

import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default function () {
  return new ImageResponse(
    (
      div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      div>
    ),
  );
}

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  // Clone the request headers and set a new header `x-version`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13');
 
  // You can also set request headers in NextResponse.rewrite
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders,
    },
  });
 
  // Set a new response header `x-version`
  response.headers.set('x-version', '13');
  return response;
}

import { NextRequest, NextResponse } from 'next/server';
import { isAuthenticated } from '@lib/auth';
 
// Limit the middleware to paths starting with `/api/`
export const config = {
  matcher: '/api/:function*',
};
 
export function middleware(request: NextRequest) {
  // Call our authentication function to check the request
  if (!isAuthenticated(request)) {
    // Respond with JSON indicating an error message
    return NextResponse.json(
      {
        success: false,
        message: 'Auth failed',
      },
      {
        status: 401,
      },
    );
  }
}

• حداقل نسخه React از 17.0.2 به 18.2.0 افزایش یافته است.
• حداقل نسخه Node.js از 12.22.0 به 14.6.0 افزایش یافته است زیرا 12.x به پایان عمر (PR) رسیده است.
• را swcMinify ویژگی پیکربندی توسط false به true. برای اطلاعات بیشتر به کامپایلر Next.js مراجعه کنید.
• را next/image واردات به تغییر نام یافت next/legacy/image. را next/future/image واردات به تغییر نام یافت next/image. کد مد برای تغییر نام ایمن و خودکار واردات شما در دسترس است.
• را next/link یک کودک دیگر نمی تواند باشد . اضافه کنید legacyBehavior برای استفاده از رفتار ارثی یا حذف آن برای ارتقا. کد مد برای ارتقا خودکار کد شما در دسترس است.
• زمانی که مسیرها دیگر از قبل واکشی نمی شوند User-Agent یک ربات است
• مردود شد target نوع از next.config.js حذف شده است.
• مرورگرهای پشتیبانی شده برای حذف Internet Explorer و هدف قرار دادن مرورگرهای مدرن تغییر کرده اند. همچنان می توانید از لیست مرورگرها برای تغییر مرورگرهای هدف استفاده کنید.
  • Chrome 64+
  • لبه 79+
  • فایرفاکس 67+
  • Opera 51+
  • سافاری 12+