1 
2برسوں سے Next.js میں سب سے زیادہ پریشان کن سوالات میں سے ایک یہ رہا ہے: "کیا یہ صفحہ جامد ہے یا متحرک؟"۔ یہ ایک سادہ سا سوال لگتا ہے، جب تک کہ آپ مختلف اختیارات کے ساتھ `cookies()`، ایک `fetch` پر کال شامل نہیں کرتے، ڈیٹا بیس کلائنٹ، CMS، شاپنگ کارٹ، یا حسب ضرورت مواد کا ایک ٹکڑا۔
3 
4Next.js 16 دلچسپ ہے کیونکہ یہ اس گفتگو کو کم پراسرار بنانے کی کوشش کرتا ہے۔ یہ پیچیدگی کو ختم نہیں کرتا ہے، لیکن یہ ذہنی ماڈل کو بدل دیتا ہے: راستے پہلے سے طے شدہ طور پر متحرک ہوتے ہیں، جہاں ضرورت ہو وہاں کیشے خود کو ظاہر کرتا ہے، اور `Suspense` تازہ رہنے والے حصوں کے ساتھ تیز گولے بنانے کا قدرتی طریقہ بن جاتا ہے۔
5 
6سمجھنے کے لیے خصوصیت Cache Components ہے۔ Stable Turbopack, React Compiler, `proxy.ts`، اور نئے invalidation APIs اہم ہیں، لیکن وہ اسی مسئلے کے گرد گھومتے ہیں: پردے کے پیچھے فریم ورک نے کیا فیصلہ کیا اس کا اندازہ لگائے بغیر تیز ایپس بنانا۔
7 
8## کیونکہ یہ چیز اہمیت رکھتی ہے۔
9 
10ایک حقیقی ایپ میں آپ کے پاس صرف "جامد صفحات" اور "متحرک صفحات" نہیں ہوتے ہیں۔ آپ کے پاس مختلف ضروریات کے ساتھ مختلف ٹکڑے ہیں۔
11 
12پروڈکٹ شیٹ دن میں چند بار تبدیل ہو سکتی ہے۔ قیمت زیادہ کثرت سے بدل سکتی ہے۔ دستیابی تقریباً لائیو ہونی چاہیے۔ صارف نام ذاتی ہے۔ جائزوں کو نشر کیا جا سکتا ہے۔ سائڈبار مستحکم ہوسکتی ہے۔ ٹوکری نہیں کرتا۔
13 
14اگر آپ ہر چیز کو ایک اکائی کے طور پر دیکھتے ہیں، تو آپ ہمیشہ دو انتہاؤں میں سے ایک میں ختم ہوتے ہیں:
15 
16- جارحانہ کیشنگ اور پرانے ڈیٹا کو دیکھنے کا خطرہ؛
17- ہر جگہ متحرک رینڈرنگ اور کارکردگی ضرورت سے زیادہ خراب۔
18 
19اس غلط انتخاب سے بچنے کے لیے Cache Components بالکل ٹھیک کام کرتا ہے۔
20 
21## عملی طور پر ماڈل
22 
23`cacheComponents: true` کے ساتھ، آپ `"use cache"` کا استعمال کرتے ہوئے اعلان کر سکتے ہیں کہ کیا کیش ایبل ہے۔ پھر آپ مدت اور ٹیگز کو `cacheLife()` اور `cacheTag()` کے ساتھ منسلک کر سکتے ہیں۔ متحرک حصے متحرک رہتے ہیں اور `Suspense` کے ساتھ الگ تھلگ ہوسکتے ہیں۔
24 
25```mermaid
26flowchart TD
27    Request[صارف کی درخواست] --> Shell[کیش شدہ شیل]
28    Request --> Dynamic[متحرک حصے]
29    Shell --> FirstPaint[پہلا فوری مواد]
30    Dynamic --> Stream[سسپنس کے اندر سلسلہ بندی]
31    Stream --> Complete[پورا صفحہ]
32```
33 
34سیٹ اپ چھوٹا ہے:
35 
36```typescript
37// next.config.ts
38import type { NextConfig } from 'next';
39 
40const nextConfig: NextConfig = {
41  cacheComponents: true,
42};
43 
44export default nextConfig;
45```
46 
47بڑی تبدیلی ترتیب میں نہیں ہے۔ یہ اس میں ہے کہ آپ اجزاء کو کیسے لکھنا شروع کرتے ہیں۔
48 
49```tsx
50// app/products/[slug]/page.tsx
51import { Suspense } from 'react';
52import { cacheLife, cacheTag } from 'next/cache';
53 
54async function getProduct(slug: string) {
55  'use cache';
56 
57  cacheLife('hours');
58  cacheTag(`product:${slug}`);
59 
60  return db.product.findUnique({ where: { slug } });
61}
62 
63async function ProductDetails({ slug }: { slug: string }) {
64  const product = await getProduct(slug);
65 
66  return (
67    <section>
68      <h1>{product.name}</h1>
69      <p>{product.description}</p>
70    </section>
71  );
72}
73 
74async function LiveInventory({ slug }: { slug: string }) {
75  const inventory = await db.inventory.findFirst({ where: { slug } });
76  return <p>{inventory.quantity} pezzi disponibili</p>;
77}
78 
79export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
80  const { slug } = await params;
81 
82  return (
83    <>
84      <ProductDetails slug={slug} />
85      <Suspense fallback={<p>Controllo disponibilità...</p>}>
86        <LiveInventory slug={slug} />
87      </Suspense>
88    </>
89  );
90}
91```
92 
93ضروری نہیں ہے کہ صفحہ تمام کیشڈ یا تمام متحرک ہو۔ پروڈکٹ شیٹ تیز اور دوبارہ قابل استعمال ہوسکتی ہے۔ انوینٹری تازہ رہ سکتی ہے۔ صارف سست ترین حصے کا انتظار کیے بغیر فوراً کچھ دیکھتا ہے۔
94 
95## `use cache` قابل عمل دستاویزات ہے۔
96 
97مجھے `"use cache"` کے بارے میں جو چیز پسند ہے وہ یہ ہے کہ یہ آپ کو کسی ارادے کو واضح کرنے پر مجبور کرتا ہے۔ جب آپ کوئی فنکشن پڑھتے ہیں، تو آپ فوراً سمجھ جاتے ہیں کہ کسی نے فیصلہ کیا ہے: "اس ڈیٹا کو دوبارہ استعمال کیا جا سکتا ہے"۔
98 
99یہ خاص طور پر مفید ہے جب آپ `fetch` استعمال نہیں کر رہے ہوں۔ بہت سی ایپس Prisma، Drizzle، اندرونی SDKs، CMS کلائنٹس یا سروس فنکشنز سے ڈیٹا پڑھتی ہیں۔ ان معاملات میں صرف `fetch` اختیارات پر مبنی پرانی استدلال کافی نہیں تھا۔
100 
101انگوٹھے کا اصول:
102 
103- cachea مواد نسبتا مستحکم؛
104- دانے دار ٹیگ استعمال کریں؛
105- متحرک اجازتوں، سیشنز، کارٹس، اطلاعات اور لین دین کی حالتوں کو چھوڑتا ہے۔
106- سست حصوں کو اندر رکھیں `Suspense`؛
107- "ہم نے کارکردگی کو بہتر بنایا" کہنے سے پہلے پیمائش کریں۔
108 
109## سب کچھ پھینکے بغیر باطل کر دیں۔
110 
111کیشے صرف اس صورت میں مفید ہے جب آپ اسے درست طریقے سے اپ ڈیٹ کر سکیں۔ یہاں `cacheTag`، `revalidateTag` اور `updateTag` اہم ہو جاتے ہیں۔
112 
113مثال:
114 
115```typescript
116'use server';
117 
118import { updateTag } from 'next/cache';
119 
120export async function updateProductName(productId: string, name: string) {
121  await db.product.update({
122    where: { id: productId },
123    data: { name },
124  });
125 
126  updateTag(`product:${productId}`);
127}
128```
129 
130اہم تفصیل ٹیگ ہے۔ `product:${productId}` ایک درست حد بتاتا ہے۔ `products` ایک بڑی بالٹی کو بتاتا ہے۔ سب سے پہلے بڑی بالٹی آرام دہ ہے؛ کچھ مہینوں کے بعد یہ وجہ بن جاتی ہے کہ آپ عنوان کو تبدیل کرنے کے لیے آدھی ایپ کو باطل کر دیتے ہیں۔
131 
132## مستحکم ٹربوپیک: وہ حصہ جو آپ ہر روز سنتے ہیں۔
133 
134Next.js 16 ٹربوپیک کو ترقی اور تعمیر کے لیے مرکز میں لاتا ہے۔ یہ سب سے زیادہ شاعرانہ خصوصیت نہیں ہے، لیکن یہ وہی ہے جو آپ کام کرتے وقت محسوس کرتے ہیں: سرور جو پہلے شروع ہوتا ہے، تیز تر تروتازہ ہوتا ہے، ایسا بناتا ہے جو زبردستی کافی وقفے کی طرح محسوس ہونے کو روکتا ہے۔
135 
136اس نے کہا، میں اپنی آنکھیں بند کرکے کسٹم پلگ ان سے بھرے کوڈ بیس کو منتقل نہیں کروں گا۔ میں چیک کروں گا:
137 
138- مقامی تعمیر؛
139- غیر معیاری درآمد؛
140- MDX، SVG اور CSS؛
141- Webpack پلگ ان رہ گئے؛
142- تنقیدی صفحات؛
143- تعمیراتی اوقات میں فرق
144 
145نئے منصوبوں کے لیے، میں پہلے سے طے شدہ سے شروع کروں گا۔ بالغوں کے لیے، میں ایک پیمائش شدہ ہجرت کروں گا۔
146 
147## ری ایکٹ کمپائلر: شور کو ہٹا دیں، سوچا نہیں۔
148 
149React Compiler 1.0 مستحکم ہے اور Next.js 16 اسے `reactCompiler` کے ساتھ سپورٹ کرتا ہے۔ وعدہ بہت زیادہ دستی یادداشت کو کم کرنے کا ہے: کم `memo`، کم `useMemo`، کم `useCallback` استعمال کیا جاتا ہے "حفاظت کے لئے"۔
150 
151```typescript
152// next.config.ts
153import type { NextConfig } from 'next';
154 
155const nextConfig: NextConfig = {
156  reactCompiler: true,
157};
158 
159export default nextConfig;
160```
161 
162میں اسے جادوئی دھول کی طرح نہیں سمجھوں گا۔ کمپائلر اس وقت مدد کرتا ہے جب کوڈ React کے اصولوں پر اچھی طرح عمل کرتا ہے۔ اگر اجزاء کے عجیب ضمنی اثرات، پوشیدہ تغیرات یا بری طرح سے استعمال شدہ ہکس ہیں، تو اسے پہلے ٹھیک کرنے کی ضرورت ہے۔
163 
164اسے آزمانے کا صحت مند طریقہ:
165 
1661. اپ ڈیٹ `eslint-plugin-react-hooks`؛
1672. اصل خلاف ورزیوں کو ٹھیک کرنا؛
1683. اسے ایک کنٹرول شدہ علاقے پر فعال کریں؛
1694. تعمیراتی وقت اور رویے کی پیمائش؛
1705. دستی یادداشت کو صرف اس وقت ہٹا دیں جب اس کی مزید ضرورت نہ ہو۔
171 
172مقصد ہر `useMemo` کو مٹانا نہیں ہے۔ مقصد یہ ہے کہ احتیاطی یادداشت لکھنا بند کر دیا جائے کیونکہ ہم رینڈرنگ سے ڈرتے ہیں۔
173 
174## `proxy.ts` اور نیٹ ورک کی حد
175 
176پرانا `middleware.ts` `proxy.ts` بن جاتا ہے۔ یہ نام کی تبدیلی ہے، لیکن یہ سمجھ میں آتا ہے: وہ فائل درخواست کی حد پر بیٹھتی ہے، یہ روایتی بیک اینڈ طرز کا عام مڈل ویئر نہیں ہے۔
177 
178```typescript
179// proxy.ts
180import { NextRequest, NextResponse } from 'next/server';
181 
182export default function proxy(request: NextRequest) {
183  const isLoggedIn = Boolean(request.cookies.get('session'));
184 
185  if (!isLoggedIn && request.nextUrl.pathname.startsWith('/dashboard')) {
186    return NextResponse.redirect(new URL('/login', request.url));
187  }
188 
189  return NextResponse.next();
190}
191```
192 
193یہاں اصول آسان ہے: اسے چھوٹا رکھیں۔ ری ڈائریکٹ، اوتھ روٹنگ، ہیڈر، ضروری دوبارہ لکھنا۔ اگر یہ دوسرے پسدید کی طرح محسوس ہونے لگتا ہے، تو یہ شاید بہت زیادہ کر رہا ہے۔
194 
195## میں واقعی ہجرت کیسے کروں گا۔
196 
197میں ایک ساتھ تمام خصوصیات کو آن نہیں کروں گا۔ میں یہ کروں گا:
198 
1991. میں نیکسٹ، ری ایکٹ اور ری ایکٹ DOM کو اپ ڈیٹ کرتا ہوں۔
2002. میں آفیشل کوڈ موڈ لانچ کرتا ہوں۔
2013. میں `params`، `searchParams`، `cookies()`، `headers()` اور `draftMode()` پر بریکنگ تبدیلیوں کو ٹھیک کرتا ہوں؛
2024. میں `middleware.ts` کو `proxy.ts` میں منتقل کرتا ہوں؛
2035. میں تعمیرات اور تنقیدی صفحات کو چیک کرتا ہوں۔
2046. میں ایک ایسے حصے پر کیشے کے اجزاء کو فعال کرتا ہوں جہاں کیش فی الحال رگڑ پیدا کرتا ہے۔
2057. میں ٹیگز اور باطل ہونے کے لیے کنونشنز کی وضاحت کرتا ہوں؛
2068. میں الگ سے React Compiler آزماتا ہوں۔
2079. پہلے اور بعد کے میٹرکس کا موازنہ۔
208 
209اچھی ہجرت وہ نہیں ہے جو تمام نئی خصوصیات کو استعمال کرے۔ یہی چیز ایپ کے رویے کو مزید پڑھنے کے قابل بناتی ہے۔
210 
211## سوچ کے انداز میں کیا تبدیلی آتی ہے۔
212 
213Next.js 16 کے بارے میں سب سے مفید چیز یہ ہے کہ یہ آپ کو ارادوں کو بہتر نام دینے پر مجبور کرتا ہے۔ ایک فنکشن صرف "ڈیٹا بیس سے پروڈکٹ حاصل کرنا" نہیں ہے۔ یہ ہے "پروڈکٹ حاصل کریں، میں اسے گھنٹوں کے لیے کیش کر سکتا ہوں، میں اسے اس ٹیگ سے باطل کرتا ہوں"۔ ایک جزو صرف "صفحہ رینڈر" نہیں ہوتا ہے۔ یہ "یہ تیز ترین شیل ہے، یہ ٹکڑا ذاتی ہے، یہ سٹریمنگ آتا ہے۔"
214 
215پہلے تو یہ زیادہ کام لگتا ہے۔ پھر یہ سکون کی شکل اختیار کر لیتا ہے۔ کارکردگی کے فیصلے اب ڈیفالٹس، ہیورسٹکس اور قبائلی یادداشت کے امتزاج میں پوشیدہ نہیں ہیں۔ وہ کوڈ میں ہیں۔
216 
217## مفید ذرائع
218 
219- [Next.js 16 ریلیز نوٹ](https://nextjs.org/blog/next-16)
220- [کیشے اجزاء - Next.js دستاویزات](https://nextjs.org/docs/app/getting-started/cache-components)
221- [cache - Next.js دستاویزات کا استعمال کریں۔](https://nextjs.org/docs/app/api-reference/directives/use-cache)
222- [ری ایکٹ کمپائلر v1.0](https://react.dev/blog/2025/10/07/react-compiler-1)
223