Next.js 16.2: بهبودهای هوش مصنوعی | Next.js

Next.js 16.2 شامل چندین بهبود طراحی شده برای توسعه به کمک هوش مصنوعی است. این تغییرات درک پروژه شما، اشکال زدایی از ترمینال و بازرسی برنامه های در حال اجرا را برای نمایندگان آسان تر می کند—همه بدون نیاز به مرورگر.

create-next-app اکنون شامل یک AGENTS.md فایل پیش‌فرض، به عوامل برنامه‌نویسی هوش مصنوعی دسترسی به اسناد Next.js مطابق با نسخه از ابتدای پروژه شما را می‌دهد.

این بر اساس تحقیقات ما در مورد AGENTS.md، که نشان داد که ارائه عوامل با دسترسی به اسناد بسته به 100٪ توان عملیاتی در ارزیابی های Next.js دست یافته است – از رویکردهای مبتنی بر مهارت که به 79٪ رسیده است. بینش کلیدی: زمینه همیشه روشن بهتر از بازیابی بر اساس تقاضا عمل می کند، زیرا عوامل اغلب تشخیص نمی دهند که چه زمانی باید به دنبال اسناد باشند.

برای پروژه‌های موجود، این تنظیمات به نسخه Next.js شما بستگی دارد.

در 16.2 یا بالاتر، اسناد قبلاً در گروه بندی شده اند next بسته بندی این دو فایل را به ریشه پروژه خود اضافه کنید:

 
# Next.js: ALWAYS read docs before coding
 
Before any Next.js work, find and read the relevant doc in `node_modules/next/dist/docs/`. Your training data is outdated — the docs are the source of truth.
 

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

CLAUDE.md فایل دستورالعمل کلود کد است. را @ دستورالعمل به آن می گوید که روشن شود AGENTS.md به عنوان زمینه اضافی:

در نسخه های قبلی، از codemod برای تولید خودکار این فایل ها استفاده کنید:

npx @next/codemod@latest agents-md

برای جزئیات بیشتر، به راهنمای تنظیم عوامل هوش مصنوعی مراجعه کنید.

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

به طور پیش فرض، فقط خطاها به ترمینال ارسال می شوند. شما می توانید سطح حمل و نقل را با logging.browserToTerminal در مال شما next.config.ts:

const nextConfig = {
  logging: {
    browserToTerminal: true,
    // 'error' — errors only (default)
    // 'warn'  — warnings and errors
    // true    — all console output
    // false   — disabled
  },
};
 
export default nextConfig;

Next.js اکنون PID، پورت و URL سرور توسعه دهنده در حال اجرا را در آن ثبت می کند .next/dev/lock فایل وقتی یک ثانیه next dev فرآیند در همان فهرست پروژه شروع می شود، Next.js فایل قفل را می خواند و یک خطای عملی را چاپ می کند:

Error: Another next dev server is already running.
 
- Local:        http://localhost:3000
- PID:          12345
- Dir:          /path/to/project
- Log:          .next/dev/logs/next-development.log
 
Run kill 12345 to stop it.

این به ویژه برای عوامل کدنویسی هوش مصنوعی که اغلب سعی در اجرا دارند مفید است next dev بدون اینکه بدانیم سرور از قبل در حال اجرا است. خطای ساختاری به عامل PID می دهد تا فرآیند موجود را از بین ببرد یا URL برای اتصال به آن – بدون نیاز به مداخله دستی.

فایل قفل نیز از دو جلوگیری می کند next build فرآیندها به طور همزمان اجرا نمی شوند، که در غیر این صورت می تواند مصنوعات ساخت را خراب کند.

ویژگی های بالا به نمایندگان کمک می کند تا پروژه شما را درک کنند و عیب یابی کنند. @vercel/next-browser این را با اجازه دادن به عوامل برای بازرسی برنامه Next.js در حال اجرا گسترش می دهد.

next-browser یک CLI آزمایشی است که داده‌های سطح مرورگر – اسکرین‌شات‌ها، درخواست‌های شبکه، گزارش‌های کنسول – را به همراه بینش‌های خاص چارچوب از React DevTools و هم‌پوشانی توسعه Next.js، مانند درخت‌های مؤلفه، استرات‌ها، قلاب‌ها، پوسته‌های پیش‌اجرای جزئی (PPR) و خطاها در معرض نمایش قرار می‌دهد. همه به عنوان متن ساختار یافته از طریق دستورات پوسته برگردانده شدند.

