Navegación

// Navegación declarativa
import Link from "next/link";
<Link href="/dashboard">Dashboard</Link>
 
// Navegación programática (Client Component)
"use client";
import { useRouter } from "next/navigation";
const router = useRouter();
router.push("/dashboard");
 
// Lee la URL actual (Client Component)
import { usePathname, useSearchParams } from "next/navigation";
const pathname = usePathname();        // "/dashboard"
const searchParams = useSearchParams(); // URLSearchParams instance
 
// Redirect en el servidor (Server Component o Server Action)
import { redirect } from "next/navigation";
redirect("/login");

// components/nav-bar.tsx - Navegación con resaltado de link activo
"use client";
 
import Link from "next/link";
import { usePathname } from "next/navigation";
 
const links = [
  { href: "/", label: "Home" },
  { href: "/dashboard", label: "Dashboard" },
  { href: "/settings", label: "Settings" },
];
 
export function NavBar() {
  const pathname = usePathname();
 
  return (
    <nav className="flex gap-4 border-b px-6 py-3">
      {links.map((link) => (
        <Link
          key={link.href}
          href={link.href}
          className={
            pathname === link.href
              ? "font-bold text-blue-600"
              : "text-gray-600 hover:text-gray-900"
          }
        >
          {link.label}
        </Link>
      ))}
    </nav>
  );
}

// components/search-filter.tsx - Parámetros de búsqueda para filtrar
"use client";
 
import { useSearchParams, usePathname, useRouter } from "next/navigation";
import { useCallback } from "react";
 
export function SearchFilter() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
 
  const currentQuery = searchParams.get("q") ?? "";
  const currentSort = searchParams.get("sort") ?? "newest";
 
  const updateParams = useCallback(
    (key: string, value: string) => {
      const params = new URLSearchParams(searchParams.toString());
      if (value) {
        params.set(key, value);
      } else {
        params.delete(key);
      }
      router.push(`${pathname}?${params.toString()}`);
    },
    [searchParams, pathname, router]
  );
 
  return (
    <div className="flex gap-4">
      <input
        type="text"
        placeholder="Search..."
        defaultValue={currentQuery}
        onChange={(e) => updateParams("q", e.target.value)}
        className="rounded border px-3 py-2"
      />
      <select
        value={currentSort}
        onChange={(e) => updateParams("sort", e.target.value)}
        className="rounded border px-3 py-2"
      >
        <option value="newest">Newest</option>
        <option value="oldest">Oldest</option>
        <option value="popular">Popular</option>
      </select>
    </div>
  );
}

// app/login/page.tsx - Redirect en el servidor después de verificar auth
import { redirect } from "next/navigation";
import { auth } from "@/lib/auth";
 
export default async function LoginPage() {
  const session = await auth();
  if (session) redirect("/dashboard");
 
  return (
    <form action="/api/auth/login" method="POST">
      <input name="email" type="email" placeholder="Email" />
      <input name="password" type="password" placeholder="Password" />
      <button type="submit">Log In</button>
    </form>
  );
}

// Navegación programática después de enviar un formulario
"use client";
 
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
 
export function CreatePostForm() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [title, setTitle] = useState("");
 
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const res = await fetch("/api/posts", {
      method: "POST",
      body: JSON.stringify({ title }),
      headers: { "Content-Type": "application/json" },
    });
    const post = await res.json();
 
    startTransition(() => {
      router.push(`/blog/${post.slug}`);
      router.refresh(); // Revalida datos del servidor
    });
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Post title"
        className="rounded border px-3 py-2"
      />
      <button
        type="submit"
        disabled={isPending}
        className="ml-2 rounded bg-blue-600 px-4 py-2 text-white"
      >
        {isPending ? "Creating..." : "Create"}
      </button>
    </form>
  );
}

// Link con href dinámico y control de prefetch
import Link from "next/link";
 
// Desactiva prefetch para links raramente visitados
<Link href="/terms" prefetch={false}>Terms</Link>
 
// href dinámico con template literal
<Link href={`/blog/${slug}`}>Read More</Link>
 
// Link con replace (sin nueva entrada de historial)
<Link href="/dashboard" replace>Dashboard</Link>
 
// Link con scroll={false} para preservar posición de scroll
<Link href="/dashboard?tab=settings" scroll={false}>Settings Tab</Link>

// permanentRedirect - redirect 308
import { permanentRedirect } from "next/navigation";
 
export default async function OldPage() {
  permanentRedirect("/new-page");
}

// redirect en Server Actions
"use server";
 
import { redirect } from "next/navigation";
 
export async function createPost(formData: FormData) {
  const post = await db.post.create({
    data: { title: formData.get("title") as string },
  });
  redirect(`/blog/${post.slug}`);
}

// useSelectedLayoutSegment - lee segmento hijo activo
"use client";
 
import { useSelectedLayoutSegment } from "next/navigation";
 
export function TabNav() {
  const segment = useSelectedLayoutSegment();
  // En /dashboard/analytics → segment = "analytics"
  // En /dashboard → segment = null
 
  return (
    <nav>
      <Link
        href="/dashboard"
        className={segment === null ? "font-bold" : ""}
      >
        Overview
      </Link>
      <Link
        href="/dashboard/analytics"
        className={segment === "analytics" ? "font-bold" : ""}
      >
        Analytics
      </Link>
    </nav>
  );
}

// Link component props
import type { LinkProps } from "next/link";
// Props principales: href (string o UrlObject), replace, scroll, prefetch
 
// useRouter return type
import { useRouter } from "next/navigation";
// router.push(href: string, options?: { scroll?: boolean }): void
// router.replace(href: string, options?: { scroll?: boolean }): void
// router.refresh(): void
// router.back(): void
// router.forward(): void
// router.prefetch(href: string): void
 
// redirect function signature
import { redirect, permanentRedirect, RedirectType } from "next/navigation";
// redirect(url: string, type?: RedirectType): never
// permanentRedirect(url: string, type?: RedirectType): never
 
// URL object para hrefs complejos
<Link
  href={{
    pathname: "/blog/[slug]",
    query: { slug: "hello-world" },
  }}
>
  Read Post
</Link>

// Production example: Constructor centralizado de URLs
// File: src/lib/url-builder.ts
import { generateSlug } from './slug-utils';
 
export function buildServiceUrlFromSlug(slug: string): string {
  return `/services/${slug}`;
}
 
export function buildSectionUrl(serviceSlug: string, sectionId: string): string {
  const cleanSectionId = stripServicePrefix(sectionId, serviceSlug);
  return `/services/${serviceSlug}/${cleanSectionId}`;
}
 
export function buildPointUrl(
  serviceSlug: string,
  sectionId: string,
  pointSlug: string
): string {
  const cleanSectionId = stripServicePrefix(sectionId, serviceSlug);
  const cleanPointSlug = stripSectionPrefix(pointSlug, sectionId);
  return `/services/${serviceSlug}/${cleanSectionId}/pt/${cleanPointSlug}`;
}
 
export function buildPointTabUrl(
  serviceSlug: string,
  sectionId: string,
  pointSlug: string,
  tabSlug: string | null
): string {
  const baseUrl = buildPointUrl(serviceSlug, sectionId, pointSlug);
  if (tabSlug === null) return baseUrl;
  return `${baseUrl}/${tabSlug}`;
}
 
export function parseServiceUrl(url: string): string | null {
  const match = url.match(/^\/services\/([^\/]+)\/?$/);
  return match ? match[1] : null;
}