Next.js 13.3 | Next.js

Next.js 13.3 ویژگی های محبوب درخواست شده توسط انجمن را اضافه می کند، از جمله:

امروز با اجرا به روز رسانی کنید:

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

ما به علامت گذاری App Router به عنوان ثابت در نسخه کوچک بعدی نزدیک می شویم و تمرکز خود را به بهینه سازی عملکرد، بهبود رفتار و رفع اشکال تغییر می دهیم.

در حالی که ما هنوز روی چند ویژگی مانند Mutations کار می کنیم، انتظار نداریم که آنها روی سطح API سایر ویژگی های App Router تأثیر بگذارند. ما از دیدن آنچه با App Router ایجاد می کنید هیجان زده هستیم و مشتاقانه منتظر نظرات شما هستیم.

در Next.js 13.2، یک API ابرداده جدید را معرفی کردیم که به شما امکان می‌دهد ابرداده را تعریف کنید (مثلا title، meta، و link برچسب ها در HTML شما head عنصر) با صادر کردن یک طرح بندی یا شی فوق داده صفحه.

// either Static metadata
export const metadata = {
  title: 'Home',
};
// Output:
// 
//	 
// 
 
// or Dynamic metadata
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return { title: product.title };
}
// Output:
// 
//	 
// 
 
export default function Page() {}

علاوه بر متادیتا مبتنی بر پیکربندی، API متاداده اکنون از قراردادهای فایل جدید پشتیبانی می‌کند و به شما امکان می‌دهد به راحتی صفحات خود را برای بهبود SEO و اشتراک‌گذاری وب سفارشی کنید:

• opengraph-image.(jpg|png|svg)
• twitter-image.(jpg|png|svg)
• favicon.ico
• icon.(ico|jpg|png|svg)
• sitemap.(xml|js|jsx|ts|tsx)
• robots.(txt|js|jsx|ts|tsx)
• manifest.(json|js|jsx|ts|tsx)

برای مثال، می‌توانید از فراداده مبتنی بر فایل برای افزودن یک فاویکون برای برنامه خود و یک تصویر گرافیکی باز برای برنامه خود استفاده کنید. /about صفحه:

app
├── favicon.ico
├── layout.js
├── page.js
└── about
    ├── opengraph-image.jpg
    └── page.js

Next.js به طور خودکار این فایل‌های هش (برای نام فایل) را برای ذخیره‌سازی در حافظه پنهان و به‌روزرسانی فایل‌های مربوطه ارائه می‌کند. head موارد با اطلاعات فوق داده صحیح، مانند URL دارایی، نوع فایل، و اندازه تصویر.

// Visiting "/"
link rel="icon" href=""/>
 
// Visiting "/about"
link rel="icon" href=""/>
meta property="og:image" content="" type="" ... />

افزودن فایل های استاتیک به برنامه شما اغلب ساده ترین روش است، اما مواردی وجود دارد که ممکن است لازم باشد فایل ها را به صورت پویا ایجاد کنید. برای هر قرارداد فایل استاتیک، یک دینامیک همراه وجود دارد (.js|.jsx|.ts|.tsx) گزینه ای که به شما امکان می دهد برای تولید فایل کد بنویسید.

به عنوان مثال، در حالی که می توانید یک استاتیک اضافه کنید sitemap.xml اکثر سایت ها دارای صفحاتی هستند که به صورت پویا با استفاده از یک منبع داده خارجی تولید می شوند. برای ایجاد یک نقشه سایت پویا، می توانید a sitemap.js فایلی که آرایه ای از مسیرهای پویا شما را برمی گرداند.

export default async function sitemap() {
  const res = await fetch('https://.../posts');
  const allPosts = await res.json();
 
  const posts = allPosts.map((post) => ({
    url: `https://acme.com/blog/${post.slug}`,
    lastModified: post.publishedAt,
  }));
 
  const routes = ['', '/about', '/blog'].map((route) => ({
    url: `https://acme.com${route}`,
    lastModified: new Date().toISOString(),
  }));
 
  return [...routes, ...posts];
}

با گزینه های مبتنی بر پیکربندی و مبتنی بر فایل جدید، اکنون یک API فراداده جامع دارید که هم ابرداده ایستا و هم متاداده پویا را پوشش می دهد.

Metadata API در نسخه 13.3 برای App Router موجود است (app). در دسترس نیست pages اشاره گر درباره فراداده مبتنی بر فایل بیشتر بدانید و به مرجع API مراجعه کنید.

شش ماه پیش ما @vercel/og و Satori را منتشر کردیم، کتابخانه‌هایی که به شما امکان می‌دهند با استفاده از JSX، HTML و CSS تصاویر را به صورت پویا تولید کنید.

@vercel/og در Next.js Conf مورد آزمایش قرار گرفت و بیش از 100000 تصویر بلیط پویا برای هر شرکت‌کننده ایجاد کرد. با پذیرش گسترده در بین مشتریان Vercel و بیش از 900000 بارگیری از زمان راه اندازی، ما هیجان زده ایم که تصاویر تولید شده به صورت پویا را بدون نیاز به بسته خارجی به همه برنامه های Next.js بیاوریم.

اکنون می توانید وارد کنید ImageResponse از next/server برای تولید تصاویر:

import { ImageResponse } from 'next/server';
 
export const size = { width: 1200, height: 600 };
export const alt = 'About Acme';
export const contentType = 'image/png';
export const runtime = 'edge';
 
export default function og() {
  return new ImageResponse();
  // ...
}

ImageResponse به طور طبیعی با سایر API های Next.js، از جمله کنترل کننده های مسیر و ابرداده های مبتنی بر فایل، به خوبی ادغام می شود. برای مثال می توانید استفاده کنید ImageResponse در یک opengraph-image.tsx فایل برای تولید تصاویر Open Graph و Twitter در زمان ساخت یا به صورت پویا در زمان پرس و جو.

درباره Image Response API بیشتر بدانید.

روتر برنامه Next.js اکنون به طور کامل از صادرات استاتیک پشتیبانی می کند.

می توانید به عنوان یک سایت ثابت یا برنامه تک صفحه ای (SPA) شروع کنید، سپس به صورت اختیاری برای استفاده از ویژگی های Next.js که به سرور نیاز دارند ارتقا دهید.

هنگام دویدن next build، Next.js برای هر مسیر یک فایل HTML تولید می کند. با شکستن SPA سختگیرانه به فایل‌های HTML منفرد، Next.js می‌تواند از بارگیری کد جاوا اسکریپت غیرضروری در سمت مشتری جلوگیری کند، اندازه بسته را کاهش دهد و بارگذاری سریع‌تر صفحه را فعال کند.

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
};
 
module.exports = nextConfig;

صادرات استاتیک با app ویژگی های جدید روتر از جمله کنترل کننده های مسیر ثابت، تصاویر Open Graph و اجزای React Server.

به عنوان مثال، اجزای سرور در زمان ساخت اجرا می‌شوند، شبیه به تولید سایت استاتیک سنتی، رندر کردن مؤلفه‌ها در HTML ایستا برای بارگذاری صفحه اولیه، و یک بار استاتیک برای ناوبری مشتری بین مسیرها.

قبلاً برای استفاده از صادرات استاتیک در pages دایرکتوری که باید اجرا می کردید next export. با این حال، با next.config.js گزینه next build a خروجی خواهد داد out دایرکتوری کی output: 'export' تنظیم شده است. شما می توانید از همان تنظیمات استفاده کنید app روتر و pages اشاره گر معنی آن همین است next export دیگر مورد نیاز نیست

