Parallel e Intercepting Routes en Next.js

Parallel e Intercepting Routes en Next.js | Nicolás Garzón

TypeScript

// app/dashboard/layout.tsx
import type { ReactNode } from "react";

type DashboardLayoutProps = {
  children: ReactNode;
  analytics: ReactNode;
  activity: ReactNode;
};

export default function DashboardLayout({
  children,
  analytics,
  activity,
}: DashboardLayoutProps) {
  return (
    <div className="dashboard">
      <main>{children}</main>
      <aside aria-label="Analítica">{analytics}</aside>
      <section aria-label="Actividad reciente">{activity}</section>
    </div>
  );
}

TypeScript

"use client";

import { useSelectedLayoutSegment } from "next/navigation";

export function AnalyticsTabs() {
  const segment = useSelectedLayoutSegment("analytics");

  return (
    <nav aria-label="Vistas de analítica">
      <Tab active={segment === null} href="/dashboard">Resumen</Tab>
      <Tab active={segment === "monthly"} href="/dashboard/monthly">
        Mensual
      </Tab>
    </nav>
  );
}

TypeScript

// app/photos/[photoId]/page.tsx
export default async function PhotoPage({
  params,
}: PageProps<"/photos/[photoId]">) {
  const { photoId } = await params;
  const photo = await getPhoto(photoId);

  if (!photo) notFound();

  return <FullPhotoPage photo={photo} />;
}

TypeScript

// page inside @modal intercepting branch
export default async function PhotoModalPage({
  params,
}: PageProps<"/photos/[photoId]">) {
  const { photoId } = await params;
  const photo = await getPhoto(photoId);

  if (!photo) notFound();

  return <PhotoModal photo={photo} />;
}

TypeScript

"use client";

import { useRouter } from "next/navigation";
import { useEffect, useRef } from "react";

export function PhotoModal({ photo }: { photo: Photo }) {
  const router = useRouter();
  const closeButtonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    closeButtonRef.current?.focus();
  }, []);

  function close() {
    router.back();
  }

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="photo-modal-title"
      onKeyDown={(event) => {
        if (event.key === "Escape") close();
      }}
    >
      <h1 id="photo-modal-title">{photo.title}</h1>
      <button ref={closeButtonRef} type="button" onClick={close}>
        Cerrar
      </button>
      <PhotoContent photo={photo} />
    </div>
  );
}

TypeScript

async function requireAccessiblePhoto(photoId: string, userId: string) {
  const photo = await repository.findAccessible({ photoId, userId });
  if (!photo) notFound();
  return photo;
}