Next.js 13.4 |Next.js

// New: App Router ✨
// The root layout is shared for the entire application
export default function RootLayout({ children }) {
  return (
    html lang="en">
      body>{children}body>
    html>
  );
}

فرصت ایجاد یک مسیریاب سیستم فایل جدید نیز زمان مناسبی برای رسیدگی به بسیاری از درخواست‌های ویژگی مرتبط دیگر با سیستم مسیریابی ما بود. به عنوان مثال:

• قبلاً، فقط می‌توانستید شیت‌های جهانی را از بسته‌های npm خارجی (مانند کتابخانه‌های مؤلفه) وارد کنید. _app.js. این یک تجربه ایده آل برای توسعه دهندگان نبود. با App Router می‌توانید هر فایل CSS را به هر مؤلفه وارد کنید (و بومی‌سازی کنید).
• قبلاً، گنجاندن رندر سمت سرور با Next.js (rev getServerSideProps) به این معنی است که تعامل با برنامه شما تا زمانی که کل صفحه هیدراته نشده باشد مسدود شده است. با App Router، معماری را به گونه‌ای طراحی کردیم که عمیقاً با React Suspense ادغام شود، به این معنی که می‌توانیم به طور انتخابی بخش‌هایی از صفحه را هیدراته کنیم بدون اینکه تعامل سایر مؤلفه‌های UI را مسدود کنیم. محتوا را می توان فوراً از سرور پخش کرد و عملکرد بارگذاری صفحه درک شده را بهبود بخشید.

روتر در قلب چیزی است که باعث می شود Next.js کار کند. اما این در مورد خود روتر نیست، بلکه در مورد نحوه ادغام بقیه فریمورک است – مانند استخراج داده ها.

لینک را به عنوان کپی کنیدفقط جاوا اسکریپت همه چیز یک تابع است

توسعه دهندگان Next.js و React می خواهند کد جاوا اسکریپت و تایپ اسکریپت را بنویسند و اجزای برنامه را با هم بنویسند. از پست اصلی ما:

import React from 'react';
import Head from 'next/head';
 
export default () => (
  div>
    Head>
      meta name="viewport" content="width=device-width, initial-scale=1" />
    Head>
    h1>Hi. I'm mobile-ready!h1>
  div>
);

در نسخه‌های بعدی Next.js، یک بهبود DX اضافه کرده‌ایم تا React را به‌طور خودکار برای شما وارد کند.

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

برای مثال، اگر می‌خواهید برخی از داده‌ها را بازیابی کنید، نسخه اصلی Next.js به شکل زیر است:

import React from 'react';
import 'isomorphic-fetch';
 
export default class extends React.Component {
  static async getInitialProps() {
    const res = await fetch('https://api.company.com/user/123');
    const data = await res.json();
    return { username: data.profile.username };
  }
}

در نسخه‌های بعدی Next.js، یک ارتقاء DX اضافه کرده‌ایم که چندین لایه را واکشی می‌کند، بنابراین نیازی به وارد کردن نیست. isomorphic-fetch یا node-fetch، و می تواند از شبکه استفاده کند fetch API هم روی کلاینت و هم روی سرور.

با رشد پذیرش و بلوغ چارچوب، مدل های داده کاوی جدید را بررسی کردیم.

getInitialProps هر دو سرور را راه اندازی کنید و مشتری این API کامپوننت React را گسترش می‌دهد و به شما امکان می‌دهد یک کار را انجام دهید Promise و نتایج را به کامپوننت ارسال کنید props.

در حالی که getInitialProps هنوز در حال اجرا است، سپس با نسل بعدی API استخراج داده بر اساس بازخورد مشتری پیش رفتیم: getServerSideProps و getStaticProps.

// Generate a static version of the route
export async function getStaticProps(context) {
  return { props: {} };
}
// Or dynamically server-render the route
export async function getServerSideProps(context) {
  return { props: {} };
}

