verify-nextjs

Verify Next.js 16 App Router pattern compliance in frontend code.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/junnv93/equipment_management_system --skill verify-nextjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: verify-nextjs
Source: https://github.com/junnv93/equipment_management_system/tree/main/.claude/skills/verify-nextjs
Command: npx skills add https://github.com/junnv93/equipment_management_system --skill verify-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js 16 App Router projects risk pattern drift when pages, layouts, and route segments evolve. This Skill provides a structured verification to ensure params/searchParams usage, server/client component boundaries, and dynamic import practices stay compliant.

Core Features & Use Cases

  • Pattern verification: checks for correct usage of await params and await searchParams in dynamic routes.
  • Component boundaries: validates server vs client component separation and correct use of 'use client' directives.
  • Error & loading patterns: ensures error.tsx and loading.tsx exist where appropriate and are client components.
  • Dynamic import patterns: enforces proper dynamic imports with ssr: false and optional loading components.
  • Proxy convention checks: verifies proxy.ts usage over deprecated middleware.ts where applicable.

Quick Start

Review newly added or modified routes to confirm they follow Next.js 16 App Router conventions.

Frequently Asked Questions about verify-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify Next.js 16 App Router pattern compliance in my project?

You can verify Next.js 16 App Router pattern compliance by checking server/client component boundaries, ensuring proper await params and searchParams usage, and validating error.tsx and loading.tsx presence across dynamic routes.

Why does my Next.js 16 dynamic route fail when accessing searchParams?

Next.js 16 requires await params and await searchParams in dynamic routes. Pattern verification checks ensure these asynchronous values are handled correctly to prevent route rendering failures.

How do I enforce 'use client' directives for error and loading boundaries?

To enforce 'use client' directives, verify that error.tsx and loading.tsx files exist where appropriate and are explicitly marked as client components to maintain proper server/client component boundaries.

Does Next.js 16 still support middleware.ts for route interception?

Next.js 16 App Router conventions favor proxy.ts usage over deprecated middleware.ts. Verifying your route segments ensures adherence to the proxy.ts convention where applicable.

What is the correct pattern for dynamic imports in Next.js 16 App Router?

The correct pattern enforces proper dynamic imports with ssr: false and optional loading components. Verification checks ensure these imports follow Next.js 16 conventions across your routes.

Can I check server and client component separation across modified Next.js routes?

Yes, pattern verification validates server vs client component separation when adding or modifying pages and layouts, ensuring correct use of 'use client' directives and proper component boundaries.