Next.js Integration

UrduMagic works seamlessly with Next.js App Router and Pages Router, supporting both Client-Side Magic Mode and Server-Side Rendering (SSR).

1. Client-Side Magic Mode (App Router)

To enable automatic whole-page DOM translation with a floating toggle button, initialize UrduMagic inside a Client Component:

Create `UrduMagicInit.tsx`

tsx

'use client';

import { useEffect } from 'react';
import { UrduMagic } from 'urdumagic';

export function UrduMagicInit() {
  useEffect(() => {
    const instance = UrduMagic.init({
      defaultLang: 'en',
      modes: ['en', 'ur', 'roman'],
      showSwitcher: true, // Injects floating toggle button
    });

    return () => instance.destroy();
  }, []);

  return null;
}

Add to Root Layout (`app/layout.tsx`)

tsx

import { UrduMagicInit } from '@/components/UrduMagicInit';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <UrduMagicInit />
      </body>
    </html>
  );
}

2. Server-Side Rendering (SSR) & Server Components

For pre-rendering translated HTML on the server or translating API responses before sending to the client, use renderToString from urdumagic/server:

tsx

import { renderToString } from 'urdumagic/server';

export default async function BlogPostPage({ params }: { params: { slug: string; lang?: string } }) {
  const { lang = 'ur' } = params;
  const post = await getBlogPost(params.slug);

  // Translates raw HTML on the server and applies dir="rtl"
  const translatedHtml = await renderToString(post.contentHtml, lang as 'ur' | 'roman' | 'en');

  return (
    <article className="prose max-w-2xl mx-auto p-6">
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: translatedHtml }} />
    </article>
  );
}

3. Static Params Generation (SSG)

You can generate localized static pages at build time:

import { generateUrduParams } from 'urdumagic/next';

export async function generateStaticParams() {
  return generateUrduParams(); // Returns [{ lang: 'en' }, { lang: 'ur' }, { lang: 'roman' }]
}