این APIها مکان اجرای کد شما، کلاینت یا سرور را واضح‌تر می‌کردند و به برنامه‌های Next.js اجازه می‌دادند که به‌طور خودکار به‌صورت ایستا بهینه شوند. همچنین به صادرات استاتیک اجازه می‌دهد تا Next.js در مکان‌هایی که از سرور پشتیبانی نمی‌کنند (مانند کانتینر AWS S3) مستقر شود.

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

از زمان ایجاد Next.js، ما از نزدیک با تیم اصلی React در Meta کار کرده‌ایم تا ویژگی‌های چارچوب را بر روی React primitives ایجاد کنیم. همکاری ما، همراه با سال ها تحقیق و توسعه توسط تیم اصلی React، این امکان را برای Next.js فراهم کرده است تا از طریق آخرین نسخه معماری React، از جمله اجزای سرور، به اهداف خود دست یابد.

با App Router، داده ها را با استفاده از اطلاعات آشنا بازیابی می کنید async و await نحو هیچ API جدیدی برای یادگیری وجود ندارد. به‌طور پیش‌فرض، همه مؤلفه‌ها React Server Components هستند، بنابراین بازیابی داده‌ها به صورت ایمن در سرور انجام می‌شود. به عنوان مثال:

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

اصل “استخراج داده ها به عهده توسعه دهنده است” به طور انتقادی تحقق یافته است. می توانید داده ها را استخراج کرده و بنویسید هر نوع جزء و نه فقط اجزای شخص اول، بلکه هر نوع جزء در اکوسیستم اجزای سرور، مانند تعبیه توییتر react-tweet، که برای ادغام با اجزای سرور طراحی شده و به طور کامل روی سرور اجرا می شود.

import { Tweet } from 'react-tweet';
 
export default async function Page() {
  return Tweet id="790942692909916160" />;
}

از آنجایی که روتر با React Suspense یکپارچه شده است، می‌توانید در حین بارگیری بخش‌هایی از محتوایتان، محتوای بازگشتی را به آرامی نشان دهید و به تدریج محتوا را همانطور که دوست دارید نشان دهید.

import { Suspense } from 'react';
import { PostFeed, Weather } from './components';
 
export default function Page() {
  return (
    section>
      Suspense fallback={p>Loading feed...p>}>
        PostFeed />
      Suspense>
      Suspense fallback={p>Loading weather...p>}>
        Weather />
      Suspense>
    section>
  );
}

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

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

زمانی که Next.js را ساختیم، هنوز برای توسعه دهندگان رایج بود که به صورت دستی بسته وب، babel و سایر ابزارها را برای اجرای برنامه React پیکربندی کنند. افزودن بهینه سازی های اضافی مانند رندر سرور یا تقسیم کد اغلب در راه حل های سفارشی پیاده سازی نمی شود. Next.js، مانند سایر فریم ورک‌های React، یک لایه انتزاعی برای پیاده‌سازی و اجرای بهترین روش‌ها ایجاد کرد.

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

این هم برای برنامه‌های رندر شده توسط سرور و هم برای برنامه‌های تک صفحه‌ای با Next.js مفید بود، زیرا دومی اغلب یک بسته بزرگ جاوا اسکریپت را هنگام راه‌اندازی برنامه بارگذاری می‌کرد. با این حال، برای پیاده سازی جداسازی کد در سطح مؤلفه، توسعه دهندگان مجبور به استفاده از آن بودند next/dynamic برای وارد کردن پویا اجزا.

import dynamic from 'next/dynamic';
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => p>Loading...p>,
});
 
export default function Home() {
  return DynamicHeader />;
}

با App Router، اجزای سرور در بسته جاوا اسکریپت برای مرورگر گنجانده نشده است. اجزای کلاینت به طور خودکار به صورت پیش‌فرض کد جدا می‌شوند (با webpack یا Turbopack در Next.js). همچنین، از آنجایی که کل معماری روتر در حال پخش است و Suspense فعال است، می توانید به صورت تدریجی بخش هایی از رابط کاربری خود را از سرور به مشتری ارسال کنید.

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

import { getUser } from './auth';
import { Dashboard, Landing } from './components';
 
