Next.js 16.2 - AI වැඩිදියුණු කිරීම්

• AI Agents සඳහා සූදානම් කළ `create-next-app`: ඔබේ ප්‍රොජෙක්ට් එක ආරම්භයේ සිටම Next.js ඩොකියුමන්ටේෂන් සමඟ ඒකාබද්ධව ක්‍රියා කරයි.
• ටර්මිනල් එකට බ්‍රවුසර් ලොග් යොමු කිරීම (Browser Log Forwarding): ක්ලයන්ට් සයිඩ් एरර්ස් (client-side errors) කෙලින්ම ඔබේ ටර්මිනල් එකෙන්ම බලාගන්න.
• ව්‍යුහගත සංවර්ධන සේවා errors (Structured dev server errors): දැනටමත් ක්‍රියාත්මක වන ප්‍රොජෙක්ට් එකක් නැවත පණගැන්වීමට උත්සාහ කරන විට ඇතිවන ගැටලු ස්වයංක්‍රීයව විසඳන්න.
• `@vercel/next-browser` (Experimental CLI): AI ඒජන්තවරුන්ට React කම්පෝනන්ට් ට්‍රීස් (component trees), Partial Prerendering (PPR) ෂෙල්ස්, නෙට්වර්ක් ක්‍රියාකාරකම් සහ ක්‍රියාත්මක වන ඇප් එකක ස්ක්‍රීන්ෂොට් පවා පරීක්ෂා කිරීමට ඉඩ දෙන්න. 3

bash
npx @next/codemod@latest agents-md

markdown 
# 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. 

markdown
@AGENTS.md

typescript
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  logging: {
    browserToTerminal: 'error', // හෝ 'warn', 'info', 'log', false
  },
};

export default nextConfig;

json
{
  "error": "PORT_IN_USE",
  "port": 3000,
  "pid": 12345,
  "url": "http://localhost:3000"
}

bash
# Claude Code සඳහා
claude skill add @vercel/next-browser

tsx
import { getPostContent, getVisitorCount } from './data';

export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const content = await getPostContent(slug);
  const visitors = await getVisitorCount(slug); // පිටුව dynamic කරයි

  return (
    <main>
      <h1>{content.title}</h1>
      <p>visitors ciunt: {visitors}</p>
      <article>{content.body}</article>
    </main>
  );
}

bash
$ npx next-browser ppr http://localhost:3000/blog/hello-world

✗ Dynamic prerender blocker found at root
  Route: /blog/hello-world
  Prerender Shell: 0% static (Entire page blocked by dynamic data)
  
  Blocker Trace:
    at BlogPost (app/blog/[slug]/page.tsx:6)
    used dynamic data: getVisitorCount

tsx
import { Suspense } from 'react';
import { getPostContent, getVisitorCount } from './data';

export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const content = await getPostContent(slug);

  return (
    <main>
      <h1>{content.title}</h1>
      <Suspense fallback={<p>ලෝඩ් වෙමින්...</p>}>
        <VisitorCount slug={slug} />
      </Suspense>
      <article>{content.body}</article>
    </main>
  );
}

async function VisitorCount({ slug }: { slug: string }) {
  const visitors = await getVisitorCount(slug);
  return <p>නරඹන්නන් සංඛ්‍යාව: {visitors}</p>;
}

bash
$ npx next-browser ppr http://localhost:3000/blog/hello-world

✓ Prerender Shell Optimized
  Route: /blog/hello-world
  Prerender Shell: 92% static
  
  Dynamic Regions (Streamed):
    <VisitorCount> at app/blog/[slug]/page.tsx:18