Smithery is now a part of Arcade.dev! Read more in our announcement here
Build Next.js 16 applications with modern patterns. Covers Cache Components, proxy.ts, Server/Client Components, Server Actions, and DevTools MCP integration.
Enable with:
// next.config.js
const nextConfig = { cacheComponents: true }
Then use 'use cache' directive to cache specific components/functions:
async function CachedData() {
'use cache'
const data = await db.query(...)
return <div>{data}</div>
}
Control cache lifetime with cacheLife() and tag for revalidation with cacheTag().
Migration: Rename middleware.ts → proxy.ts, rename export to proxy.
Proxy is ONLY for:
Proxy is NOT for:
Use Server Layout Guards or Data Access Layer (DAL) for auth checks.
Pattern: Fetch data in Server Components, pass to Client Components as props.
// Server Component (default)
export default async function Page() {
const data = await getData()
return <ClientButton data={data} />
}
// Client Component
'use client'
export function ClientButton({ data }) {
return <button onClick={() => handleClick(data)}>Click</button>
}
Push 'use client' boundary as low as possible in component tree.
// lib/dal.ts
export async function getUser() {
const session = await verifySession()
if (!session) redirect('/login')
return session.user
}
// Any page/component
export default async function Dashboard() {
const user = await getUser() // Auth check happens here
return <div>Welcome {user.name}</div>
}
This ensures auth is verified at every data access point, not just at route level.
No configuration needed. Webpack is still available via --webpack flag if needed.
Wait for response before proceeding.
After reading the workflow, follow it exactly.
# 1. Does it build?
npm run build
# 2. Do types pass?
npx tsc --noEmit
# 3. Does it run?
npm run dev
# Then check http://localhost:3000
# 4. Do tests pass? (if applicable)
npm test
Report to user:
Architecture:
Core Features:
Authentication & Security:
Performance:
Development:
Deployment:
Migration:
