URL State Management

Search Parameters

Next.js search parameters are used for shareable state like filters, pagination, and step navigation.

Implementation:

// Server Component - Read search params
export default async function Page({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {
  const step = searchParams?.step || "1";
  const page = searchParams?.page || "1";
  
  return <MyComponent initialStep={step} initialPage={page} />;
}

// Client Component - Update search params
'use client';
import { useSearchParams, useRouter } from 'next/navigation';

export function MyComponent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  
  const updateStep = (step: string) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set('step', step);
    router.push(`?${params.toString()}`);
  };
  
  const currentStep = searchParams.get('step') || '1';
  
  return (
    <div>
      <button onClick={() => updateStep('2')}>Go to Step 2</button>
    </div>
  );
}

Table State in URL

Location: src/components/tables/common/parseTableStateFromURL.ts

Pattern:

// Parse table state from URL
export function parseTableStateFromServerSearchParams(
  searchParams: { [key: string]: string | string[] | undefined }
): TableState {
  return {
    columnFilters: parseFilters(searchParams.filters),
    sorting: parseSorting(searchParams.sort),
    pagination: {
      pageIndex: Number(searchParams.page) || 0,
      pageSize: Number(searchParams.pageSize) || 10,
    },
  };
}

// Generate URL from table state
export function generateTableURL(tableState: TableState): string {
  const params = new URLSearchParams();
  params.set('page', String(tableState.pagination.pageIndex));
  params.set('pageSize', String(tableState.pagination.pageSize));
  if (tableState.sorting.length > 0) {
    params.set('sort', JSON.stringify(tableState.sorting));
  }
  return params.toString();
}

Key Features:

• ✅ Shareable URLs - Users can share filtered/sorted table views
• ✅ Browser navigation - Back/forward buttons work
• ✅ Bookmarkable - State persists in URL
• ✅ Server-side parsing - Server Components can read initial state