nextjs-dev

Next.js 16 development patterns from Vercel's official Next.js Agent Skills (394 snippets). App Router, RSC boundaries, cache components, Turbopack, proxy.ts, Server Actions, metadata/SEO.

Ir para a instalação

Repositório: ktg-one/goodai-mate
Última atividade na origem: 17 de maio de 2026 às 13:00
Idioma detectado do SKILL.md: inglês
Estrelas: 0
Forks: 0

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

npx skills add https://github.com/ktg-one/goodai-mate --skill nextjs-dev

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

goodai-frontend

Good'ai brutalist/direct-mail frontend: brand tokens, stamp UI, voice hero, asset registry, and ESLint gates. Use when building or reviewing UI in goodai-mate, fixing design fidelity, prepping demos (ABS), running lint, or when the user says /goodai-frontend, goodai frontend, brutalist mail board, stamp design, or frontend-design for this project.

2026-06-26

api-builder

API Route Handler, Server Action, and data mutation patterns for Next.js 16. Zod validation, error handling, auth patterns, cache revalidation.

2026-05-17

component-builder

React 19 + Server Component patterns from official Vercel/React docs. Component templates, hooks patterns, RSC boundaries, performance optimization.

2026-05-17

Ver todas deste repositório

src/app/
  (marketing)/      # force-static — landing, blog, docs
  (app)/             # force-dynamic — dashboard, settings
  (auth)/            # auth flows — login, register, callback

// Server Action file — ALL exports become server actions
'use server'

// Client Component — opts into client rendering
'use client'

// Cache directive (Next.js 16 PPR) — caches component output
'use cache'

// ✅ Correct: Server Component passes Server Component as children
import ClientShell from './client-shell'
import ServerData from './server-data'

export default function Page() {
  return (
    <ClientShell>
      <ServerData />  {/* stays on server */}
    </ClientShell>
  )
}

// ✅ Next.js 16 — await params
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <Article slug={slug} />
}

// ✅ Dynamic metadata
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return { title: `Article: ${slug}` }
}

// ✅ Parallel — no waterfall
const [user, posts, comments] = await Promise.all([
  getUser(id),
  getPosts(id),
  getComments(id),
])

// ❌ Sequential waterfall
const user = await getUser(id)
const posts = await getPosts(id)      // waits for user
const comments = await getComments(id) // waits for posts

import { Suspense } from 'react'

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<CardSkeleton />}>
        <RevenueChart />  {/* streams when ready */}
      </Suspense>
      <Suspense fallback={<TableSkeleton />}>
        <LatestInvoices /> {/* streams independently */}
      </Suspense>
    </div>
  )
}

// Cacheable component with 'use cache'
async function CachedProductList() {
  'use cache'
  const products = await db.product.findMany()
  return <ProductGrid products={products} />
}

// Cache with time-based revalidation
import { cacheLife } from 'next/cache'

async function CachedStats() {
  'use cache'
  cacheLife('hours')  // revalidate every hour
  const stats = await getStats()
  return <StatsDisplay stats={stats} />
}

// Pass-through Server Actions in cached components
import { cacheTag } from 'next/cache'

async function CachedList({ tag }: { tag: string }) {
  'use cache'
  cacheTag(tag)
  const items = await getItems()
  return <ItemList items={items} />
}

'use server'

import { z } from 'zod'
import { revalidatePath, revalidateTag } from 'next/cache'
import { redirect } from 'next/navigation'

const CreateSchema = z.object({
  name: z.string().min(1).max(100),
  email: z.string().email(),
})

export async function createUser(formData: FormData) {
  // 1. Validate
  const parsed = CreateSchema.safeParse(Object.fromEntries(formData))
  if (!parsed.success) {
    return { error: parsed.error.flatten() }
  }

  // 2. Authenticate (treat like API route)
  const session = await auth()
  if (!session) {
    return { error: 'Unauthorized' }
  }

  // 3. Mutate
  const user = await db.user.create({ data: parsed.data })

  // 4. Revalidate + redirect
  revalidatePath('/users')
  redirect(`/users/${user.id}`)
}

// Client-side refresh after mutation
'use client'
import { useRouter } from 'next/navigation'

function UpdateButton() {
  const router = useRouter()
  async function handleUpdate() {
    await updateItem(id)
    router.refresh() // invalidates client router cache
  }
  return <button onClick={handleUpdate}>Update</button>
}

// Pattern 1: Server Component direct fetch
async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const product = await getProduct(id) // direct DB call — no API route needed
  return <ProductView product={product} />
}

// Pattern 2: ISR with revalidation
export const revalidate = 3600 // revalidate every hour

async function BlogPage() {
  const posts = await getPosts()
  return <PostList posts={posts} />
}

// Pattern 3: generateStaticParams for SSG
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

// Pattern 4: Force dynamic for per-request data
export const dynamic = 'force-dynamic'

// src/app/api/resource/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { z } from 'zod'

const Schema = z.object({
  name: z.string().min(1).max(100),
})

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const parsed = Schema.safeParse(body)
    if (!parsed.success) {
      return NextResponse.json(
        { error: 'Validation failed', details: parsed.error.flatten() },
        { status: 400 }
      )
    }
    const result = await createResource(parsed.data)
    return NextResponse.json(result, { status: 201 })
  } catch (error) {
    console.error('[API] POST /api/resource:', error)
    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
  }
}

