Next.js 14 |Next.js

همانطور که در Next.js Conf اعلام کردیم، Next.js 14 متمرکزترین نسخه ما با موارد زیر است:

• پکیج توربو: 5000 تست موفقیت آمیز برای روتر App & Pages
  • 53 درصد سریعتر راه اندازی یک سرور محلی
  • 94 درصد سریعتر به روز رسانی کد با Fast Refresh
• اقدامات سرور (پایدار): جهش های به تدریج افزایش یافته است
  • یکپارچه با ذخیره و احراز هویت مجدد
  • تابع ساده را فراخوانی می کند یا به طور طبیعی با فرم ها کار می کند
• پیش نمایش جزئی (پیش نمایش): پاسخ سریع اولیه استاتیک + پخش محتوای پویا
• Next.js Learn (جدید): دوره رایگان آموزش App Router، احراز هویت، پایگاه داده و موارد دیگر.

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

npx create-next-app@latest

با شروع با Next.js 13، ما در حال کار برای بهبود عملکرد توسعه Next.js بومی در صفحات و روتر برنامه هستیم.

ما کپی می کردیم next dev و سایر بخش های Next.js برای حمایت از این تلاش. از آن زمان، ما رویکرد خود را تغییر داده‌ایم تا تدریجی‌تر باشیم. این بدان معنی است که کامپایلر مبتنی بر Rust ما به زودی به ثبات خواهد رسید، زیرا ابتدا روی پشتیبانی از همه ویژگی های Next.js تمرکز کردیم.

5000 تست ادغام برای next dev اکنون با Turbopack، موتور اصلی Rust ما کار کنید. این آزمایش ها شامل 7 سال رفع اشکال و اصلاح مجدد است.

در حین تست روی vercel.com، یک برنامه بزرگ Next.js، دیدیم:

• تا اینکه 53.3٪ سریعتر راه اندازی یک سرور محلی
• تا اینکه 94.7 درصد سریعتر به روز رسانی کد با Fast Refresh

این معیار عملاً نتیجه بهبود عملکردی است که باید با یک برنامه بزرگ (و گرافیک ماژولار بزرگ) انتظار داشته باشید. با 90 درصد آزمایشات برای next dev اکنون می گذرد، شما باید عملکرد سریع تر و قابل اطمینان تری را به طور مداوم با استفاده مشاهده کنید next dev --turbo.

پس از 100% موفقیت در تست‌ها، Turbopack را در نسخه‌ای جزئی آینده به حالت پایدار منتقل می‌کنیم. ما همچنین به پشتیبانی از استفاده از بسته وب برای پیکربندی‌های سفارشی و افزونه‌های اکوسیستم ادامه خواهیم داد.

شما می توانید درصد قبولی آزمون خود را در areweturboyet.com ردیابی کنید.

Next.js 9 مسیرهای API را معرفی کرد – راهی برای ساخت سریع نقاط پایانی در کنار کدهای ظاهری.

به عنوان مثال، شما می توانید یک فایل جدید ایجاد کنید api/ دایرکتوری:

import type { NextApiRequest, NextApiResponse } from 'next';
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  const data = req.body;
  const id = await createItem(data);
  res.status(200).json({ id });
}

سپس، در سمت کلاینت، می‌توانید از React و یک رویداد handler مانند استفاده کنید onSubmit برای انجام یک fetch به مسیر API شما.

import { FormEvent } from 'react';
 
export default function Page() {
  async function onSubmit(event: FormEventHTMLFormElement>) {
    event.preventDefault();
 
    const formData = new FormData(event.currentTarget);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });
 
    // Handle response if necessary
    const data = await response.json();
    // ...
  }
 
  return (
    form onSubmit={onSubmit}>
      input type="text" name="name" />
      button type="submit">Submitbutton>
    form>
  );
}

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

لینک را به عنوان کپی کنیداقدامات سرور (پایدار)

