Navigation

import { PageAbout } from "@/routes";

// Using declarative route
<PageAbout.Link>About Us</PageAbout.Link>

// Using Link component
import { Link } from "@/i18n/navigation";
<Link href={PageAbout()}>About Us</Link>

import { PageUserId } from "@/routes";

<PageUserId.Link id={user.id}>View Profile</PageUserId.Link>

import { PageSearch } from "@/routes";

<PageSearch.Link search={{ q: "hello", page: 1 }}>
  Search Results
</PageSearch.Link>

import Link from "next/link";

<Link href="https://example.com" target="_blank" rel="noopener">
  External Link
</Link>

"use client";

import { useRouter } from "@/i18n/navigation";
import { PageDashboard, PageUserId } from "@/routes";

export function NavigationExample() {
  const router = useRouter();

  const handleNavigate = () => {
    // Navigate to a route - locale is automatically applied
    router.push(PageDashboard());
    
    // With params
    router.push(PageUserId({ id: "123" }));
    
    // Replace instead of push
    router.replace(PageHome());
  };

  return <Button onClick={handleNavigate}>Go to Dashboard</Button>;
}

import { redirect } from "@/i18n/navigation";
import { PageLogin } from "@/routes";
import { getAuth } from "@/lib/auth/server";

export default async function ProtectedPage() {
  const auth = await getAuth();

  if (!auth) {
    redirect(PageLogin()); // Locale automatically applied
  }

  return <div>Protected content</div>;
}

"use server";

import { redirect } from "@/i18n/navigation";
import { PageDashboard } from "@/routes";

export async function createProject(data: FormData) {
  const project = await db.projects.create(/* ... */);
  redirect(PageDashboard());
}

// Server: tRPC procedure
login: publicProcedure
  .input(loginSchema)
  .mutation(async ({ ctx, input }) => {
    const result = await signIn(input);

    return {
      success: true,
      payload: {
        redirectUrl: PageDashboard(), // Return URL
      },
    };
  }),

// Client: Handle redirect
const mutation = api.auth.login.useMutation({
  onSuccess: (data) => {
    if (data.payload?.redirectUrl) {
      router.push(data.payload.redirectUrl);
    }
  },
});

"use client";

import { usePathname } from "@/i18n/navigation";

export function NavigationItem() {
  const pathname = usePathname();
  // Returns: /en/dashboard (includes locale)

  const isActive = pathname === PageDashboard();

  return (
    <Link 
      href={PageDashboard()} 
      className={isActive ? "active" : ""}
    >
      Dashboard
    </Link>
  );
}

import { usePathnameWithoutLocale } from "@/routes/hooks";

const pathname = usePathnameWithoutLocale();
// URL: /en/dashboard → pathname: /dashboard

import { navUtils } from "@/lib/utils/navigation-utils";
import { usePathname } from "@/i18n/navigation";

const pathname = usePathname();
const isActive = navUtils.pathMatches(pathname, PageDashboard);

export const routingConfig = {
  Header: (role?: UserRole | null) => [
    { route: PageHome },
    { route: PageAbout },
    { route: PagePricing, group: "product" },
  ],
};

Dashboard: (pathname: string): SidebarMenuGroup[] => [
  {
    groupLabel: "",
    menus: [
      {
        ...routeMenu(PageDashboard, { activePathname: pathname }),
        submenus: [],
      },
    ],
  },
  {
    groupLabel: "content",
    menus: [
      {
        ...routeMenu(PageDashboardProjects, { activePathname: pathname }),
        submenus: [],
      },
    ],
  },
],

Footer: (t) => [
  // Column 1
  [
    { page: PageHome },
    { page: PageAbout },
  ],
  // Column 2
  [
    { page: PagePrivacyPolicy },
    { page: PageTerms },
  ],
],

import { PageHome, PageDashboard } from "@/routes";

export const Icons: () => Record<string, IconKey> = () => ({
  [PageHome.routeName]: "home",
  [PageDashboard.routeName]: "dashboard",
  [PageDashboardApiKeys.routeName]: "key",
});

import { getPageIcon } from "@/routes/routing";

const icon = getPageIcon(PageDashboard); // Returns "dashboard"

import { Icon } from "@/components/ui/icon";
import { getPageIcon } from "@/routes/routing";

<Icon iconKey={getPageIcon(PageDashboard)} />

// src/messages/dictionaries/en/menu.json
{
  "links": {
    "PageHome": "Home",
    "PageDashboard": "Dashboard",
    "PageDashboardApiKeys": "API Keys"
  },
  "groups": {
    "content": "Content",
    "settings": "Settings"
  }
}

import { useTranslations } from "next-intl";

const t = useTranslations("menu");

// Get page name
const pageName = t(`links.${PageDashboard.routeName}`);

// Get group name
const groupName = t("groups.content");

"use client";

import { usePathname } from "@/i18n/navigation";
import { PageDashboard } from "@/routes";
import { cn } from "@/lib/utils";

export function NavItem() {
  const pathname = usePathname();
  const isActive = pathname === PageDashboard();

  return (
    <PageDashboard.Link
      className={cn(
        "nav-link",
        isActive && "nav-link-active"
      )}
    >
      Dashboard
    </PageDashboard.Link>
  );
}

import { extractParamsFromRoute } from "@/routes/makeRoute";

const params = extractParamsFromRoute(pathname, PageUserId);
const isActive = !!params?.id;

"use client";

import { useRouter } from "@/i18n/navigation";
import { PageDashboard } from "@/routes";

export function CreateForm() {
  const router = useRouter();
  const mutation = api.projects.create.useMutation({
    onSuccess: () => {
      router.push(PageDashboard());
    },
  });

  return <form onSubmit={mutation.mutate}>...</form>;
}

const handleClick = () => {
  if (user.isAdmin) {
    router.push(PageAdmin());
  } else {
    router.push(PageDashboard());
  }
};

router.push(PageSearch({}, { q: searchQuery, page: 1 }));

// ✅ Good
<PageDashboard.Link>Dashboard</PageDashboard.Link>

// ❌ Bad
<Link href="/dashboard">Dashboard</Link>

const handleNavigate = () => {
  try {
    router.push(PageDashboard());
  } catch (error) {
    console.error("Navigation failed", error);
  }
};

useEffect(() => {
  router.prefetch(PageDashboard());
}, [router]);

// Use replace to avoid adding to history
router.replace(PageLogin());