// proxy.ts — project root
import type { NextRequest } from 'next/server'

export function proxy(request: NextRequest) {
  const { pathname } = request.nextUrl

  // Conditional rewrites
  if (pathname.startsWith('/blog')) {
    return { rewrite: new URL('/marketing/blog' + pathname.slice(5), request.url) }
  }

  // Auth redirect
  if (pathname.startsWith('/dashboard') && !request.cookies.get('session')) {
    return { redirect: new URL('/login', request.url) }
  }
}

// Static metadata
export const metadata = {
  title: 'My App',
  description: 'App description',
  openGraph: {
    title: 'My App',
    description: 'App description',
    images: ['/og.png'],
  },
}

// Dynamic metadata
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: { images: [post.coverImage] },
  }
}

// OG Image generation
// src/app/api/og/route.tsx
import { ImageResponse } from 'next/og'

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'Default Title'
  return new ImageResponse(
    <div style={{ fontSize: 48, background: 'white', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {title}
    </div>,
    { width: 1200, height: 630 }
  )
}

// Parallel routes — multiple slots in same layout
// src/app/@analytics/page.tsx
// src/app/@team/page.tsx
// src/app/layout.tsx
export default function Layout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <div>
      {children}
      {analytics}
      {team}
    </div>
  )
}

// Intercepting routes — modal pattern
// src/app/@modal/(.)photo/[id]/page.tsx  — intercepts /photo/[id]
// src/app/photo/[id]/page.tsx            — full page fallback

// ❌ WRONG — barrel import pulls entire library
import { Button, Card, Input } from '@/components/ui'

// ✅ RIGHT — direct imports, tree-shakeable
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Input } from '@/components/ui/input'

// ❌ WRONG — dynamic import at module level
import HeavyChart from '@/components/heavy-chart'

// ✅ RIGHT — lazy load heavy components
import dynamic from 'next/dynamic'
const HeavyChart = dynamic(() => import('@/components/heavy-chart'), {
  ssr: false,
  loading: () => <ChartSkeleton />,
})

// next.config.ts — Turbopack cache configuration
const config = {
  // Turbopack uses filesystem caching by default
  // Custom cache directory (optional)
  experimental: {
    turbo: {
      // Turbopack-specific configuration if needed
    },
  },
}

// error.tsx — MUST be 'use client'
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <p>{error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  )
}

// global-error.tsx — catches root layout errors
'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>
  )
}

File	Purpose	Scope
`page.tsx`	UI unique to a route	Route segment
`layout.tsx`	Shared UI wrapping children	Route segment + children
`loading.tsx`	Instant loading UI (Suspense)	Route segment
`error.tsx`	Error boundary (`'use client'` required)	Route segment
`not-found.tsx`	404 UI	Route segment
`route.ts`	API route handler	Route segment
`template.tsx`	Re-rendered layout (no state persistence)	Route segment
`default.tsx`	Parallel route fallback

File	Purpose	Scope
`page.tsx`	UI unique to a route	Route segment
`layout.tsx`	Shared UI wrapping children	Route segment + children
`loading.tsx`	Instant loading UI (Suspense)	Route segment
`error.tsx`	Error boundary (`'use client'` required)	Route segment
`not-found.tsx`	404 UI	Route segment
`route.ts`	API route handler	Route segment
`template.tsx`	Re-rendered layout (no state persistence)	Route segment
`default.tsx`	Parallel route fallback

nextjs-dev

Opções de instalação

Revise os arquivos de origem

Next.js 16 Development Patterns (Official Vercel Source)

File Conventions (App Router)

Next.js 16 Development Patterns (Official Vercel Source)

File Conventions (App Router)

Route Groups

React Server Component (RSC) Boundaries

Decision Tree

Directives

Boundary Rules

Async Patterns (Next.js 16)

params and searchParams are Promises

Parallel Data Fetching — ALWAYS for independent data

Suspense Streaming

Cache Components (Next.js 16 PPR)

Server Actions

Data Fetching Patterns

Route Handlers

proxy.ts (Replaces middleware.ts in Next.js 16)

Metadata / SEO

Parallel & Intercepting Routes

Import Rules (Critical for Bundle Size)

Turbopack (Default in Next.js 16)

Environment Variables

Error Handling

name	nextjs-dev
description	Next.js 16 development patterns from Vercel's official Next.js Agent Skills (394 snippets). App Router, RSC boundaries, cache components, Turbopack, proxy.ts, Server Actions, metadata/SEO.
user-invocable	false

nextjs-dev

Informações da origem

Opções de instalação

Revise os arquivos de origem

Mais deste repositório

Mais deste repositório

Next.js 16 Development Patterns (Official Vercel Source)

File Conventions (App Router)

Next.js 16 Development Patterns (Official Vercel Source)

File Conventions (App Router)

Route Groups

React Server Component (RSC) Boundaries

Decision Tree

Directives

Boundary Rules

Async Patterns (Next.js 16)

params and searchParams are Promises

Parallel Data Fetching — ALWAYS for independent data

Suspense Streaming

Cache Components (Next.js 16 PPR)

Server Actions

Data Fetching Patterns

Route Handlers

proxy.ts (Replaces middleware.ts in Next.js 16)

Metadata / SEO

Parallel & Intercepting Routes

Import Rules (Critical for Bundle Size)

Turbopack (Default in Next.js 16)

Environment Variables

Error Handling