npm - @jgamaraalv/ts-dev-kit - Versions diffs - 1.0.0 - Mend

@jgamaraalv/ts-dev-kit 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/.claude-plugin/marketplace.json +24 -0
package/.claude-plugin/plugin.json +24 -0
package/CHANGELOG.md +24 -0
package/LICENSE +21 -0
package/README.md +128 -0
package/agents/accessibility-pro.md +139 -0
package/agents/api-builder.md +110 -0
package/agents/code-reviewer.md +190 -0
package/agents/database-expert.md +138 -0
package/agents/debugger.md +241 -0
package/agents/docker-expert.md +51 -0
package/agents/multi-agent-coordinator.md +378 -0
package/agents/nextjs-expert.md +136 -0
package/agents/performance-engineer.md +138 -0
package/agents/playwright-expert.md +126 -0
package/agents/react-specialist.md +97 -0
package/agents/security-scanner.md +105 -0
package/agents/test-generator.md +221 -0
package/agents/typescript-pro.md +253 -0
package/agents/ux-optimizer.md +93 -0
package/docs/rules/orchestration.md.template +126 -0
package/package.json +28 -0
package/skills/bullmq/SKILL.md +225 -0
package/skills/bullmq/references/flows-and-schedulers.md +186 -0
package/skills/bullmq/references/job-types-and-options.md +163 -0
package/skills/bullmq/references/patterns.md +273 -0
package/skills/bullmq/references/production.md +308 -0
package/skills/composition-patterns/SKILL.md +58 -0
package/skills/composition-patterns/references/architecture-avoid-boolean-props.md +87 -0
package/skills/composition-patterns/references/architecture-compound-components.md +107 -0
package/skills/composition-patterns/references/patterns-children-over-render-props.md +77 -0
package/skills/composition-patterns/references/patterns-explicit-variants.md +87 -0
package/skills/composition-patterns/references/react19-no-forwardref.md +37 -0
package/skills/composition-patterns/references/state-context-interface.md +194 -0
package/skills/composition-patterns/references/state-decouple-implementation.md +96 -0
package/skills/composition-patterns/references/state-lift-state.md +126 -0
package/skills/conventional-commits/SKILL.md +148 -0
package/skills/docker/SKILL.md +55 -0
package/skills/docker/references/compose-configs.md +95 -0
package/skills/docker/references/monorepo-dockerfile.md +111 -0
package/skills/drizzle-pg/SKILL.md +202 -0
package/skills/drizzle-pg/references/advanced.md +299 -0
package/skills/drizzle-pg/references/migrations.md +214 -0
package/skills/drizzle-pg/references/queries.md +321 -0
package/skills/drizzle-pg/references/relations.md +272 -0
package/skills/drizzle-pg/references/schema-pg.md +256 -0
package/skills/drizzle-pg/references/sql-operator.md +215 -0
package/skills/fastify-best-practices/SKILL.md +143 -0
package/skills/fastify-best-practices/references/hooks-and-lifecycle.md +122 -0
package/skills/fastify-best-practices/references/plugins-and-encapsulation.md +137 -0
package/skills/fastify-best-practices/references/request-reply-errors.md +189 -0
package/skills/fastify-best-practices/references/routes-and-handlers.md +134 -0
package/skills/fastify-best-practices/references/server-and-options.md +127 -0
package/skills/fastify-best-practices/references/typescript-and-logging.md +223 -0
package/skills/fastify-best-practices/references/validation-and-serialization.md +190 -0
package/skills/ioredis/SKILL.md +51 -0
package/skills/ioredis/references/advanced-patterns.md +312 -0
package/skills/ioredis/references/cluster-sentinel.md +280 -0
package/skills/ioredis/references/connection-options.md +187 -0
package/skills/ioredis/references/core-api.md +179 -0
package/skills/nextjs-best-practices/SKILL.md +194 -0
package/skills/nextjs-best-practices/references/async-patterns.md +84 -0
package/skills/nextjs-best-practices/references/bundling.md +192 -0
package/skills/nextjs-best-practices/references/data-patterns.md +310 -0
package/skills/nextjs-best-practices/references/debug-tricks.md +127 -0
package/skills/nextjs-best-practices/references/directives.md +74 -0
package/skills/nextjs-best-practices/references/error-handling.md +237 -0
package/skills/nextjs-best-practices/references/file-conventions.md +152 -0
package/skills/nextjs-best-practices/references/font.md +175 -0
package/skills/nextjs-best-practices/references/functions.md +116 -0
package/skills/nextjs-best-practices/references/hydration-error.md +86 -0
package/skills/nextjs-best-practices/references/image.md +184 -0
package/skills/nextjs-best-practices/references/metadata.md +305 -0
package/skills/nextjs-best-practices/references/parallel-routes.md +299 -0
package/skills/nextjs-best-practices/references/route-handlers.md +154 -0
package/skills/nextjs-best-practices/references/rsc-boundaries.md +168 -0
package/skills/nextjs-best-practices/references/runtime-selection.md +40 -0
package/skills/nextjs-best-practices/references/scripts.md +148 -0
package/skills/nextjs-best-practices/references/self-hosting.md +210 -0
package/skills/nextjs-best-practices/references/suspense-boundaries.md +67 -0
package/skills/owasp-security-review/SKILL.md +98 -0
package/skills/owasp-security-review/references/a01-broken-access-control.md +78 -0
package/skills/owasp-security-review/references/a02-security-misconfiguration.md +81 -0
package/skills/owasp-security-review/references/a03-supply-chain-failures.md +65 -0
package/skills/owasp-security-review/references/a04-cryptographic-failures.md +82 -0
package/skills/owasp-security-review/references/a05-injection.md +106 -0
package/skills/owasp-security-review/references/a06-insecure-design.md +76 -0
package/skills/owasp-security-review/references/a07-authentication-failures.md +83 -0
package/skills/owasp-security-review/references/a08-integrity-failures.md +72 -0
package/skills/owasp-security-review/references/a09-logging-alerting-failures.md +76 -0
package/skills/owasp-security-review/references/a10-exceptional-conditions.md +131 -0
package/skills/postgresql/SKILL.md +50 -0
package/skills/postgresql/references/ddl-schema.md +300 -0
package/skills/postgresql/references/indexes.md +257 -0
package/skills/postgresql/references/jsonb.md +261 -0
package/skills/postgresql/references/performance.md +291 -0
package/skills/postgresql/references/psql-cli.md +153 -0
package/skills/postgresql/references/queries.md +287 -0
package/skills/postgresql/references/transactions.md +280 -0
package/skills/react-best-practices/SKILL.md +110 -0
package/skills/react-best-practices/references/advanced-patterns.md +91 -0
package/skills/react-best-practices/references/async-patterns.md +233 -0
package/skills/react-best-practices/references/bundle-optimization.md +201 -0
package/skills/react-best-practices/references/client-patterns.md +178 -0
package/skills/react-best-practices/references/js-performance.md +210 -0
package/skills/react-best-practices/references/rendering-performance.md +209 -0
package/skills/react-best-practices/references/rerender-optimization.md +316 -0
package/skills/react-best-practices/references/server-performance.md +274 -0
package/skills/service-worker/SKILL.md +195 -0
package/skills/service-worker/references/api-reference.md +114 -0
package/skills/service-worker/references/caching-strategies.md +202 -0
package/skills/service-worker/references/push-and-sync.md +261 -0
package/skills/typescript-conventions/SKILL.md +51 -0
package/skills/ui-ux-guidelines/SKILL.md +105 -0
package/skills/ui-ux-guidelines/references/accessibility-and-interaction.md +74 -0
package/skills/ui-ux-guidelines/references/forms-content-checklist.md +126 -0
package/skills/ui-ux-guidelines/references/layout-typography-animation.md +95 -0

package/skills/nextjs-best-practices/references/error-handling.md ADDED Viewed

@@ -0,0 +1,237 @@
+# Error Handling
+Handle errors gracefully in Next.js applications.
+Reference: https://nextjs.org/docs/app/getting-started/error-handling
+## Table of Contents
+- [Error Boundaries](#error-boundaries)
+- [Server Actions: Navigation API Gotcha](#server-actions-navigation-api-gotcha)
+- [Redirects](#redirects)
+- [Auth Errors](#auth-errors)
+- [Not Found](#not-found)
+- [Error Hierarchy](#error-hierarchy)
+## Error Boundaries
+### `error.tsx`
+Catches errors in a route segment and its children:
+```tsx
+"use client";
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  );
+}
+```
+**Important:** `error.tsx` must be a Client Component.
+### `global-error.tsx`
+Catches errors in root layout:
+```tsx
+"use client";
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}
+```
+**Important:** Must include `<html>` and `<body>` tags.
+## Server Actions: Navigation API Gotcha
+**Do NOT wrap navigation APIs in try-catch.** They throw special errors that Next.js handles internally.
+Reference: https://nextjs.org/docs/app/api-reference/functions/redirect#behavior
+```tsx
+'use server'
+import { redirect } from 'next/navigation'
+import { notFound } from 'next/navigation'
+// Bad: try-catch catches the navigation "error"
+async function createPost(formData: FormData) {
+  try {
+    const post = await db.post.create({ ... })
+    redirect(`/posts/${post.id}`)  // This throws!
+  } catch (error) {
+    // redirect() throw is caught here - navigation fails!
+    return { error: 'Failed to create post' }
+  }
+}
+// Good: Call navigation APIs outside try-catch
+async function createPost(formData: FormData) {
+  let post
+  try {
+    post = await db.post.create({ ... })
+  } catch (error) {
+    return { error: 'Failed to create post' }
+  }
+  redirect(`/posts/${post.id}`)  // Outside try-catch
+}
+// Good: Re-throw navigation errors
+async function createPost(formData: FormData) {
+  try {
+    const post = await db.post.create({ ... })
+    redirect(`/posts/${post.id}`)
+  } catch (error) {
+    if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
+      throw error  // Re-throw navigation errors
+    }
+    return { error: 'Failed to create post' }
+  }
+}
+```
+Same applies to:
+- `redirect()` - 307 temporary redirect
+- `permanentRedirect()` - 308 permanent redirect
+- `notFound()` - 404 not found
+- `forbidden()` - 403 forbidden
+- `unauthorized()` - 401 unauthorized
+Use `unstable_rethrow()` to re-throw these errors in catch blocks:
+```tsx
+import { unstable_rethrow } from "next/navigation";
+async function action() {
+  try {
+    // ...
+    redirect("/success");
+  } catch (error) {
+    unstable_rethrow(error); // Re-throws Next.js internal errors
+    return { error: "Something went wrong" };
+  }
+}
+```
+## Redirects
+```tsx
+import { redirect, permanentRedirect } from "next/navigation";
+// 307 Temporary - use for most cases
+redirect("/new-path");
+// 308 Permanent - use for URL migrations (cached by browsers)
+permanentRedirect("/new-url");
+```
+## Auth Errors
+Trigger auth-related error pages:
+```tsx
+import { forbidden, unauthorized } from "next/navigation";
+async function Page() {
+  const session = await getSession();
+  if (!session) {
+    unauthorized(); // Renders unauthorized.tsx (401)
+  }
+  if (!session.hasAccess) {
+    forbidden(); // Renders forbidden.tsx (403)
+  }
+  return <Dashboard />;
+}
+```
+Create corresponding error pages:
+```tsx
+// app/forbidden.tsx
+export default function Forbidden() {
+  return <div>You don't have access to this resource</div>;
+}
+// app/unauthorized.tsx
+export default function Unauthorized() {
+  return <div>Please log in to continue</div>;
+}
+```
+## Not Found
+### `not-found.tsx`
+Custom 404 page for a route segment:
+```tsx
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find the requested resource</p>
+    </div>
+  );
+}
+```
+### Triggering Not Found
+```tsx
+import { notFound } from "next/navigation";
+export default async function Page({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const post = await getPost(id);
+  if (!post) {
+    notFound(); // Renders closest not-found.tsx
+  }
+  return <div>{post.title}</div>;
+}
+```
+## Error Hierarchy
+Errors bubble up to the nearest error boundary:
+```
+app/
+├── error.tsx           # Catches errors from all children
+├── blog/
+│   ├── error.tsx       # Catches errors in /blog/*
+│   └── [slug]/
+│       ├── error.tsx   # Catches errors in /blog/[slug]
+│       └── page.tsx
+└── layout.tsx          # Errors here go to global-error.tsx
+```

package/skills/nextjs-best-practices/references/file-conventions.md ADDED Viewed

@@ -0,0 +1,152 @@
+# File Conventions
+Next.js App Router uses file-based routing with special file conventions.
+## Table of Contents
+- [Project Structure](#project-structure)
+- [Special Files](#special-files)
+- [Route Segments](#route-segments)
+- [Parallel Routes](#parallel-routes)
+- [Intercepting Routes](#intercepting-routes)
+- [Private Folders](#private-folders)
+- [Middleware / Proxy](#middleware--proxy)
+- [File Conventions Reference](#file-conventions-reference)
+## Project Structure
+Reference: https://nextjs.org/docs/app/getting-started/project-structure
+```
+app/
+├── layout.tsx          # Root layout (required)
+├── page.tsx            # Home page (/)
+├── loading.tsx         # Loading UI
+├── error.tsx           # Error UI
+├── not-found.tsx       # 404 UI
+├── global-error.tsx    # Global error UI
+├── route.ts            # API endpoint
+├── template.tsx        # Re-rendered layout
+├── default.tsx         # Parallel route fallback
+├── blog/
+│   ├── page.tsx        # /blog
+│   └── [slug]/
+│       └── page.tsx    # /blog/:slug
+└── (group)/            # Route group (no URL impact)
+    └── page.tsx
+```
+## Special Files
+| File            | Purpose                                  |
+| --------------- | ---------------------------------------- |
+| `page.tsx`      | UI for a route segment                   |
+| `layout.tsx`    | Shared UI for segment and children       |
+| `loading.tsx`   | Loading UI (Suspense boundary)           |
+| `error.tsx`     | Error UI (Error boundary)                |
+| `not-found.tsx` | 404 UI                                   |
+| `route.ts`      | API endpoint                             |
+| `template.tsx`  | Like layout but re-renders on navigation |
+| `default.tsx`   | Fallback for parallel routes             |
+## Route Segments
+```
+app/
+├── blog/               # Static segment: /blog
+├── [slug]/             # Dynamic segment: /:slug
+├── [...slug]/          # Catch-all: /a/b/c
+├── [[...slug]]/        # Optional catch-all: / or /a/b/c
+└── (marketing)/        # Route group (ignored in URL)
+```
+## Parallel Routes
+```
+app/
+├── @analytics/
+│   └── page.tsx
+├── @sidebar/
+│   └── page.tsx
+└── layout.tsx          # Receives { analytics, sidebar } as props
+```
+## Intercepting Routes
+```
+app/
+├── feed/
+│   └── page.tsx
+├── @modal/
+│   └── (.)photo/[id]/  # Intercepts /photo/[id] from /feed
+│       └── page.tsx
+└── photo/[id]/
+    └── page.tsx
+```
+Conventions:
+- `(.)` - same level
+- `(..)` - one level up
+- `(..)(..)` - two levels up
+- `(...)` - from root
+## Private Folders
+```
+app/
+├── _components/        # Private folder (not a route)
+│   └── Button.tsx
+└── page.tsx
+```
+Prefix with `_` to exclude from routing.
+## Middleware / Proxy
+### Next.js 14-15: `middleware.ts`
+```ts
+// middleware.ts (root of project)
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+export function middleware(request: NextRequest) {
+  // Auth, redirects, rewrites, etc.
+  return NextResponse.next();
+}
+export const config = {
+  matcher: ["/dashboard/:path*", "/api/:path*"],
+};
+```
+### Next.js 16+: `proxy.ts`
+Renamed for clarity - same capabilities, different names:
+```ts
+// proxy.ts (root of project)
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+export function proxy(request: NextRequest) {
+  // Same logic as middleware
+  return NextResponse.next();
+}
+export const proxyConfig = {
+  matcher: ["/dashboard/:path*", "/api/:path*"],
+};
+```
+| Version | File            | Export         | Config        |
+| ------- | --------------- | -------------- | ------------- |
+| v14-15  | `middleware.ts` | `middleware()` | `config`      |
+| v16+    | `proxy.ts`      | `proxy()`      | `proxyConfig` |
+**Migration**: Run `npx @next/codemod@latest upgrade` to auto-rename.
+## File Conventions Reference
+Reference: https://nextjs.org/docs/app/api-reference/file-conventions

package/skills/nextjs-best-practices/references/font.md ADDED Viewed

@@ -0,0 +1,175 @@
+# Font Optimization
+Use `next/font` for automatic font optimization with zero layout shift.
+## Table of Contents
+- [Multiple Fonts with CSS Variables](#multiple-fonts-with-css-variables)
+- [Local Fonts](#local-fonts)
+- [Tailwind CSS v4 Integration](#tailwind-css-v4-integration)
+- [Display Strategy](#display-strategy)
+- [Common Mistakes](#common-mistakes)
+- [Font in Specific Components](#font-in-specific-components)
+## Multiple Fonts with CSS Variables
+```tsx
+import { Inter, Roboto_Mono } from "next/font/google";
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+});
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+Use in CSS:
+```css
+body {
+  font-family: var(--font-inter);
+}
+code {
+  font-family: var(--font-roboto-mono);
+}
+```
+## Local Fonts
+```tsx
+import localFont from "next/font/local";
+// Single file
+const myFont = localFont({
+  src: "./fonts/MyFont.woff2",
+});
+// Multiple files for different weights
+const myFont = localFont({
+  src: [
+    {
+      path: "./fonts/MyFont-Regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "./fonts/MyFont-Bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+});
+// Variable font with CSS variable
+const myFont = localFont({
+  src: "./fonts/MyFont-Variable.woff2",
+  variable: "--font-my-font",
+});
+```
+## Tailwind CSS v4 Integration
+In Tailwind v4, font families are configured via CSS variables (no `tailwind.config.js` needed):
+```tsx
+// app/layout.tsx
+import { Inter } from "next/font/google";
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" className={inter.variable}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+```css
+/* globals.css — Tailwind v4 */
+@import "tailwindcss";
+@theme {
+  --font-sans: var(--font-inter);
+}
+```
+Then use `font-sans` utility class as normal.
+## Display Strategy
+Control font loading behavior:
+```tsx
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap", // Default - shows fallback, swaps when loaded
+});
+// Options:
+// 'swap' - immediate fallback, swap when ready (recommended)
+// 'block' - short block period, then swap
+// 'fallback' - short block, short swap, then fallback
+// 'optional' - short block, no swap (use if font is optional)
+```
+## Common Mistakes
+```tsx
+// Bad: Importing font in every component
+// components/Button.tsx
+import { Inter } from 'next/font/google'
+const inter = Inter({ subsets: ['latin'] }) // Creates new instance each time!
+// Good: Import once in layout, use CSS variable
+// app/layout.tsx
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
+// Bad: Using @import in CSS (blocks rendering)
+/* globals.css */
+@import url('https://fonts.googleapis.com/css2?family=Inter');
+// Good: Use next/font (self-hosted, no network request)
+import { Inter } from 'next/font/google'
+// Bad: Missing subset - loads all characters
+const inter = Inter({})
+// Good: Always specify subset
+const inter = Inter({ subsets: ['latin'] })
+```
+## Font in Specific Components
+```tsx
+// For component-specific fonts, export from a shared file
+// lib/fonts.ts
+import { Inter, Playfair_Display } from "next/font/google";
+export const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+export const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair" });
+// components/Heading.tsx
+import { playfair } from "@/lib/fonts";
+export function Heading({ children }) {
+  return <h1 className={playfair.className}>{children}</h1>;
+}
+```

package/skills/nextjs-best-practices/references/functions.md ADDED Viewed

@@ -0,0 +1,116 @@
+# Functions
+Next.js function APIs.
+Reference: https://nextjs.org/docs/app/api-reference/functions
+## Table of Contents
+- [Navigation Hooks (Client)](#navigation-hooks-client)
+- [Server Functions](#server-functions)
+- [Generate Functions](#generate-functions)
+- [Request/Response](#requestresponse)
+- [Common Examples](#common-examples)
+## Navigation Hooks (Client)
+| Hook                        | Purpose                                                        | Reference                                                                                |
+| --------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `useRouter`                 | Programmatic navigation (`push`, `replace`, `back`, `refresh`) | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-router)                   |
+| `usePathname`               | Get current pathname                                           | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-pathname)                 |
+| `useSearchParams`           | Read URL search parameters                                     | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-search-params)            |
+| `useParams`                 | Access dynamic route parameters                                | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-params)                   |
+| `useSelectedLayoutSegment`  | Active child segment (one level)                               | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segment)  |
+| `useSelectedLayoutSegments` | All active segments below layout                               | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments) |
+| `useLinkStatus`             | Check link prefetch status                                     | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-link-status)              |
+| `useReportWebVitals`        | Report Core Web Vitals metrics                                 | [Docs](https://nextjs.org/docs/app/api-reference/functions/use-report-web-vitals)        |
+## Server Functions
+| Function     | Purpose                                      | Reference                                                              |
+| ------------ | -------------------------------------------- | ---------------------------------------------------------------------- |
+| `cookies`    | Read/write cookies                           | [Docs](https://nextjs.org/docs/app/api-reference/functions/cookies)    |
+| `headers`    | Read request headers                         | [Docs](https://nextjs.org/docs/app/api-reference/functions/headers)    |
+| `draftMode`  | Enable preview of unpublished CMS content    | [Docs](https://nextjs.org/docs/app/api-reference/functions/draft-mode) |
+| `after`      | Run code after response finishes streaming   | [Docs](https://nextjs.org/docs/app/api-reference/functions/after)      |
+| `connection` | Wait for connection before dynamic rendering | [Docs](https://nextjs.org/docs/app/api-reference/functions/connection) |
+| `userAgent`  | Parse User-Agent header                      | [Docs](https://nextjs.org/docs/app/api-reference/functions/userAgent)  |
+## Generate Functions
+| Function                | Purpose                                 | Reference                                                                           |
+| ----------------------- | --------------------------------------- | ----------------------------------------------------------------------------------- |
+| `generateStaticParams`  | Pre-render dynamic routes at build time | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-static-params)  |
+| `generateMetadata`      | Dynamic metadata                        | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)       |
+| `generateViewport`      | Dynamic viewport config                 | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-viewport)       |
+| `generateSitemaps`      | Multiple sitemaps for large sites       | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps)       |
+| `generateImageMetadata` | Multiple OG images per route            | [Docs](https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata) |
+## Request/Response
+| Function        | Purpose                        | Reference                                                                  |
+| --------------- | ------------------------------ | -------------------------------------------------------------------------- |
+| `NextRequest`   | Extended Request with helpers  | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-request)   |
+| `NextResponse`  | Extended Response with helpers | [Docs](https://nextjs.org/docs/app/api-reference/functions/next-response)  |
+| `ImageResponse` | Generate OG images             | [Docs](https://nextjs.org/docs/app/api-reference/functions/image-response) |
+## Common Examples
+### Navigation
+Use `next/link` for internal navigation instead of `<a>` tags.
+```tsx
+// Bad: Plain anchor tag
+<a href="/about">About</a>;
+// Good: Next.js Link
+import Link from "next/link";
+<Link href="/about">About</Link>;
+```
+Active link styling:
+```tsx
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+export function NavLink({ href, children }) {
+  const pathname = usePathname();
+  return (
+    <Link href={href} className={pathname === href ? "active" : ""}>
+      {children}
+    </Link>
+  );
+}
+```
+### Static Generation
+```tsx
+// app/blog/[slug]/page.tsx
+export async function generateStaticParams() {
+  const posts = await getPosts();
+  return posts.map((post) => ({ slug: post.slug }));
+}
+```
+### After Response
+```tsx
+import { after } from "next/server";
+export async function POST(request: Request) {
+  const data = await processRequest(request);
+  after(async () => {
+    await logAnalytics(data);
+  });
+  return Response.json({ success: true });
+}
+```