Next.js 16 ایپ راؤٹر: پیداوار کے نمونے اور نقصانات

Next.js ایپ راؤٹر نے بنیادی طور پر تبدیل کر دیا کہ ہم کس طرح React ایپلی کیشنز بناتے ہیں، اور Next.js 16 کے ذریعے پیٹرنز حقیقی طور پر پروڈکشن کے لیے تیار ہو گئے ہیں۔ لیکن پیجز راؤٹر سے تصوراتی تبدیلی بہت تیز ہے — سرور کے اجزاء، جزوی پری رینڈرنگ، نیسٹڈ لے آؤٹ، اور مکمل طور پر دوبارہ ڈیزائن کردہ ڈیٹا فیچنگ ماڈل سبھی کے لیے ذہنی ماڈل کی دوبارہ وائرنگ کی ضرورت ہوتی ہے جو اکیلے دستاویزات مکمل طور پر نہیں بتا سکتے۔

اس گائیڈ میں ان نمونوں کا احاطہ کیا گیا ہے جو اصل میں پیداوار میں اہمیت رکھتے ہیں: وہ جو کہ کیش پوائزننگ کو روکتے ہیں، غیر ضروری کلائنٹ بنڈلز کو ختم کرتے ہیں، اور اپنے کور ویب وائٹلز کو پیمانے پر سبز رکھتے ہیں۔ ہم 11-لوکل i18n، متحرک OG امیجز، اور 5,577 MDX مواد فائلوں کے لیے سرور سائیڈ رینڈرنگ کے ساتھ 249 صفحات پر مشتمل Next.js 16 ایپلیکیشن بنانے کے تجربے سے فائدہ اٹھائیں گے۔

اہم ٹیک ویز

• ایسے صفحات پر کبھی بھی export const metadata استعمال نہ کریں جن کو لوکل سے آگاہ SEO کی ضرورت ہے - ہمیشہ generateMetadata() استعمال کریں
• سرور کے اجزاء پہلے سے طے شدہ ہیں۔ صرف اس وقت 'use client' شامل کریں جب آپ کو حقیقت میں تعامل کی ضرورت ہو۔
• loading.tsx اور error.tsx اپنے راستے کے حصے کے ساتھ ملتے ہیں، جڑ میں نہیں
• proxy.ts فائل Next.js 16 کا مڈل ویئر ہے — middleware.ts اور proxy.ts دونوں نہ بنائیں
• سرور اجزاء میں fetch() خود بخود ایک ہی رینڈر میں ایک جیسی درخواستوں کی نقل تیار کرتا ہے۔
• unstable_cache ٹیگز کے ساتھ ہر چیز کو دوبارہ درست کیے بغیر جراحی کیش کو باطل کرنے کے قابل بناتا ہے
• generateStaticParams() متحرک راستوں کے لیے درکار ہے جنہیں آپ تعمیر کے وقت مستحکم طور پر بنانا چاہتے ہیں
• JSON-LD سٹرکچرڈ ڈیٹا کو یونیکوڈ انکوڈنگ کا استعمال کرتے ہوئے اسکرپٹ بریک آؤٹ کو صاف کرنا چاہیے۔

---

سرور جزو ذہنی ماڈل

ایپ راؤٹر کے ساتھ ڈویلپرز کی سب سے بڑی غلطی 'use client' تک بہت جلد پہنچنا ہے۔ Next.js 16 میں، app/ ڈائریکٹری میں ہر جزو ڈیفالٹ کے طور پر سرور کا جزو ہوتا ہے۔ یہ صحیح ڈیفالٹ ہے — سرور کے اجزاء سرور پر پیش کرتے ہیں، صفر جاوا اسکرپٹ بنڈل اثر رکھتے ہیں، اور ڈیٹا بیس اور APIs تک براہ راست رسائی حاصل کر سکتے ہیں۔

اصول: 'use client' کو اپنے جزو کے درخت کے پتوں کی طرف دھکیلیں۔ ایک صفحہ سرور کا جزو ہو سکتا ہے جو ڈیٹا حاصل کرتا ہے اور اسے ایک پتلے کلائنٹ کمپوننٹ شیل میں منتقل کرتا ہے جو تعاملات کو سنبھالتا ہے۔

