npm - @kood/claude-code - Versions diffs - 0.3.6 → 0.3.8 - Mend

@kood/claude-code 0.3.6 → 0.3.8

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 (120) hide show

package/templates/nextjs/docs/library/nextjs/app-router.md ADDED Viewed

@@ -0,0 +1,269 @@
+# App Router
+> File-based routing system
+---
+## File Structure and Routing
+### Basic Rules
+| File | Route | Description |
+|------|-------|-------------|
+| `app/page.tsx` | `/` | Home page |
+| `app/about/page.tsx` | `/about` | About page |
+| `app/blog/[slug]/page.tsx` | `/blog/:slug` | Dynamic route |
+| `app/shop/[...slug]/page.tsx` | `/shop/*` | Catch-all |
+| `app/docs/[[...slug]]/page.tsx` | `/docs/*` | Optional catch-all |
+### Example
+```typescript
+// app/blog/[slug]/page.tsx
+interface PageProps {
+  params: { slug: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+export default async function BlogPost({ params, searchParams }: PageProps) {
+  const post = await prisma.post.findUnique({ where: { slug: params.slug } })
+  if (!post) notFound()
+  return <article>{post.content}</article>
+}
+```
+---
+## Layouts
+### Root Layout (required)
+```typescript
+// app/layout.tsx
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+### Nested Layout
+```typescript
+// app/dashboard/layout.tsx
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <nav>Dashboard Nav</nav>
+      <main>{children}</main>
+    </div>
+  )
+}
+```
+**Features:**
+- Nestable (parent → child order)
+- Persists without re-rendering
+- Receives `children` as props
+---
+## Route Groups
+```
+app/
+├── (marketing)/
+│   ├── layout.tsx      # Marketing layout
+│   ├── page.tsx        # /
+│   └── about/
+│       └── page.tsx    # /about
+└── (shop)/
+    ├── layout.tsx      # Shop layout
+    └── products/
+        └── page.tsx    # /products
+```
+**Purpose:**
+- Group folders without affecting URLs
+- Apply different layouts
+---
+## Dynamic Routes
+### Single Parameter
+```typescript
+// app/posts/[id]/page.tsx
+export default async function PostPage({ params }: { params: { id: string } }) {
+  const post = await prisma.post.findUnique({ where: { id: params.id } })
+  return <article>{post.title}</article>
+}
+// Static generation (at build time)
+export async function generateStaticParams() {
+  const posts = await prisma.post.findMany()
+  return posts.map(post => ({ id: post.id }))
+}
+```
+### Catch-all
+```typescript
+// app/docs/[...slug]/page.tsx
+export default function DocsPage({ params }: { params: { slug: string[] } }) {
+  // /docs/a/b/c → params.slug = ["a", "b", "c"]
+  return <div>{params.slug.join("/")}</div>
+}
+```
+---
+## Parallel Routes
+```
+app/
+├── @analytics/
+│   └── page.tsx
+├── @team/
+│   └── page.tsx
+└── layout.tsx
+```
+```typescript
+// app/layout.tsx
+export default function Layout({
+  children,
+  analytics,
+  team,
+}: {
+  children: React.ReactNode
+  analytics: React.ReactNode
+  team: React.ReactNode
+}) {
+  return (
+    <>
+      {children}
+      {analytics}
+      {team}
+    </>
+  )
+}
+```
+---
+## Intercepting Routes
+```
+app/
+├── feed/
+│   └── page.tsx
+├── photo/
+│   └── [id]/
+│       └── page.tsx
+└── @modal/
+    └── (.)photo/
+        └── [id]/
+            └── page.tsx
+```
+**Conventions:**
+- `(.)` - same level
+- `(..)` - one level up
+- `(..)(..)` - two levels up
+- `(...)` - from root
+---
+## Metadata
+```typescript
+// app/blog/[slug]/page.tsx
+import type { Metadata } from "next"
+export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
+  const post = await prisma.post.findUnique({ where: { slug: params.slug } })
+  return {
+    title: post.title,
+    description: post.excerpt,
+    openGraph: {
+      title: post.title,
+      description: post.excerpt,
+      images: [post.image],
+    },
+  }
+}
+```
+---
+## Special Files
+| File | Purpose |
+|------|---------|
+| `loading.tsx` | Suspense fallback |
+| `error.tsx` | Error Boundary |
+| `not-found.tsx` | 404 page |
+| `template.tsx` | Re-rendering Layout |
+| `default.tsx` | Parallel route fallback |
+### Loading UI
+```typescript
+// app/dashboard/loading.tsx
+export default function Loading() {
+  return <div>Loading...</div>
+}
+```
+### Error UI
+```typescript
+// app/dashboard/error.tsx
+"use client"
+export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+  return (
+    <div>
+      <h2>An error occurred</h2>
+      <button onClick={reset}>Try again</button>
+    </div>
+  )
+}
+```
+---
+## Navigation
+```typescript
+"use client"
+import { useRouter, usePathname, useSearchParams } from "next/navigation"
+import Link from "next/link"
+export function Navigation() {
+  const router = useRouter()
+  const pathname = usePathname() // current path
+  const searchParams = useSearchParams() // query parameters
+  return (
+    <>
+      <Link href="/about">About</Link>
+      <button onClick={() => router.push("/posts")}>Go to Posts</button>
+    </>
+  )
+}
+```
+---
+## References
+- [Next.js App Router Official Docs](https://nextjs.org/docs/app)

package/templates/nextjs/docs/library/nextjs/caching.md ADDED Viewed

@@ -0,0 +1,351 @@
+# Caching
+> Next.js caching strategies
+---
+## Cache Levels
+| Level | Description |
+|-------|-------------|
+| **Request Memoization** | Deduplicate same requests (React) |
+| **Data Cache** | Server data cache (persistent) |
+| **Full Route Cache** | Static rendering at build time |
+| **Router Cache** | Client-side router cache |
+---
+## Request Memoization
+```typescript
+// Same requests execute only once
+async function getUser(id: string) {
+  const res = await fetch(`https://api.example.com/users/${id}`)
+  return res.json()
+}
+export default async function Page() {
+  const user1 = await getUser("1") // fetch executes
+  const user2 = await getUser("1") // cache used (deduplicated)
+  return <div>{user1.name}</div>
+}
+```
+---
+## Data Cache (fetch)
+### Default (cached)
+```typescript
+// Cached by default
+const res = await fetch("https://api.example.com/posts")
+```
+### Disable Cache
+```typescript
+// Fetch fresh data on every request
+const res = await fetch("https://api.example.com/posts", {
+  cache: "no-store",
+})
+```
+### Revalidate (time-based)
+```typescript
+// Revalidate every 60 seconds
+const res = await fetch("https://api.example.com/posts", {
+  next: { revalidate: 60 },
+})
+```
+### Tag-based Cache
+```typescript
+// Set tag
+const res = await fetch("https://api.example.com/posts", {
+  next: { tags: ["posts"] },
+})
+// Invalidate tag in Server Action
+"use server"
+import { revalidateTag } from "next/cache"
+export async function createPost(data: PostInput) {
+  await prisma.post.create({ data })
+  revalidateTag("posts") // Invalidate "posts" tag cache
+}
+```
+---
+## unstable_cache (function caching)
+```typescript
+import { unstable_cache } from "next/cache"
+const getCachedPosts = unstable_cache(
+  async () => {
+    return prisma.post.findMany()
+  },
+  ["posts"], // cache key
+  {
+    revalidate: 60, // 60 seconds
+    tags: ["posts"], // tags
+  }
+)
+export default async function PostsPage() {
+  const posts = await getCachedPosts()
+  return <PostsList posts={posts} />
+}
+```
+---
+## revalidatePath
+```typescript
+"use server"
+import { revalidatePath } from "next/cache"
+export async function createPost(data: PostInput) {
+  const post = await prisma.post.create({ data })
+  // Invalidate specific path cache
+  revalidatePath("/posts")
+  revalidatePath(`/posts/${post.id}`)
+  // Invalidate all caches including layout
+  revalidatePath("/posts", "layout")
+  return post
+}
+```
+---
+## revalidateTag
+```typescript
+"use server"
+import { revalidateTag } from "next/cache"
+export async function createPost(data: PostInput) {
+  const post = await prisma.post.create({ data })
+  // Invalidate all caches with "posts" tag
+  revalidateTag("posts")
+  return post
+}
+```
+---
+## Full Route Cache (static rendering)
+### Static Page
+```typescript
+// Generated at build time (default)
+export default async function PostsPage() {
+  const posts = await prisma.post.findMany()
+  return <PostsList posts={posts} />
+}
+```
+### Dynamic Page (disable cache)
+```typescript
+// Render on every request
+export const dynamic = "force-dynamic"
+export default async function PostsPage() {
+  const posts = await prisma.post.findMany()
+  return <PostsList posts={posts} />
+}
+```
+### Revalidate (time-based)
+```typescript
+// Regenerate every 60 seconds
+export const revalidate = 60
+export default async function PostsPage() {
+  const posts = await prisma.post.findMany()
+  return <PostsList posts={posts} />
+}
+```
+---
+## Route Segment Config
+```typescript
+// app/posts/page.tsx
+// Force dynamic rendering
+export const dynamic = "force-dynamic" // "auto" | "force-static" | "error"
+// Revalidate interval (seconds)
+export const revalidate = 60 // false | 0 | number
+// Runtime configuration
+export const runtime = "nodejs" // "edge"
+// Maximum execution time (seconds)
+export const maxDuration = 60
+export default async function PostsPage() {
+  // ...
+}
+```
+---
+## Router Cache (client-side)
+```typescript
+"use client"
+import { useRouter } from "next/navigation"
+export function Navigation() {
+  const router = useRouter()
+  return (
+    <button
+      onClick={() => {
+        router.push("/posts") // Use cached page
+        router.refresh() // Force refresh
+      }}
+    >
+      Go to Posts
+    </button>
+  )
+}
+```
+---
+## generateStaticParams (dynamic routes)
+```typescript
+// app/posts/[id]/page.tsx
+// List of pages to generate at build time
+export async function generateStaticParams() {
+  const posts = await prisma.post.findMany({ select: { id: true } })
+  return posts.map(post => ({ id: post.id }))
+}
+export default async function PostPage({ params }: { params: { id: string } }) {
+  const post = await prisma.post.findUnique({ where: { id: params.id } })
+  return <article>{post.title}</article>
+}
+```
+---
+## Caching Flow
+### Static Page
+```
+1. Render at build time
+2. Save to Full Route Cache
+3. Subsequent requests use cache
+4. Regenerate after revalidate time
+```
+### Dynamic Page
+```
+1. Render on every request
+2. No cache
+3. Update data with Server Actions
+4. Invalidate only specific paths with revalidatePath
+```
+---
+## Cache Invalidation Strategies
+### Time-based
+```typescript
+// Regenerate every 60 seconds
+export const revalidate = 60
+const res = await fetch("...", { next: { revalidate: 60 } })
+```
+### On-demand (Server Actions)
+```typescript
+"use server"
+import { revalidatePath, revalidateTag } from "next/cache"
+export async function updatePost(id: string, data: PostInput) {
+  await prisma.post.update({ where: { id }, data })
+  // Path invalidation
+  revalidatePath(`/posts/${id}`)
+  // Tag invalidation
+  revalidateTag("posts")
+}
+```
+---
+## Best Practices
+### ✅ DO
+```typescript
+// 1. Use default cache for static data
+const posts = await fetch("https://api.example.com/posts")
+// 2. Use no-store for dynamic data
+const user = await fetch("https://api.example.com/user", {
+  cache: "no-store",
+})
+// 3. Tag-based invalidation
+const posts = await fetch("...", { next: { tags: ["posts"] } })
+revalidateTag("posts")
+// 4. Function caching
+const getCachedData = unstable_cache(
+  async () => prisma.post.findMany(),
+  ["posts"],
+  { revalidate: 60 }
+)
+```
+### ❌ DON'T
+```typescript
+// 1. Caching sensitive data
+const user = await fetch("/api/user") // ❌ Don't cache personal data
+// 2. Excessive revalidatePath
+revalidatePath("/") // ❌ Invalidates entire site
+// 3. Short revalidate interval
+export const revalidate = 1 // ❌ Increases load
+```
+---
+## References
+- [Next.js Caching](https://nextjs.org/docs/app/building-your-application/caching)