LLM نمی تواند پانل DevTools را بخواند، اما می تواند کار کند next-browser tree، خروجی را تجزیه و تحلیل کنید و تصمیم بگیرید که در مرحله بعد چه چیزی را بررسی کنید. هر دستور یک درخواست یک بار در مقابل یک جلسه مرورگر دائمی است، بنابراین نمایندگان می توانند برنامه را به طور مکرر بدون مدیریت وضعیت مرورگر درخواست کنند. این کار مرورگر را به چیزی تبدیل می کند که عامل می تواند درباره آن استدلال کند، به جای رابط کاربری که نمی تواند به آن دسترسی پیدا کند.

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

مجموعه ویژگی ها به سرعت در حال پیشرفت است. از این نسخه، next-browser پشتیبانی می کند:

• درخت های مؤلفه React را بررسی کنید – نمایش برجستگی ها، قلاب ها، وضعیت و مکان فایل های نقشه برداری شده در منبع
• پوسته های PPR را تجزیه و تحلیل کنید – شناسایی مناطق استاتیک در مقابل پویا و مرزهای مسدود شده تعلیق
• دسترسی به خطاها و گزارش ها – استخراج مسائل مربوط به ساخت و اجرا از سرور توسعه
• نظارت بر فعالیت شبکه – ردیابی درخواست ها پس از ناوبری، از جمله اقدامات سرور
• تصاویر بصری را ضبط کنید – اسکرین شات بگیرید یا نوارهای فیلم در حال بارگذاری را ضبط کنید

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

آن را به عنوان یک مهارت نصب کنید (قابل استفاده مجدد برای عوامل هوش مصنوعی):

npx skills add vercel-labs/next-browser

След тоа въведете /next-browser در Claude Code، Cursor یا هر عامل هوش مصنوعی که از مهارت ها پشتیبانی می کند. CLI یک نمونه Chromium را با React DevTools از پیش بارگذاری شده مدیریت می‌کند — بدون نیاز به پیکربندی مرورگر.

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

با پیش‌اجرای جزئی (PPR)، Next.js می‌تواند فوراً از لبه یک لفاف ثابت (بخش‌هایی از صفحه شما که به داده‌های هر درخواست وابسته نیستند) ارائه کند و سپس به بقیه آن‌ها پخش شود. هرچه محتوای بیشتری در لفاف استاتیک قرار گیرد، کاربران سریع‌تر صفحه معنادار را می‌بینند.

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

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}
 
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  const views = await getVisitorCount(params.slug); // per-request
 
  return (
    article>
      h1>{post.title}h1>
      span>{views} viewsspan>
      div>{post.content}div>
    article>
  );
}

هر حلزون در فهرست شده است generateStaticParams، بنابراین می توان محتوای پست را در زمان ساخت از قبل رندر کرد. اما getVisitorCount بر روی هر درخواستی کار می کند – و از آنجایی که در سطح بالای جزء قرار دارد، این کار را می کند صفحه کامل پویا در نتیجه، کل صفحه به جای رندر شدن تدریجی، پشت یک اسکلت بارگذاری منتظر می ماند.

یک نماینده می تواند استفاده کند next-browser برای تشخیص این قفل کردن حالت PPR فقط پوسته استاتیک را نشان می دهد – در این مورد، app/blog/[slug]/loading.tsx اسکلت زیرا هیچ چیزی در صفحه وارد پوسته نشده است:

next-browser ppr lock          # Enter PPR mode
next-browser goto /blog/hello  # The entire page is a loading skeleton

مامور سپس فرار می کند ppr unlock برای اینکه بفهمید چه اشتباهی رخ داده است:

# PPR Shell Analysis
# 1 dynamic hole, 1 static
 
blocked by:
  - getVisitorCount (server-fetch)
    owner: BlogPost at app/blog/[slug]/page.tsx:5
    next step: Push the fetch into a smaller Suspense leaf

گزارش دقیقاً به نماینده می گوید که چه کاری انجام دهد: getVisitorCount е блокерът, в който زندگی می کند BlogPostو راه حل این است که آن را به حد خود از تعلیق فشار دهید. نماینده فقط پیشخوان را می پیچد:

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
 
  return (
    article>
      h1>{post.title}h1>
      Suspense fallback={span>— viewsspan>}>
        VisitorCount slug={params.slug} />
      Suspense>
      div>{post.content}div>
    article>
  );
}

در حال اجرا ppr lock دوباره تأیید می کند که بسته بندی رشد کرده است – محتوای پست اکنون بلافاصله ارائه می شود. فقط تعداد بازدیدکنندگان یک گزینه بازگشتی را نشان می دهد:

next-browser هنوز در حال تکامل است، اما به آینده ای اشاره می کند که در آن عوامل می توانند برنامه ها را با همان دید توسعه دهنده اشکال زدایی و بهینه سازی کنند.

بازخورد خود را به اشتراک بگذارید و به شکل گیری آینده Next.js کمک کنید: