@jgamaraalv/ts-dev-kit 1.0.0

package/skills/nextjs-best-practices/references/bundling.md

@@ -0,0 +1,192 @@
+# Bundling
+
+Fix common bundling issues with third-party packages.
+
+## Table of Contents
+
+- [Server-Incompatible Packages](#server-incompatible-packages)
+- [CSS Imports](#css-imports)
+- [Polyfills](#polyfills)
+- [ESM/CommonJS Issues](#esmcommonjs-issues)
+- [Common Problematic Packages](#common-problematic-packages)
+- [Bundle Analysis](#bundle-analysis)
+- [Migrating from Webpack to Turbopack](#migrating-from-webpack-to-turbopack)
+
+## Server-Incompatible Packages
+
+Some packages use browser APIs (`window`, `document`, `localStorage`) and fail in Server Components.
+
+### Error Signs
+
+```
+ReferenceError: window is not defined
+ReferenceError: document is not defined
+ReferenceError: localStorage is not defined
+Module not found: Can't resolve 'fs'
+```
+
+### Solution 1: Mark as Client-Only
+
+If the package is only needed on client:
+
+```tsx
+// Bad: Fails - package uses window
+import SomeChart from "some-chart-library";
+
+export default function Page() {
+  return <SomeChart />;
+}
+
+// Good: Use dynamic import with ssr: false
+import dynamic from "next/dynamic";
+
+const SomeChart = dynamic(() => import("some-chart-library"), {
+  ssr: false,
+});
+
+export default function Page() {
+  return <SomeChart />;
+}
+```
+
+### Solution 2: Externalize from Server Bundle
+
+For packages that should run on server but have bundling issues:
+
+```js
+// next.config.js
+export default {
+  serverExternalPackages: ["problematic-package"],
+};
+```
+
+Use this for:
+
+- Packages with native bindings (sharp, bcrypt)
+- Packages that don't bundle well (some ORMs)
+- Packages with circular dependencies
+
+### Solution 3: Client Component Wrapper
+
+Wrap the entire usage in a client component:
+
+```tsx
+// components/ChartWrapper.tsx
+"use client";
+
+import { Chart } from "chart-library";
+
+export function ChartWrapper(props) {
+  return <Chart {...props} />;
+}
+
+// app/page.tsx (server component)
+import { ChartWrapper } from "@/components/ChartWrapper";
+
+export default function Page() {
+  return <ChartWrapper data={data} />;
+}
+```
+
+## CSS Imports
+
+Import CSS files instead of using `<link>` tags. Next.js handles bundling and optimization.
+
+```tsx
+// Bad: Manual link tag
+<link rel="stylesheet" href="/styles.css" />;
+
+// Good: Import CSS
+import "./styles.css";
+
+// Good: CSS Modules
+import styles from "./Button.module.css";
+```
+
+## Polyfills
+
+Next.js includes common polyfills automatically. Don't load redundant ones from polyfill.io or similar CDNs.
+
+Already included: `Array.from`, `Object.assign`, `Promise`, `fetch`, `Map`, `Set`, `Symbol`, `URLSearchParams`, and 50+ others.
+
+```tsx
+// Bad: Redundant polyfills
+<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,Promise,Array.from" />
+
+// Good: Next.js includes these automatically
+```
+
+## ESM/CommonJS Issues
+
+### Error Signs
+
+```
+SyntaxError: Cannot use import statement outside a module
+Error: require() of ES Module
+Module not found: ESM packages need to be imported
+```
+
+### Solution: Transpile Package
+
+```js
+// next.config.js
+export default {
+  transpilePackages: ["some-esm-package", "another-package"],
+};
+```
+
+## Common Problematic Packages
+
+| Package         | Issue           | Solution                                                        |
+| --------------- | --------------- | --------------------------------------------------------------- |
+| `sharp`         | Native bindings | `serverExternalPackages: ['sharp']`                             |
+| `bcrypt`        | Native bindings | `serverExternalPackages: ['bcrypt']` or use `bcryptjs`          |
+| `canvas`        | Native bindings | `serverExternalPackages: ['canvas']`                            |
+| `recharts`      | Uses window     | `dynamic(() => import('recharts'), { ssr: false })`             |
+| `react-quill`   | Uses document   | `dynamic(() => import('react-quill'), { ssr: false })`          |
+| `mapbox-gl`     | Uses window     | `dynamic(() => import('mapbox-gl'), { ssr: false })`            |
+| `monaco-editor` | Uses window     | `dynamic(() => import('@monaco-editor/react'), { ssr: false })` |
+| `lottie-web`    | Uses document   | `dynamic(() => import('lottie-react'), { ssr: false })`         |
+
+## Bundle Analysis
+
+Analyze bundle size with the built-in analyzer (Next.js 16.1+):
+
+```bash
+next experimental-analyze
+```
+
+This opens an interactive UI to:
+
+- Filter by route, environment (client/server), and type
+- Inspect module sizes and import chains
+- View treemap visualization
+
+Save output for comparison:
+
+```bash
+next experimental-analyze --output
+# Output saved to .next/diagnostics/analyze
+```
+
+Reference: https://nextjs.org/docs/app/guides/package-bundling
+
+## Migrating from Webpack to Turbopack
+
+Turbopack is the default bundler in Next.js 16.1.6+. If you have custom webpack config, migrate to Turbopack-compatible alternatives:
+
+```js
+// next.config.js
+export default {
+  // Good: Works with Turbopack
+  serverExternalPackages: ["package"],
+  transpilePackages: ["package"],
+
+  // Bad: Webpack-only - migrate away from this
+  webpack: (config) => {
+    // custom webpack config
+  },
+};
+```
+
+Reference: https://nextjs.org/docs/app/building-your-application/upgrading/from-webpack-to-turbopack

package/skills/nextjs-best-practices/references/data-patterns.md

@@ -0,0 +1,310 @@
+# Data Patterns
+
+Choose the right data fetching pattern for each use case.
+
+## Table of Contents
+
+- [Decision Tree](#decision-tree)
+- [Pattern 1: Server Components (Preferred for Reads)](#pattern-1-server-components-preferred-for-reads)
+- [Pattern 2: Server Actions (Preferred for Mutations)](#pattern-2-server-actions-preferred-for-mutations)
+- [Pattern 3: Route Handlers (APIs)](#pattern-3-route-handlers-apis)
+- [Avoiding Data Waterfalls](#avoiding-data-waterfalls)
+- [Client Component Data Fetching](#client-component-data-fetching)
+- [Quick Reference](#quick-reference)
+
+## Decision Tree
+
+```
+Need to fetch data?
+├── From a Server Component?
+│   └── Use: Fetch directly (no API needed)
+│
+├── From a Client Component?
+│   ├── Is it a mutation (POST/PUT/DELETE)?
+│   │   └── Use: Server Action
+│   └── Is it a read (GET)?
+│       └── Use: Route Handler OR pass from Server Component
+│
+├── Need external API access (webhooks, third parties)?
+│   └── Use: Route Handler
+│
+└── Need REST API for mobile app / external clients?
+    └── Use: Route Handler
+```
+
+## Pattern 1: Server Components (Preferred for Reads)
+
+Fetch data directly in Server Components - no API layer needed.
+
+```tsx
+// app/users/page.tsx
+async function UsersPage() {
+  // Direct database access - no API round-trip
+  const users = await db.user.findMany();
+
+  // Or fetch from external API
+  const posts = await fetch("https://api.example.com/posts").then((r) => r.json());
+
+  return (
+    <ul>
+      {users.map((user) => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+**Benefits**:
+
+- No API to maintain
+- No client-server waterfall
+- Secrets stay on server
+- Direct database access
+
+## Pattern 2: Server Actions (Preferred for Mutations)
+
+Server Actions are the recommended way to handle mutations.
+
+```tsx
+// app/actions.ts
+"use server";
+
+import { revalidatePath } from "next/cache";
+
+export async function createPost(formData: FormData) {
+  const title = formData.get("title") as string;
+
+  await db.post.create({ data: { title } });
+
+  revalidatePath("/posts");
+}
+
+export async function deletePost(id: string) {
+  await db.post.delete({ where: { id } });
+
+  revalidateTag("posts");
+}
+```
+
+```tsx
+// app/posts/new/page.tsx
+import { createPost } from "@/app/actions";
+
+export default function NewPost() {
+  return (
+    <form action={createPost}>
+      <input name="title" required />
+      <button type="submit">Create</button>
+    </form>
+  );
+}
+```
+
+**Benefits**:
+
+- End-to-end type safety
+- Progressive enhancement (works without JS)
+- Automatic request handling
+- Integrated with React transitions
+
+**Constraints**:
+
+- POST only (no GET caching semantics)
+- Internal use only (no external access)
+- Cannot return non-serializable data
+
+## Pattern 3: Route Handlers (APIs)
+
+Use Route Handlers when you need a REST API.
+
+```tsx
+// app/api/posts/route.ts
+import { NextRequest, NextResponse } from "next/server";
+
+// GET is cacheable
+export async function GET(request: NextRequest) {
+  const posts = await db.post.findMany();
+  return NextResponse.json(posts);
+}
+
+// POST for mutations
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  const post = await db.post.create({ data: body });
+  return NextResponse.json(post, { status: 201 });
+}
+```
+
+**When to use**:
+
+- External API access (mobile apps, third parties)
+- Webhooks from external services
+- GET endpoints that need HTTP caching
+- OpenAPI/Swagger documentation needed
+
+**When NOT to use**:
+
+- Internal data fetching (use Server Components)
+- Mutations from your UI (use Server Actions)
+
+## Avoiding Data Waterfalls
+
+### Problem: Sequential Fetches
+
+```tsx
+// Bad: Sequential waterfalls
+async function Dashboard() {
+  const user = await getUser(); // Wait...
+  const posts = await getPosts(); // Then wait...
+  const comments = await getComments(); // Then wait...
+
+  return <div>...</div>;
+}
+```
+
+### Solution 1: Parallel Fetching with Promise.all
+
+```tsx
+// Good: Parallel fetching
+async function Dashboard() {
+  const [user, posts, comments] = await Promise.all([getUser(), getPosts(), getComments()]);
+
+  return <div>...</div>;
+}
+```
+
+### Solution 2: Streaming with Suspense
+
+```tsx
+// Good: Show content progressively
+import { Suspense } from "react";
+
+async function Dashboard() {
+  return (
+    <div>
+      <Suspense fallback={<UserSkeleton />}>
+        <UserSection />
+      </Suspense>
+      <Suspense fallback={<PostsSkeleton />}>
+        <PostsSection />
+      </Suspense>
+    </div>
+  );
+}
+
+async function UserSection() {
+  const user = await getUser(); // Fetches independently
+  return <div>{user.name}</div>;
+}
+
+async function PostsSection() {
+  const posts = await getPosts(); // Fetches independently
+  return <PostList posts={posts} />;
+}
+```
+
+### Solution 3: Preload Pattern
+
+```tsx
+// lib/data.ts
+import { cache } from "react";
+
+export const getUser = cache(async (id: string) => {
+  return db.user.findUnique({ where: { id } });
+});
+
+export const preloadUser = (id: string) => {
+  void getUser(id); // Fire and forget
+};
+```
+
+```tsx
+// app/user/[id]/page.tsx
+import { getUser, preloadUser } from "@/lib/data";
+
+export default async function UserPage({ params }) {
+  const { id } = await params;
+
+  // Start fetching early
+  preloadUser(id);
+
+  // Do other work...
+
+  // Data likely ready by now
+  const user = await getUser(id);
+  return <div>{user.name}</div>;
+}
+```
+
+## Client Component Data Fetching
+
+When Client Components need data:
+
+### Option 1: Pass from Server Component (Preferred)
+
+```tsx
+// Server Component
+async function Page() {
+  const data = await fetchData();
+  return <ClientComponent initialData={data} />;
+}
+
+// Client Component
+("use client");
+function ClientComponent({ initialData }) {
+  const [data, setData] = useState(initialData);
+  // ...
+}
+```
+
+### Option 2: Fetch on Mount (When Necessary)
+
+```tsx
+"use client";
+import { useEffect, useState } from "react";
+
+function ClientComponent() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch("/api/data")
+      .then((r) => r.json())
+      .then(setData);
+  }, []);
+
+  if (!data) return <Loading />;
+  return <div>{data.value}</div>;
+}
+```
+
+### Option 3: Server Action for Reads (Works But Not Ideal)
+
+Server Actions can be called from Client Components for reads, but this is not their intended purpose:
+
+```tsx
+"use client";
+import { getData } from "./actions";
+import { useEffect, useState } from "react";
+
+function ClientComponent() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    getData().then(setData);
+  }, []);
+
+  return <div>{data?.value}</div>;
+}
+```
+
+**Note**: Server Actions always use POST, so no HTTP caching. Prefer Route Handlers for cacheable reads.
+
+## Quick Reference
+
+| Pattern                | Use Case                    | HTTP Method | Caching              |
+| ---------------------- | --------------------------- | ----------- | -------------------- |
+| Server Component fetch | Internal reads              | Any         | Full Next.js caching |
+| Server Action          | Mutations, form submissions | POST only   | No                   |
+| Route Handler          | External APIs, webhooks     | Any         | GET can be cached    |
+| Client fetch to API    | Client-side reads           | Any         | HTTP cache headers   |

package/skills/nextjs-best-practices/references/debug-tricks.md

@@ -0,0 +1,127 @@
+# Debug Tricks
+
+Tricks to speed up debugging Next.js applications.
+
+## Table of Contents
+
+- [MCP Endpoint (Dev Server)](#mcp-endpoint-dev-server)
+- [Rebuild Specific Routes (Next.js 16+)](#rebuild-specific-routes-nextjs-16)
+
+## MCP Endpoint (Dev Server)
+
+Next.js exposes a `/_next/mcp` endpoint in development for AI-assisted debugging via MCP (Model Context Protocol).
+
+- **Next.js 16+**: Enabled by default, use `next-devtools-mcp`
+- **Next.js < 16**: Requires `experimental.mcpServer: true` in next.config.js
+
+Reference: https://nextjs.org/docs/app/guides/mcp
+
+**Important**: Find the actual port of the running Next.js dev server (check terminal output or `package.json` scripts). Don't assume port 3000.
+
+### Request Format
+
+The endpoint uses JSON-RPC 2.0 over HTTP POST:
+
+```bash
+curl -X POST http://localhost:<port>/_next/mcp \
+  -H "Content-Type: application/json" \
+  -H "Accept: application/json, text/event-stream" \
+  -d '{
+    "jsonrpc": "2.0",
+    "id": "1",
+    "method": "tools/call",
+    "params": {
+      "name": "<tool-name>",
+      "arguments": {}
+    }
+  }'
+```
+
+### Available Tools
+
+#### `get_errors`
+
+Get current errors from dev server (build errors, runtime errors with source-mapped stacks):
+
+```json
+{ "name": "get_errors", "arguments": {} }
+```
+
+#### `get_routes`
+
+Discover all routes by scanning filesystem:
+
+```json
+{ "name": "get_routes", "arguments": {} }
+// Optional: { "name": "get_routes", "arguments": { "routerType": "app" } }
+```
+
+Returns: `{ "appRouter": ["/", "/api/users/[id]", ...], "pagesRouter": [...] }`
+
+#### `get_project_metadata`
+
+Get project path and dev server URL:
+
+```json
+{ "name": "get_project_metadata", "arguments": {} }
+```
+
+Returns: `{ "projectPath": "/path/to/project", "devServerUrl": "http://localhost:3000" }`
+
+#### `get_page_metadata`
+
+Get runtime metadata about current page render (requires active browser session):
+
+```json
+{ "name": "get_page_metadata", "arguments": {} }
+```
+
+Returns segment trie data showing layouts, boundaries, and page components.
+
+#### `get_logs`
+
+Get path to Next.js development log file:
+
+```json
+{ "name": "get_logs", "arguments": {} }
+```
+
+Returns path to `<distDir>/logs/next-development.log`
+
+#### `get_server_action_by_id`
+
+Locate a Server Action by ID:
+
+```json
+{ "name": "get_server_action_by_id", "arguments": { "actionId": "<action-id>" } }
+```
+
+### Example: Get Errors
+
+```bash
+curl -X POST http://localhost:<port>/_next/mcp \
+  -H "Content-Type: application/json" \
+  -H "Accept: application/json, text/event-stream" \
+  -d '{"jsonrpc":"2.0","id":"1","method":"tools/call","params":{"name":"get_errors","arguments":{}}}'
+```
+
+## Rebuild Specific Routes (Next.js 16+)
+
+Use `--debug-build-paths` to rebuild only specific routes instead of the entire app:
+
+```bash
+# Rebuild a specific route
+next build --debug-build-paths "/dashboard"
+
+# Rebuild routes matching a glob
+next build --debug-build-paths "/api/*"
+
+# Dynamic routes
+next build --debug-build-paths "/blog/[slug]"
+```
+
+Use this to:
+
+- Quickly verify a build fix without full rebuild
+- Debug static generation issues for specific pages
+- Iterate faster on build errors

package/skills/nextjs-best-practices/references/directives.md

@@ -0,0 +1,74 @@
+# Directives
+
+## React Directives
+
+These are React directives, not Next.js specific.
+
+### `'use client'`
+
+Marks a component as a Client Component. Required for:
+
+- React hooks (`useState`, `useEffect`, etc.)
+- Event handlers (`onClick`, `onChange`)
+- Browser APIs (`window`, `localStorage`)
+
+```tsx
+"use client";
+
+import { useState } from "react";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>{count}</button>;
+}
+```
+
+Reference: https://react.dev/reference/rsc/use-client
+
+### `'use server'`
+
+Marks a function as a Server Action. Can be passed to Client Components.
+
+```tsx
+"use server";
+
+export async function submitForm(formData: FormData) {
+  // Runs on server
+}
+```
+
+Or inline within a Server Component:
+
+```tsx
+export default function Page() {
+  async function submit() {
+    "use server";
+    // Runs on server
+  }
+  return <form action={submit}>...</form>;
+}
+```
+
+Reference: https://react.dev/reference/rsc/use-server
+
+---
+
+## Next.js Directive
+
+### `'use cache'`
+
+Marks a function or component for caching. Part of Next.js Cache Components.
+
+```tsx
+"use cache";
+
+export async function getCachedData() {
+  return await fetchData();
+}
+```
+
+Requires `cacheComponents: true` in `next.config.ts`.
+
+For detailed usage including cache profiles, `cacheLife()`, `cacheTag()`, and `updateTag()`, see the `next-cache-components` skill.
+
+Reference: https://nextjs.org/docs/app/api-reference/directives/use-cache