export default async function Layout() {
  const isLoggedIn = await getUser();
  return isLoggedIn ? Dashboard /> : Landing />;
}

Turbopack، بسته جدید ما که از طریق Next.js تست و تثبیت می کنیم، به سرعت بخشیدن به تکرارهای محلی در حین کار بر روی برنامه Next.js (از طریق next dev --turbo) و به زودی تولید شما در حال ساخت است (next build --turbo).

از زمان آلفا در Next.js 13، با تلاش برای رفع اشکالات و افزودن پشتیبانی برای ویژگی‌های از دست رفته، شاهد رشد ثابتی در پذیرش بوده‌ایم. ما Turbopack را در Vercel.com و با بسیاری از مشتریان Vercel که وب‌سایت‌های بزرگ Next.js را اجرا می‌کنند، برای جمع‌آوری بازخورد و بهبود پایداری آزمایش کردیم. ما از حمایت انجمن در آزمایش و گزارش اشکالات به تیم خود سپاسگزاریم.

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

Turbopack هنوز برابری کامل ویژگی با webpack و Next.js ندارد. ما در حال پیگیری پشتیبانی از این ویژگی ها در این شماره هستیم. با این حال، اکثر موارد استفاده از قبل باید پشتیبانی شوند. هدف ما از این نسخه بتا این است که به رفع اشکالات باقی مانده از افزایش پذیرش ادامه دهیم و برای ثبات در نسخه بعدی آماده شویم.

سرمایه‌گذاری ما در بهبود موتور افزایشی و لایه ذخیره‌سازی Turbopack نه تنها توسعه محلی را سرعت می‌بخشد، بلکه ساخت تولید کوتاه‌مدت را نیز افزایش می‌دهد. منتظر نسخه بعدی Next.js باشید که در آن بتوانید اجرا کنید next build --turbo برای ساخت های فوری

امروز نسخه بتا Turbopack را در Next.js 13.4 امتحان کنید next dev --turbo.

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

اکوسیستم فعلی راه‌حل‌ها یا راه‌حل‌های قابل استفاده مجدد در سمت مشتری هستند یا اولیه‌های ساخته شده در چارچوب‌ها. تا به حال، هیچ راهی برای ایجاد جهش سرور و داده های اولیه وجود نداشت. تیم React در حال کار بر روی یک راه حل شخص اول برای جهش است.

ما مشتاقیم که پشتیبانی را به عنوان آزمایشی اعلام کنیم اقدامات سرور در Next.js، که به شما امکان می دهد با فراخوانی مستقیم توابع، داده های روی سرور را تغییر دهید بدون نیاز به ایجاد یک لایه میانی API.

import kv from './kv';
 
export default function Page({ params }) {
  async function increment() {
    'use server';
    await kv.incr(`post:id:${params.id}`);
  }
 
  return (
    form action={increment}>
      button type="submit">Likebutton>
    form>
  );
}

با اقدامات سرور، شما دارای جهش های داده های سمت سرور قدرتمند، جاوا اسکریپت سمت کلاینت کمتر و فرم های به تدریج بهبود یافته خواهید بود.

import db from './db';
import { redirect } from 'next/navigation';
 
async function create(formData: FormData) {
  'use server';
  const post = await db.post.insert({
    title: formData.get('title'),
    content: formData.get('content'),
  });
  redirect(`/blog/${post.slug}`);
}
 
export default function Page() {
  return (
    form action={create}>
      input type="text" name="title" />
      textarea name="content" />
      button type="submit">Submitbutton>
    form>
  );
}

اقدامات سرور در Next.js برای یکپارچگی عمیق با بقیه چرخه عمر داده ها، از جمله کش Next.js، تجدید استاتیک افزایشی (ISR) و روتر مشتری طراحی شده اند.

اعتبار سنجی مجدد داده ها از طریق API های جدید revalidatePath و revalidateTag به این معنی که جهش، رندر مجدد صفحه یا تغییر مسیر ممکن است رخ دهد یک سفر در وب، حصول اطمینان از اینکه داده های صحیح به مشتری نمایش داده می شود حتی اگر ارائه دهنده بالادست کند باشد.