اگر نیازی به ایجاد یک مسیر API به صورت دستی ندارید، چه؟ در عوض، می‌توانید تابعی را تعریف کنید که به طور قابل اعتماد روی سرور اجرا شود و مستقیماً از مؤلفه‌های React فراخوانی شود.

App Router بر روی React ساخته شده است canary کانالی که برای فریم ها برای پذیرش ویژگی های جدید پایدار است. از نسخه 14، Next.js به آخرین React ارتقا یافته است canary، که شامل اقدامات قدرتمند سرور است.

مثال قبلی از Pages Router را می توان به یک فایل ساده تبدیل کرد:

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    form action={create}>
      input type="text" name="name" />
      button type="submit">Submitbutton>
    form>
  );
}

اقدامات سرور باید برای هر توسعه دهنده ای که در گذشته از چارچوب های سرور گرا استفاده کرده است آشنا باشد. این بر اساس اصول وب مانند فرم ها و FormData Web API ساخته شده است.

اگرچه استفاده از اقدامات سرور از طریق یک فرم برای بهبود تدریجی مفید است، اما الزامی نیست. همچنین می توانید آنها را مستقیماً به عنوان تابع و بدون فرم فراخوانی کنید. هنگامی که از TypeScript استفاده می کنید، امنیت کاملی از نوع انتها به انتها بین مشتری و سرور به شما می دهد.

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

لینک را به عنوان کپی کنیدذخیره سازی، اعتبار سنجی مجدد، هدایت مجدد و غیره

اقدامات سرور عمیقاً در کل مدل App Router یکپارچه شده است. شما می توانید:

• مجدداً داده های کش شده را با revalidatePath() یا revalidateTag()
• تغییر مسیر به مسیرهای مختلف از طریق redirect()
• کوکی ها را تنظیم و بخوانید cookies()
• با به روز رسانی های UI خوش بینانه کار کنید useOptimistic()
• گرفتن و نمایش خطاها از سرور با useFormState()
• نمایش وضعیت های بار مشتری با useFormStatus()

درباره فرم‌ها و جهش‌های عملکرد سرور یا مدل امنیتی و بهترین روش‌ها برای اجزای سرور و اقدامات سرور بیشتر بیاموزید.

می‌خواهیم پیش‌نمایش پیش‌اجرای جزئی را به اشتراک بگذاریم – بهینه‌سازی کامپایلر برای محتوای پویا با پاسخ سریع اولیه استاتیک – که در حال کار روی آن برای Next.js هستیم.

پیش رندر جزئی بر اساس یک دهه تحقیق و توسعه در رندر سمت سرور (SSR)، تولید سایت استاتیک (SSG) و اعتبار مجدد استاتیک افزایشی (ISR) است.

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

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

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

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

پیش اجرا جزئی نیازی به API های جدید برای یادگیری ندارد.

لینک را به عنوان کپی کنیدساخته شده بر روی React Suspense

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

export default function Page() {
  return (
    main>
      header>
        h1>My Storeh1>
        Suspense fallback={CartSkeleton />}>
          ShoppingCart />
        Suspense>
      header>
      Banner />
      Suspense fallback={ProductListSkeleton />}>
        Recommendations />
      Suspense>
      NewProducts />
    main>
  );
}

با فعال کردن پیش‌اجرای جزئی، این صفحه یک پوسته ثابت بر اساس پوست شما ایجاد می‌کند مرزها را fallback توسط React Suspense از قبل رندر شده است.

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

هنگامی که یک درخواست ارسال می شود، پوشش HTML ایستا بلافاصله ارائه می شود:

main>
  header>
    h1>My Storeh1>
    div class="cart-skeleton">
      
    div>
  header>
  div class="banner" />
  div class="product-list-skeleton">
    
  div>
  section class="new-products" />
main>