// app/[locale]/blog/[slug]/page.tsx — Server Component (no directive needed)
import { getBlogPost } from '@/lib/blog';
import { BlogContent } from '@/components/blog/blog-content'; // Client Component

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string; locale: string }>;
}) {
  const { slug, locale } = await params;
  const post = await getBlogPost(slug, locale);

  if (!post) notFound();

  return (
    <article>
      <h1>{post.title}</h1>
      {/* Server Component — no JS sent to browser */}
      <PostMeta author={post.author} date={post.date} />
      {/* Client Component — only this file sent as JS */}
      <BlogContent content={post.content} />
    </article>
  );
}

// components/blog/blog-content.tsx — Client Component
'use client';

import { useState } from 'react';

export function BlogContent({ content }: { content: string }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div>
      <div>{content}</div>
      {/* Client-side interactivity lives here */}
    </div>
  );
}

کلیدی بصیرت: BlogContent براؤزر کو JavaScript بھیجتا ہے۔ PostMeta نہیں کرتا۔ ہر غیر ضروری 'use client' ہدایت آپ کے بنڈل کو بڑھا دیتی ہے۔

---

جامد میٹا ڈیٹا پر میٹا ڈیٹا بنائیں

جامد export const metadata اپنی سادگی کے لیے پرکشش ہے، لیکن یہ لوکل سے آگاہ نہیں ہو سکتا، روٹ پیرم تک رسائی حاصل نہیں کر سکتا، اور ڈیٹا حاصل نہیں کر سکتا۔ کسی بھی حقیقی درخواست کے لیے، generateMetadata() واحد صحیح انتخاب ہے:

// app/[locale]/blog/[slug]/page.tsx
import type { Metadata } from 'next';
import { getTranslations } from 'next-intl/server';

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string; locale: string }>;
}): Promise<Metadata> {
  const { slug, locale } = await params;
  const post = await getBlogPost(slug, locale);

  if (!post) return {};

  const locales = ['en', 'zh', 'es', 'ar', 'pt', 'fr', 'de', 'ja', 'tr', 'hi', 'ur'];

  return {
    title: post.title,
    description: post.description,
    alternates: {
      canonical: `https://ecosire.com/${locale === 'en' ? '' : locale + '/'}blog/${slug}`,
      languages: Object.fromEntries(
        locales.map((loc) => [
          loc,
          `https://ecosire.com/${loc === 'en' ? '' : loc + '/'}blog/${slug}`,
        ])
      ),
    },
    openGraph: {
      title: post.title,
      description: post.description,
      images: [`/api/og/blog/${slug}?locale=${locale}`],
      type: 'article',
      publishedTime: post.date,
    },
  };
}

alternates.languages فیلڈ ہر لوکیل کے لیے hreflang ٹیگز تیار کرتا ہے — جو کثیر لسانی SEO کے لیے ضروری ہے۔ سرچ انجن ان کا استعمال ہر صارف کو درست زبان کا ورژن پیش کرنے کے لیے کرتے ہیں۔

---

نیسٹڈ لے آؤٹ اور مشترکہ اسٹیٹ

ایپ راؤٹر کا نیسٹڈ لے آؤٹ سسٹم طاقتور ہے لیکن اس میں ایک غیر واضح رکاوٹ ہے: لے آؤٹ پرپس کے ذریعے اپنے بچوں کو ڈیٹا نہیں دے سکتے۔ کام یا تو رد عمل کا سیاق و سباق (صرف کلائنٹ کے اجزاء) یا ہر سطح پر آزادانہ طور پر ڈیٹا حاصل کرنا ہے۔

app/
  [locale]/
    layout.tsx          <- Locale layout: fonts, i18n provider, theme
    page.tsx            <- Homepage
    blog/
      layout.tsx        <- Blog layout: sidebar, breadcrumbs
      page.tsx          <- Blog list
      [slug]/
        layout.tsx      <- Post layout: reading progress, TOC
        page.tsx        <- Post content
        loading.tsx     <- Skeleton while post loads
        error.tsx       <- Error boundary for this segment

ہر layout.tsx اپنے بچوں کو آزادانہ طور پر لپیٹتا ہے۔ والدین کے لے آؤٹ میں حاصل کردہ ڈیٹا بچوں کے لیے خود بخود دستیاب نہیں ہوتا ہے — ہر وہ جزو جسے ڈیٹا کی ضرورت ہوتی ہے اسے آزادانہ طور پر حاصل کرتا ہے۔ Next.js 16 ایک رینڈر سائیکل کے اندر ایک جیسی fetch() کالوں کی نقل تیار کرتا ہے، لہذا یہ اتنا مہنگا نہیں جتنا لگتا ہے۔

// app/[locale]/layout.tsx
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const messages = await getMessages();

  return (
    <html lang={locale} dir={['ar', 'ur'].includes(locale) ? 'rtl' : 'ltr'}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

---

کیشنگ کی حکمت عملی: چار پرتیں۔

Next.js 16 میں چار الگ الگ کیشنگ پرتیں ہیں۔ صفحہ کیوں اپ ڈیٹ ہو رہا ہے یا کیوں نہیں ہو رہا اس بارے میں چاروں کو سمجھنے کی ضرورت ہے:

1۔ Request Memoization — ایک ہی رینڈر سائیکل کے اندر ایک ہی fetch() URL کو ایک بار کہا جاتا ہے۔ خودکار، کوئی ترتیب نہیں۔

2۔ ڈیٹا کیش — درخواستوں میں مستقل۔ fetch() جوابات پہلے سے طے شدہ طور پر غیر معینہ مدت کے لیے محفوظ کیے جاتے ہیں۔

// Force revalidation every hour
const data = await fetch('/api/posts', { next: { revalidate: 3600 } });

// Never cache (equivalent to SSR)
const data = await fetch('/api/posts', { cache: 'no-store' });

3۔ مکمل روٹ کیش — جامد HTML اور RSC پے لوڈ کو جامد راستوں کے لیے تعمیراتی وقت پر کیش کیا جاتا ہے۔

4۔ راؤٹر کیشے — ملاحظہ کیے گئے راستوں کا کلائنٹ سائیڈ کیش۔ براؤزر سیشن تک برقرار رہتا ہے۔

ڈیٹا بیس کے سوالات کے لیے (غیر بازیافت)، استعمال کریں unstable_cache:

import { unstable_cache } from 'next/cache';

const getCachedBlogPosts = unstable_cache(
  async (locale: string) => {
    return db.select().from(posts).where(eq(posts.locale, locale));
  },
  ['blog-posts'], // Cache key
  {
    revalidate: 3600, // Revalidate hourly
    tags: ['blog'], // Tag for manual invalidation
  }
);

// Invalidate from a Server Action or Route Handler:
import { revalidateTag } from 'next/cache';
revalidateTag('blog'); // All blog-tagged caches cleared

---

خرابی کی حدود: دو سطحیں درکار ہیں۔

پروڈکشن ایپلی کیشنز کو دو غلطی کی حدوں کی ضرورت ہوتی ہے: ایک لوکل سے آگاہی والے صفحات کے لیے اور ایک عالمی فال بیک روٹ لیول کی غلطیوں کے لیے۔

// app/[locale]/error.tsx — Locale-level error boundary
'use client';

import { useTranslations } from 'next-intl';
import { useEffect } from 'react';

export default function LocaleError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const t = useTranslations('errors');

  useEffect(() => {
    // Log to error tracking service
    console.error(error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center min-h-screen">
      <h2>{t('title')}</h2>
      <p>{t('description')}</p>
      <button onClick={reset}>{t('retry')}</button>
    </div>
  );
}

// app/global-error.tsx — Root fallback (no i18n available here)
'use client';

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  // Cannot use useTranslations here — no NextIntlClientProvider above
  // Use inline styles — no Tailwind in root error boundaries
  return (
    <html>
      <body>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '2rem' }}>
          <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold' }}>Something went wrong</h2>
          <button
            onClick={reset}
            style={{ marginTop: '1rem', padding: '0.5rem 1rem', cursor: 'pointer' }}
          >
            Try again
          </button>
        </div>
      </body>
    </html>
  );
}

