Dinou docs

1. Components (`dinou`)

`<Link>`

The primary way to navigate between pages with client-side transitions, automatic prefetching, and cache control.

import { Link } from "dinou";

// Absolute path
<Link href="/dashboard">Home</Link>

// Relative path (go deeper)
<Link href="./settings">Settings</Link>

// Relative path (sibling)
<Link href="../profile">Profile</Link>

// With options
<Link href="/volatile-data" fresh prefetch={false}>
  Live Status
</Link>

Prop	Type	Default	Description
href	string	—	Target path. Supports absolute and relative paths.
prefetch	boolean	true	Preload code and data on hover/viewport
fresh	boolean	false	Bypass client-side cache, fetch fresh data
...props	HTMLAnchor	—	Standard anchor attributes (className, target, etc.)

Path Resolution

Dinou resolves paths like a file system:

Absolute: Starts with / (e.g./about)
Relative (Child): No slash or ./ (e.g., team from /about → /about/team)
Relative (Sibling): Starts with ../ (e.g., ../contact from /about/team → /about/contact)

`<ClientRedirect>`

Utility component that triggers immediate client-side navigation when rendered. Recommended to use redirect() helper instead for better server-side handling.

import { ClientRedirect } from "dinou";

// Forces navigation to home
return <ClientRedirect to="/" />;

Use Case

Useful when you need to trigger navigation from within component rendering logic, but redirect() is generally preferred.

2. Hooks & Utilities (`dinou`)

Functions available in both Server and Client environments.

`redirect(destination)`

Stops execution and redirects the user. Works on both server and client (renders <ClientRedirect>).

import { redirect } from "dinou";

// In a Server Component or Server Function
if (!user) {
  return redirect("/login");
}

`useSearchParams()`

Returns a standard URLSearchParams object to read query string parameters.

import { useSearchParams } from "dinou";

export default function SearchPage() {
  const searchParams = useSearchParams();
  const query = searchParams.get("q");
  return <div>Result: {query}</div>;
}

Component Type	Build Behavior	Result
Server Component	Triggers Static Bailout	Switches to Dynamic Rendering (SSR)
Client Component	No Bailout	Remains Static (SSG). Initial HTML has empty params.

⚠️ Hydration Warning

In Client Components on static pages, server renders with empty params (build time). For UI that depends heavily on params, pass them as props from a Server Component.

`usePathname()`

Returns the current URL pathname as a string (e.g., /blog/post-1).

import { usePathname } from "dinou";

export default function Navigation() {
  const pathname = usePathname();
  return <div>Current path: {pathname}</div>;
}

`useRouter()` (Client Only)

Provides programmatic navigation methods inside Client Components.

"use client";
import { useRouter } from "dinou";

export default function Controls() {
  const router = useRouter();

  return (
    <div>
      <button onClick={() => router.push("/home")}>Push</button>
      <button onClick={() => router.replace("/home")}>Replace</button>
      <button onClick={() => router.back()}>Back</button>
      <button onClick={() => router.forward()}>Forward</button>
      <button onClick={() => router.refresh()}>Refresh Data</button>
    </div>
  );
}

Method	Description
push(href)	Navigates to new URL (adds to history)
replace(href)	Replaces current URL in history
back()	Goes back in history
forward()	Goes forward in history
refresh()	Soft reload: refetches server data without browser refresh

`useNavigationLoading()` (Client Only)

Returns a boolean indicating if a client-side navigation is in progress.

"use client";
import { useNavigationLoading } from "dinou";

export default function Header() {
  const isLoading = useNavigationLoading();
  return (
    <header>
      {isLoading && <div className="loading-bar" />}
      <nav>...</nav>
    </header>
  );
}

3. Server-Only Utilities (`dinou`)

`getContext()`

Retrieves the request/response context. Server Components Only.

import { getContext } from "dinou";

export default async function Profile() {
  const ctx = getContext();
  // Access request data
  const token = ctx.req.cookies.session_token;
  const userAgent = ctx.req.headers["user-agent"];
  
  // Set response headers
  ctx.res.setHeader("Cache-Control", "public, max-age=3600");
  
  return <div>...</div>;
}

Request Object

headers, cookies, query,

path, method

Response Object

status(), setHeader(), redirect(),

cookie(), clearCookie()

⚠️ Security Warning: `getContext` in Client Components

While technically available in Client Components during SSR, never use it directly. Any data read gets serialized into public HTML. Fetch sensitive data in Server Components and pass safe props to Client Components.

"use client";
import { getContext } from "dinou";

// ❌ DANGEROUS PATTERN - Data leaks to HTML!
export default function UserProfile() {
  const ctx = getContext(); // Runs on server during SSR
  return <div>{ctx.req.headers["authorization"]}</div>;
  // ⚠️ The sensitive header is now visible in page source!
}

// ✅ CORRECT PATTERN
// Fetch in Server Component, pass safe props
export default function Page() {
  const ctx = getContext();
  const safeUser = { name: ctx.req.cookies.username };
  return <ClientProfile user={safeUser} />;
}

📚 API Reference: Components & Utilities

1. Components (dinou)

<Link>

Path Resolution

<ClientRedirect>

2. Hooks & Utilities (dinou)

redirect(destination)

useSearchParams()