با پشتیبانی پیشرفته صادرات استاتیک، زودتر در فرآیند توسعه با خطا مواجه خواهید شد (next dev، مانند زمانی که سعی می کنید از یک تابع پویا استفاده کنید که به سروری مانند نیاز دارد cookies() یا headers().

درباره صادرات استاتیک بیشتر بدانید.

Next.js 13.3 قراردادهای پویا جدیدی را معرفی می کند که به شما امکان می دهد موارد مسیریابی پیشرفته را پیاده سازی کنید: مسیرهای موازی و مسیرهای متقاطع. این ویژگی‌ها به شما امکان می‌دهد بیش از یک صفحه را در یک نمای مشابه، مانند داشبوردها یا مدال‌های پیچیده، نمایش دهید.

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

مسیرهای موازی با استفاده از نامگذاری شده ایجاد می شوند “اسلات”. اسلات ها توسط تعریف می شوند @folder کنوانسیون:

dashboard
├── @user
│   └── page.js
├── @team
│   └── page.js
├── layout.js
└── page.js

طرح بندی در همان بخش مسیر، اسلات ها را به عنوان پشتیبانی می گیرد:

export default async function Layout({ children, user, team }) {
  const userType = getCurrentUserType();
 
  return (
    
      {userType === 'user' ? user : team}
      {children}
    >
  );
}

در مثال بالا، @user و @team اسلات های مسیر موازی (به صراحت) به صورت مشروط بر اساس منطق شما ارائه می شوند. children یک اسلات مسیر مخفی است که انجام می دهد نه باید با a تطبیق داده شود @folder. برای مثال، dashboard/page.js معادل است dashboard/@children/page.js.

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

مسیرهای رهگیری را می توان با تعریف کرد (..) قراردادی شبیه به مسیرهای نسبی ../. همچنین می توانید استفاده کنید (...) کنوانسیون ایجاد مسیر در مقابل app اشاره گر

feed
├── @modal
│   └── (..)photo
│       └── [id]
│           └── page.tsx
├── page.tsx
└── layout.tsx
photo
└── [id]
    └── page.tsx

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

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

برای مثال‌ها و رفتارهای بیشتر، مستندات مسیرهای موازی و رهگیری را ببینید.

• به روز رسانی طراحی: صفحه اصلی Next.js و ویترین فروشگاه با طراحی جدید اصلاح شده است.
• پکیج توربو: اضافه شدن پشتیبانی برای Middleware، همه next/font گزینه ها و پخش جریانی با اجزای سرور با نزدیک شدن به نسخه بتا (دمو را ببینید). ما همچنین باگ‌های اضافی را که در ساخت بومی برنامه‌های Next.js بالغ مانند vercel.com و nextjs.org یافت شده بود، رفع کردیم. بیشتر بدانید.
• تازه کردن سریع برای next.config.js: ایجاد تغییرات در next.config.js اکنون به طور خودکار سرور توسعه محلی شما را مجددا راه اندازی می کند. این کار بارگذاری مجدد خودکار را گسترش می دهد .env، .env.*، jsconfig.json، tsconfig.json فایل های پیکربندی
• دسترسی: App Router اکنون شامل پیام مسیر است pages. این ویژگی انتقال سمت مشتری به صفحه‌خوان‌ها و سایر فناوری‌های کمکی را اعلام می‌کند. بیشتر بدانید.
• پیوندهای تایپ شده استاتیک: redirects و rewrites مستقر شدن next.config.js اکنون در هنگام بررسی نوع در نظر گرفته می شوند. بیشتر بدانید.
• Headwind CSS برای create-next-app: وقتی یک پروژه جدید را با npx create-next-app@latest، اکنون می توانید به صورت اختیاری Tailwind CSS را انتخاب کنید یا استفاده کنید --tailwind پرچم گذاری کنید تا برنامه خود را با این راه حل یک ظاهر طراحی شده از قبل پیکربندی کنید.
• گردانندگان مسیر: استفاده export default به جای یک فعل HTTP پشتیبانی شده، اکنون یک خطای مفید با route.ts. درباره گردانندگان مسیر بیشتر بدانید.
• تصاویر: next/image اکنون پشتیبانی می کند fetchPriority="high" ویژگی
• ابرداده: API قبلی ابرداده (head.js) که در 13.2 منسوخ شده بود، حذف شده است. در عوض، از پشتیبانی داخلی SEO از طریق API ابرداده استفاده کنید.
• جلوگیری از مسیریابی پوشه ها: یک پوشه را با _ پیشوند قرار دهید تا آن و هر بخش فرزند از مسیریابی حذف شود. برای مثال، app/_dashboard/page.tsx مسیریابی نخواهد شد.
• روتر برنامه: ما یک مورد جدید اضافه کردیم useParams یک قلاب مولفه مشتری برای خواندن پارامترهای پویا برای یک بخش مسیر مشخص. بیشتر بدانید.
• بارگیری شیوه نامه بهبود یافته: Next.js اکنون React’s Suspensey CSS را پیاده‌سازی می‌کند، که بسیاری از مشکلات مربوط به بارگذاری CSS و فلش کردن محتوای بدون استایل، به‌ویژه در حین ناوبری را برطرف می‌کند.
• مدیریت بهبود یافته یافت نشد: علاوه بر صید مورد انتظار notFound() خطاها، ریشه app/not-found.js فایل همچنین تمام URL های غیر منطبق را برای کل برنامه شما مدیریت می کند. این بدان معنی است که کاربرانی که از یک URL بازدید می کنند که توسط برنامه شما مدیریت نمی شود، رابط کاربری صادر شده از آن نشان داده می شود app/not-found.js فایل بیشتر بدانید.
• حافظه نهان روتر سمت سرویس گیرنده بهبود یافته: router.refresh() اکنون کل حافظه پنهان را باطل می کند و پارامترهای جستجو اکنون بخشی از کلید حافظه پنهان هستند و امکان پیمایش بین دو پارامتر جستجو را فراهم می کنند (مثلا /?search=leerob و /?search=tim)، برای بازیابی صحیح محتوایی که به پارامتر متکی است.

Next.js نتیجه کار ترکیبی بیش از 2600 توسعه دهنده فردی، شرکای صنعتی مانند Google و Meta و تیم اصلی ما در Vercel است. با بیش از 4.2 میلیون بارگیری npm در هفته و بیش از 104000 ستاره GitHub، Next.js یکی از محبوب‌ترین روش‌های ساخت در وب است.

در بحث‌های GitHub، Reddit و Discord به انجمن بپیوندید.

این نسخه توسط:

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

و مشارکت‌های زیر @nk980113، @dirheimerb، @DerTimonius، @DuCanhGH، @padmaia، @stafyniaksacha، @Gladowar، @zek، @jankaifer، @styfle، @balazsorban44، @wbinnssmith، @chibicode، @ForsakenHarmony, @ForsakenHarmony, @FrakenHarmony, @ @raisedadead، @AdamKatzDev، @wyattjoh، @leerob، @meesvandongen، @vladikoff، @feedthejim، @tka5، @pyjun01، @gdborton، @M3kH، @aretrace، @shivanshubisht، @alexkirsz، @2,1,0irkulit. @mrkldshv، @timneutkens، @furkanmavili، @swaminator، @EndangeredMassa، @DevEsteves، @rishabhpoddar، @schehata، @molebox، @dlehmhus، @akshaynox، @sp00ls، @janicklas-ralph، @kwryanky, @kwl,dy, @dante-robinson، @lachlanjc، @ianmacartney، @hotters، @isaackatayev، @insik-han، @jayair، @ivanhofer، @javivelasco، @SukkaW، @visshaljagtap، @imranbarbhuiya، @nivak-monarch، @RedyianVard، @ReddyuVard. @ricardofiorani، @swarnava و @gustavostz.