global-error.tsx روٹ layout.tsx کی جگہ لے لیتا ہے جب یہ فائر ہوتا ہے، لہذا اس میں <html> اور <body> ٹیگز شامل ہونے چاہئیں۔ یہ سیاق و سباق کے فراہم کنندگان تک رسائی حاصل نہیں کر سکتا جو ترتیب میں رہتے ہیں — کوئی i18n، کوئی تھیم، کوئی تصنیف سیاق و سباق نہیں۔

---

مڈل ویئر: proxy.ts بمقابلہ Middleware.ts

Next.js ایج مڈل ویئر کے لیے middleware.ts (یا middleware.js) استعمال کرتا ہے۔ Next-intl v4 استعمال کرنے والے پروجیکٹ میں، مڈل ویئر سیٹ اپ کا نام اکثر proxy.ts رکھ دیا جاتا ہے اور دوبارہ برآمد کیا جاتا ہے، جس سے ایک اہم خرابی پیدا ہوتی ہے: middleware.ts اور proxy.ts دونوں نہ بنائیں۔ دونوں کا ہونا تعمیراتی غلطی کا سبب بنتا ہے۔

i18n کو auth تحفظ کے ساتھ ملانے کا صحیح نمونہ:

// src/proxy.ts — This IS the Next.js middleware
import createMiddleware from 'next-intl/middleware';
import { NextRequest, NextResponse } from 'next/server';
import { routing } from './i18n/routing';

const intlMiddleware = createMiddleware(routing);

const protectedPaths = ['/dashboard', '/portal'];

export default function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // Check auth for protected paths
  const isProtected = protectedPaths.some((path) =>
    pathname.includes(path)
  );

  if (isProtected) {
    const token = request.cookies.get('ecosire_auth');
    if (!token) {
      const url = request.nextUrl.clone();
      url.pathname = '/auth/login';
      // Prevent open redirect — never allow // prefix
      const redirect = pathname.startsWith('//') ? '/' : pathname;
      url.searchParams.set('redirect', redirect);
      return NextResponse.redirect(url);
    }
  }

  return intlMiddleware(request);
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|.*\\..*).*)'],
};

یہ واحد فائل i18n لوکل کا پتہ لگانے اور توثیق کے تحفظ دونوں کو ہینڈل کرتی ہے۔ config.matcher میں جامد فائلیں، API روٹس، اور Next.js انٹرنل شامل نہیں ہیں۔

---

JSON-LD سٹرکچرڈ ڈیٹا سیکیورٹی

JSON-LD اسکرپٹ ایک عام XSS ویکٹر ہیں۔ اگر آپ کے ڈیٹا میں کلوزنگ اسکرپٹ ٹیگ ہے، تو یہ اسکرپٹ بلاک سے باہر نکل سکتا ہے۔ درست کرنا لازمی ہے - اس سے کم کردار کو انکوڈ کریں:

// components/seo/JsonLd.tsx
interface JsonLdProps {
  data: Record<string, unknown>;
}

export function JsonLd({ data }: JsonLdProps) {
  // Sanitize script tag breakout attempts by encoding '<' as unicode
  const json = JSON.stringify(data).replace(/</g, '\\u003c');

  return (
    <script
      type="application/ld+json"
      // Safe: content is JSON-serialized and sanitized above
      suppressHydrationWarning
      ref={(el) => { if (el) el.textContent = json; }}
    />
  );
}

صفحہ میں استعمال:

<JsonLd
  data={{
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.description,
    inLanguage: locale,
    author: {
      '@type': 'Organization',
      name: 'ECOSIRE',
    },
  }}
/>

