Parallel & Intercepting Routes

app/
  dashboard/
    layout.tsx          → Consumes @analytics and @team props
    page.tsx            → The core dashboard page view
    @analytics/
      page.tsx          → Rendered in the analytics slot
      loading.tsx       → Analytics skeleton loader
    @team/
      page.tsx          → Rendered in the team slot

// app/dashboard/layout.tsx
import React from "react";

interface LayoutProps {
  children: React.ReactNode;
  analytics: React.ReactNode; // Slot prop
  team: React.ReactNode;      // Slot prop
}

export default function DashboardLayout({ children, analytics, team }: LayoutProps) {
  return (
    <div className="flex flex-col gap-6">
      <header className="p-4 bg-slate-900 text-white rounded-xl">Dashboard Header</header>
      <main className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <section className="md:col-span-1">{children}</section>
        <section className="md:col-span-1 border rounded-xl p-4 bg-white">{analytics}</section>
        <section className="md:col-span-1 border rounded-xl p-4 bg-white">{team}</section>
      </main>
    </div>
  );
}

app/
  page.tsx              → Main Feed (Lists photo cards)
  photo/
    [id]/
      page.tsx          → Full Photo Detail Page (Served on direct URL load)
  @modal/
    default.tsx         → Returns null (initial load fallback)
    (.)photo/
      [id]/
        page.tsx        → The modal overlay component (Loads on feed click)

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const token = request.cookies.get("session")?.value;
  const { pathname } = request.nextUrl;

  // Protect dashboard routes
  if (pathname.startsWith("/dashboard") && !token) {
    // Redirect unauthenticated user to login
    return NextResponse.redirect(new URL("/login", request.url));
  }

  return NextResponse.next();
}

// Config to select only matching paths (speeds up application assets loads)
export const config = {
  matcher: ["/dashboard/:path*", "/admin/:path*"]
};

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // 1. Content Security Policy (CSP)
  response.headers.set(
    "Content-Security-Policy",
    "default-src 'self'; script-src 'self' 'unsafe-inline' https://apis.google.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;"
  );

  // 2. Strict Transport Security (HSTS)
  response.headers.set(
    "Strict-Transport-Security",
    "max-age=63072000; includeSubDomains; preload"
  );

  // 3. X-Frame-Options (Clickjacking protection)
  response.headers.set("X-Frame-Options", "DENY");

  // 4. Referrer Policy
  response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");

  return response;
}