import db from './db';
import { revalidateTag } from 'next/cache';
 
async function update(formData: FormData) {
  'use server';
  await db.post.update({
    title: formData.get('title'),
  });
  revalidateTag('posts');
}
 
export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['posts'] } });
  const data = await res.json();
  // ...
}

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

عملکردهای سرور امروز به صورت آلفا با Next.js 13.4 در دسترس هستند. با انتخاب استفاده از Server Actions، Next.js از کانال انتشار آزمایشی React استفاده خواهد کرد.

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

• حالت پیش نویس: محتوای پیش نویس را از CMS بدون هد خود واکشی و رندر کنید. حالت پیش نویس در هر دو کار می کند pages و app. ما API حالت پیش‌نمایش موجود را بهبود بخشیده و ساده‌سازی کرده‌ایم که همچنان به کار خود ادامه می‌دهد pages. حالت پیش نمایش انجام می دهد نه کار در app– باید از حالت پیش نویس استفاده کنید.

لینک را به عنوان کپی کنیدثبات برنامه روتر به چه معناست؟

علامت گذاری App Router به عنوان ثابت امروز به این معنی نیست که کار ما تمام شده است. ثبات به این معنی است که هسته App Router آماده تولید است و توسط آزمایش‌های داخلی خود ما و بسیاری از کاربران اولیه Next.js تأیید شده است.

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

App Router بر روی React ساخته شده است canary کانالی که اکنون آماده پذیرش چارچوبی از ویژگی هایی مانند اجزای سرور است. بیشتر بدانید.

لینک را به عنوان کپی کنیداین برای اسناد بتا Next.js چه معنایی دارد؟

از امروز، توصیه می‌کنیم با App Router برنامه‌های جدید بسازید. مستندات بتا Next.js که برای توضیح App Router استفاده می‌شد و از ابتدا بازنویسی می‌شد، اکنون در مستندات پایدار Next.js ادغام شده است. اکنون می توانید به راحتی بین برنامه یا Pages Router جابجا شوید.

توصیه می کنیم راهنمای پذیرش تدریجی App Router را بخوانید تا نحوه استفاده از App Router را بیاموزید.

لینک را به عنوان کپی کنیدآیا روتر صفحات ناپدید می شود؟

نه. ما متعهد به حمایت هستیم pages/ توسعه، از جمله رفع اشکال، پیشرفت‌ها، و رفع‌های امنیتی، برای چندین نسخه اصلی در حال پیشرفت. ما می خواهیم اطمینان حاصل کنیم که توسعه دهندگان زمان کافی برای استفاده تدریجی از App Router در زمان آماده شدن دارند.

با استفاده از هر دو pages/ و app/ در تولید با هم حمایت و تشویق می شود. App Router را می توان برای هر مسیری استفاده کرد.

لینک را به عنوان کپی کنیدآیا این بدان معناست که اجزای سرور “تمام” شده اند؟

Next.js چارچوبی است که بر اساس معماری React ساخته می شود که شامل اجزای سرور است. ما امیدواریم که تجربه ارائه شده با App Router سایر فریم ورک ها (یا فریمورک های جدید) را نیز تشویق کند که از این معماری استفاده کنند.

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

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

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

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

و مشارکت‌های زیر @JTaylor0196، @sebmarkbage، @ijjk، @gnoff، @jridgewell، @sagarpreet-xflowpay، @balazsorban44، @cprussin، @ForsakenHarmony، @li-jia-nan، @dciug، @albertothedev، @DuCanhGH، @DuCanhGH، @DuCanhGH, @ieetrick @eps1lon، @reconbot، @acdlite، @cjmling، @nabsul، @motopods، @hanneslund، @tunamagur0، @devknoll، @apeltop، @maranomynet، @y-tsubuku، @EndangeredMassa، @ykzts، @AviAvinav, @koyaurans @delbaoliveira، @agadzik، @Just-Moh-it، @rodrigofeijao، @leerob، @juliusmarminge، @koba04، @Phiction، @jessewarren-aa، @ryo-manba، @Yovach و @dylanjha.