inLanguage فیلڈ کثیر لسانی SEO کے لیے ضروری ہے — یہ AI کرالر اور سرچ انجنوں کو بتاتا ہے کہ مواد کس زبان میں ہے، غیر انگریزی سوالات کے لیے درجہ بندی کی درستگی کو بہتر بناتا ہے۔

---

متحرک OG امیجز

Next.js 16 کا ImageResponse API کنارے پر فی صفحہ OG تصاویر تیار کرتا ہے۔ بلاگ پوسٹس کے لیے سیٹ اپ:

// app/api/og/blog/[slug]/route.tsx
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(
  request: Request,
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  const post = await getPostMeta(slug);

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          width: '100%',
          height: '100%',
          background: 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%)',
          padding: '60px',
        }}
      >
        <div style={{ fontSize: 48, fontWeight: 700, color: 'white', lineHeight: 1.2 }}>
          {post.title}
        </div>
        <div style={{ fontSize: 24, color: '#94a3b8', marginTop: 20 }}>
          {post.description}
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

---

مشترکہ نقصانات اور حل

خطرہ 1: کلائنٹ کے اجزاء میں ڈیٹا حاصل کرنا جب سرور کے اجزاء کام کریں گے

اگر کوئی جزو صرف ڈیٹا دکھاتا ہے اور اسے React ریاست یا براؤزر APIs کی ضرورت نہیں ہے، تو اسے سرور کا جزو ہونا چاہیے۔ 'use client' کو شامل کرنا کلائنٹ بنڈل میں درآمد کردہ ہر چیز کو مجبور کرتا ہے۔

پِٹفال 2: async سرور اجزاء کے ارد گرد سسپنس کی حدود غائب ہیں

// Without Suspense — entire page blocks until data loads
export default async function Page() {
  const data = await slowFetch(); // 2 seconds
  return <div>{data}</div>;
}

// With Suspense — page streams, slow part shows skeleton
export default function Page() {
  return (
    <Suspense fallback={<DataSkeleton />}>
      <SlowDataComponent />
    </Suspense>
  );
}

خطرہ 3: کیشڈ فنکشنز میں کوکیز() یا ہیڈر() کا استعمال کرنا

cookies() اور headers() متحرک APIs ہیں جو روٹ کو ڈائنامک رینڈرنگ میں منتخب کرتے ہیں۔ unstable_cache کال بیک کے اندر ان کا استعمال خاموشی سے کیشے کو توڑ دیتا ہے۔

خطرہ 4: Next.js 16 میں پیرامز کا انتظار کرنا بھولنا

Next.js 16 میں، params اب ایک وعدہ ہے۔ await کو بھول جانا رن ٹائم کی خرابیوں کا سبب بنتا ہے:

// Next.js 15 — params was synchronous
export default function Page({ params }: { params: { slug: string } }) {
  const { slug } = params;
}

// Next.js 16 — params is async
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params; // Required
}

---

اکثر پوچھے گئے سوالات

مجھے generateStaticParams() بمقابلہ ڈائنامک رینڈرنگ کب استعمال کرنا چاہیے؟

ایسے مواد کے لیے generateStaticParams() استعمال کریں جو کبھی کبھار تبدیل ہوتا ہے (بلاگ پوسٹس، پروڈکٹ کے صفحات، دستاویزات)۔ یہ صفر رن ٹائم لاگت کے ساتھ تعمیراتی وقت پر جامد HTML تیار کرتا ہے۔ ذاتی مواد، ریئل ٹائم ڈیٹا، یا ہزاروں مختلف حالتوں والے صفحات کے لیے ڈائنامک رینڈرنگ کا استعمال کریں جہاں تعمیر کا وقت ممنوع ہوگا۔ کبھی کبھار تبدیل ہونے والے مواد کے لیے دونوں کو ISR (revalidate) کے ساتھ یکجا کریں۔

میں ایپ راؤٹر میں تصدیق کو کیسے ہینڈل کروں؟