از آنجایی که خواندن از cookies برای نگاه کردن به جلسه کاربر، این مؤلفه به عنوان بخشی از همان درخواست HTTP به عنوان پوشش ثابت ارسال می شود. هیچ دور اضافی از شبکه مورد نیاز نیست.

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

برای داشتن دقیق‌ترین لفاف استاتیک، ممکن است نیاز به افزودن محدودیت‌های Suspense اضافی داشته باشد. با این حال، اگر قبلاً استفاده می کنید loading.js امروزه این یک مرز ضمنی از Suspense است، بنابراین برای تولید لفاف ثابت نیازی به تغییر نخواهد بود.

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

پیش اجرا جزئی در حال توسعه فعال است. ما به روز رسانی های بیشتری را در یک نسخه جزئی آینده به اشتراک خواهیم گذاشت.

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

ارائه اینها meta برچسب‌ها با محتوای اصلی صفحه ارسال می‌شوند، که به اطمینان از تجربه کاربری روان کمک می‌کند و از سوسو زدن صفحه توسط تغییرات رنگ تم یا تغییر طرح‌بندی به دلیل تغییرات پنجره جلوگیری می‌کند.

در Next.js 14، متادیتاهای مسدود کننده و غیر مسدود کننده را از هم جدا کردیم. تنها زیرمجموعه کوچکی از گزینه‌های ابرداده مسدود شده‌اند، و ما می‌خواهیم اطمینان حاصل کنیم که ابرداده‌های غیرمسدود مانع از ارائه یک صفحه نیمه رندر شده به پوشش استاتیک نمی‌شوند.

گزینه های فوق داده زیر اکنون منسوخ شده اند و از آنها حذف خواهند شد metadata در نسخه اصلی آینده:

• viewport: بزرگنمایی اولیه و سایر خصوصیات نما را تنظیم می کند
• colorScheme: حالت های پشتیبانی شده (روشن/تاریک) را برای درگاه دید تنظیم می کند
• themeColor: رنگی را تنظیم می کند که کروم در اطراف درگاه دید باید با آن رندر شود

با شروع Next.js 14، گزینه های جدیدی وجود دارد viewport و generateViewport برای نادیده گرفتن این گزینه ها همه بقیه metadata گزینه ها ثابت می مانند

شما می توانید از امروز شروع به پذیرش این API های جدید کنید. موجود metadata گزینه ها به کار خود ادامه خواهند داد.

امروز یک دوره آموزشی کاملاً جدید و رایگان Next.js Learn را راه‌اندازی می‌کنیم. این دوره آموزش می دهد:

• روتر برنامه Next.js
• CSS Style و Tailwind
• بهینه سازی فونت ها و تصاویر
• طرح بندی و صفحات ایجاد کنید
• پیمایش بین صفحات
• راه اندازی پایگاه داده Postgres خود
• استخراج داده ها با اجزای سرور
• رندر استاتیک و پویا
• جریان
• پیش اجرا جزئی (اختیاری)
• جستجو و صفحه بندی را اضافه کنید
• جهش داده ها
• رسیدگی به خطا
• بهبود دسترسی
• احراز هویت را اضافه کنید
• متادیتا اضافه کنید

Next.js Learn اصول اولیه این چارچوب را به میلیون‌ها توسعه‌دهنده آموزش داده است و ما نمی‌توانیم منتظر شنیدن نظرات شما در مورد افزوده جدیدمان باشیم. برای شرکت در دوره به nextjs.org/learn بروید.

• [Breaking] حداقل نسخه Node.js اکنون است 18.17
• [Breaking] هدف WASM را حذف می کند next-swc ساخت (PR)
• [Breaking] پشتیبانی برای @next/font به نفع next/font (کدمود)
• [Breaking] تغییر کرد ImageResponse واردات از next/server به next/og (کدمود)
• [Breaking] next export فرمان به نفع لغو شده است output: 'export' پیکربندی (اسناد)
• [Deprecation] onLoadingComplete برای next/image به نفع رد می شود onLoad
• [Deprecation] domains برای next/image به نفع رد می شود remotePatterns
• [Feature] ورود با جزئیات بیشتر در اطراف fetch کش را می توان فعال کرد (سندنگار)
• [Improvement] 80٪ اندازه عملکردی کوچکتر برای اصلی create-next-app کاربرد
• [Improvement] بهبود مدیریت حافظه هنگام استفاده edge زمان اجرا در حال توسعه

Next.js نتیجه کار ترکیبی بیش از 2900 توسعه دهنده فردی، شرکای صنعتی مانند Google و Meta و تیم اصلی ما در Vercel است. در بحث‌های GitHub، Reddit و Discord به انجمن بپیوندید.

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

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

و مشارکت های زیر @ademilter, @adictonator, @adilansari, @adtc, @afonsojramos, @agadzik, , @anthonyshew, @AntoineBourin, @anujssstw, @apeltop, @aralroca, @aretrace, @artdevgame, @artechventure, @arturbien, @Aiya2, @Ayaz @BaffinLee، @Banbarashik، @bencmbrook، @benjie، @bennettdams، @bertho-zero، @bigyanse، @Bitbbot، @blue-devil1134،، @ChristianIvicevic، @chriswdmr، @chunsch، @ciruz، @clive-inh-king، @cjmling @coreyleelarson، @Cow258، @cprussin، @craigwheeler، @cramforce، @cravend، @cristobaldominguez95، @ctjlewis، @cvolant، @cxa، @danger-ahead، @daniel-web-developer، @danmindru، @dante-shaqneurin@ @davecarlson، @David0z، @davidnx، @dciug، @delbaoliveira، @denchance، @DerTimonius، @devagrawal09، @DevEsteves، @devjiwonchoi، @devknoll، @DevLab2425، @devvspaces، @didemhellimes، @didemhellime @dlehmhus، @doinki، @dpnolte، @Drblessing، @dtinth،@ducanhgh، @DuCanhGH، @ductnn، @duncanogle، @dunklesToast، @DustinsCode، @dvakatsiienko، @dvoytenko، @dylanjha، @E,1Malon @eck @ericfennis، @escwxyz، @Ethan-Arrowwood، @ethanmick، @ethomson، @fantaasm، @feikerwu، @ferdingler، @FernandVEYRIER، @feugy، @fgiuliani، @fomichroman، @Fonger، @ForsakenHarmony، @Frenk @ForsakenHarmony، @Frank @furkanmavili، @g12i، @gabschne، @gaojude، @gdborton، @gergelike، @gfgabrielfranca، @gidgudgod، @Gladowar، @Gnadhi، @gnoff، @goguda، @greatSumini، @gruz0، @Guilleovolund، @guilleovolund، @gu @HarshaVardhanReddyDuvvuru، @haschikeks، @Heidar-An، @heyitsuzair، @hiddenest، @hiro0218، @hotters، @hsrvms، @hu0p، @hughlilly، @HurSungYun، @hustLer2k، @iamarpitgs، @janicklas-ralph، @jankaifer، @JanKaifer، @jantimon، @jaredpalmer، @javivelasco، @jayair، @jaykch، @Jeffrey-Zutt، @jenewland1999، @jeremydouglas، @JesseKoldeKoldewijn، @JesseKoldewijn، @In,cludeojim-a @jocarrd، @joefreeman، @JohnAdib، @JohnAlbin @JohnDaly، @johnnyomair، @johnta0، @joliss، @jomeswang، @joostdecock، @Josehower، @josephcsoti، @josh، @joshuabaker، @Joshuabaker، @JoshuaKGG @jsteele-stripe، @JTaylor0196، @JuanM04، @jueungrace، @juliusmarminge، @Juneezee، @Just-Moh-it، @juzhiyuan، @jyunhanlin، @kaguya3222، @karlhorky، @kevinmitch14، @Kunitch14، @Kunins, @ki @kleintorres، @koba04، @koenpunt، @koltong، @konomae، @kosai106، @krmeda، @kvnang، @kwonoj، @ky1ejs، @kylemcd، @labyrinthitis، @lachlanjc، @lacymorrow، @laityned، @lerianyle, @leriobiany @li-jia-nan، @loettz، @lorenzobloedow، @lubakravche، @lucasassisrosa، @lucasconstantino، @lucgagan، @LukeSchlangen، @LuudJanssen، @lycuid، @M3kH، @m7yue، @manovotny، @Maris-6، @Maranomy @MarkAtOmniux، @martin-wahlberg، @masnormen، @matepapp، @matthew-heath، @mattpr، @maxleiter، @MaxLeiter، @maxproske، @meenie، @meesvandongen، @mhmdrioaf، @michaeloliverx، @Mike-Lkjmil, @Mike-Lkjmil, @Mike-Lkjmil, @Mike-Plummer @mirismaili، @mkcy3، @mknichel، @mltsy، @mmaaaaz، @mnajdova، @moetazaneta، @mohanraj-r، @molebox، @morganfeeney، @motopods، @mPaella،@mrkldshv، @mrxbox98، @nabsul، @nboechante، @nboechant. @nfinished، @Nick-Mazuk، @nickmccurdy، @niedziolkamichal، @niko20، @nikolovlazar، @nivak-monarch، @nk980113، @nnnnoel، @nocell، @notrab، @nroland013، @nuta، @nutlope، @,vi، @okerari @omarhoumz، @opnay، @orionmiz، @ossan-engineer، @patrick91، @pauek، @peraltafederico، @Phiction، @pn-code، @pyjun01، @pythagoras-yamamoto، @qrohlf، @raiseddead, @reconbot, @reconbot, @reconbot, @reconbot, @reconbot, @rightones، @riqwan، @rishabhpoddar، @rjsdnql123، @rodrigofeijao، @runjuu، @Ryan-Dia، @ryo-manba، @s0h311، @sagarpreet-xflowpay، @sairajchouhan، @samdenty، @sanjasemin، @samdenty@ @schehata، @Schniz، @sepiropht،@serkanbektas، @sferadev، @ShaunFerris، @shivanshubisht، @shozibabbas، @silvioprog، @simonswiss، @simPod، @sivtu، @SleeplessOne1917، @smaeda-ks، @sonam-serchan، @SonMooSans، @sophieporiouss @sp00ls، @sqve، @sreetamdas، @stafyniaksacha، @starunaway، @steebchen، @stefanprobst، @steppefox، @steven-tey، @suhaotian، @sukkaw، @SukkaW، @superbahbi، @SuttonJack، @svarunid,5، @svarunid، @svarunid, @svarunid, @s @taep96، @taylorbryant، @teobler، @Terro216، @theevilhead، @thepatrick00، @therealrinku، @thomasballinger، @thorwebdev، @tibi1220، @tim-hanssen، @timeyoutakeit، @tka5، @tkryanxman @tknickman @tknickman @tunamagur0، @tvthatsme، @tyhopp، @tyler-lutz، @UnknownMonk، @v1k1، @valentincostam، @valentinh، @valentinpolitov، @vamcs، @vasucp1207، @vicsantizo، @vinaykulk621، @off,vlavish@ @wherehows، @WhoAmIRUS، @WilderDev، @Willem-Jaap، @williamli، @wiredacorn، @wiscaksono، @wojtekolek، @ws-jm، @wxh06، @wyattfry، @wyattjoh، @xiaolou86، @y-yashgma @sp,yaathgma@ @Yash-Singh1، @yigithanyucedag، @ykzts، @Yovach، @yutsuten، @yyuemii، @zek، @zekicaneksi، @zignis و @zlrlyy