HttpOnly کوکیز میں توثیق ٹوکن اسٹور کریں — کبھی بھی لوکل اسٹوریج یا سیشن اسٹوریج نہیں۔ محفوظ راستوں کے لیے کوکی کی موجودگی کو چیک کرنے کے لیے مڈل ویئر (proxy.ts) کا استعمال کریں۔ سرور اجزاء میں، next/headers سے cookies() کے ساتھ کوکیز پڑھیں۔ صارف کا ڈیٹا سرور سے کلائنٹ تک پرپس یا React سیاق و سباق کے ذریعے منتقل کریں، کبھی بھی کلائنٹ کے اجزاء میں کوکی کو دوبارہ پڑھ کر نہیں۔

loading.tsx اور Suspense میں کیا فرق ہے؟

loading.tsx ایک خاص فائل ہے جسے Next.js خود بخود پورے روٹ سیگمنٹ کے لیے سسپنس باؤنڈری میں لپیٹ دیتا ہے۔ یہ فوری طور پر ظاہر ہوتا ہے جب سیگمنٹ کا async مواد لوڈ ہوتا ہے۔ دستی Suspense حدود آپ کو بہتر کنٹرول فراہم کرتی ہیں — آپ صفحہ کے مختلف حصوں کے لیے مختلف ڈھانچہ دکھا سکتے ہیں۔ دونوں ایک ہی بنیادی رد عمل کا سسپنس طریقہ کار استعمال کرتے ہیں۔

میں سرور اور کلائنٹ کے اجزاء کے درمیان اسٹیٹس کو کیسے بانٹ سکتا ہوں؟

آپ نہیں کر سکتے ہیں — سرور کے اجزاء ایک بار پیش کرتے ہیں اور ان کی کوئی رن ٹائم حالت نہیں ہوتی ہے۔ پرپس کے ذریعے سرور سے کلائنٹ کو ڈیٹا منتقل کریں۔ کلائنٹ سائیڈ اسٹیٹ کے لیے جسے نیویگیشن میں برقرار رہنے کی ضرورت ہے، یو آر ایل سرچ پیرامز (شیئر کرنے کے قابل حالت کے لیے)، زسٹینڈ یا ریڈکس (ایفمیرل اسٹیٹ کے لیے) یا کوکیز (صارف کی ترجیحات کے لیے) استعمال کریں۔ کلائنٹ کے اجزاء کی حالت کو سرور کے اجزاء میں درآمد کرنے کی کوشش نہ کریں۔

میں ترقی کے لیے ٹربوپیک کیسے ترتیب دوں؟

اپنے دیو اسکرپٹ میں --turbo شامل کریں: "dev": "next dev --turbo"۔ ٹربوپیک Next.js 16 کا زنگ پر مبنی بنڈلر ہے جس میں نمایاں طور پر تیز ٹھنڈ شروع ہوتی ہے اور HMR۔ یہ زیادہ تر پروجیکٹس کے لیے پروڈکشن کے لیے تیار ہے لیکن اس میں کچھ ویب پیک پلگ ان کی عدم مطابقت ہے۔ سوئچ کرنے سے پہلے Turbopack مطابقت کی فہرست کے خلاف اپنی مخصوص انحصار کو چیک کریں۔

---

اگلے اقدامات

ایک پروڈکشن Next.js 16 ایپلی کیشن بنانا جو 11 لوکیلز، ہزاروں صفحات، اور انٹرپرائز گریڈ کی کارکردگی کے تقاضوں کو ہینڈل کرتی ہے انجینئرنگ کا ایک اہم کام ہے۔ ECOSIRE کی فرنٹ اینڈ ٹیم نے بالکل اسی طرح بھیج دیا ہے — ایک 249 صفحات پر مشتمل Next.js 16 پلیٹ فارم جس میں کثیر لسانی SEO، متحرک OG امیجز، اور ذیلی سیکنڈ جوابی اوقات ہیں۔

اگر آپ اپنی Next.js ایپلیکیشن کو اسکیل کر رہے ہیں یا آپ کو انٹرپرائز فرنٹ اینڈ انجینئرنگ سپورٹ کی ضرورت ہے تو یہ دیکھنے کے لیے کہ ہم کس طرح مدد کر سکتے ہیں ہماری ڈیولپمنٹ سروسز کو دریافت کریں۔