skills.rest
DiscourseGraphs
DiscourseGraphsOFFICIAL
Explore all skills by this author →
GitHub

next-best-practices

Validates Next.js App Router migrations and flags deprecated Pages Router patterns.

44|7|Updated Oct 16, 2024
Search Tags:#performance#web development#react#migration#nextjs#app router
One-click install
npx skills add https://github.com/DiscourseGraphs/discourse-graph --skill next-best-practices-discoursegraphs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/DiscourseGraphs/discourse-graph/tree/main/skills/next-best-practices
Command: npx skills add https://github.com/DiscourseGraphs/discourse-graph --skill next-best-practices-discoursegraphs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill resolves the complexity of migrating from Pages Router to App Router, ensuring your Next.js applications follow modern performance, security, and architectural standards.

Core Features & Use Cases

  • Migration Guidance: Automatically detects legacy patterns like getServerSideProps and provides App Router alternatives.
  • Best Practice Enforcement: Validates RSC boundaries, async API usage, and correct file conventions.
  • Use Case: Use this Skill to audit your codebase for deprecated patterns, optimize font and image loading, or implement correct error handling and metadata strategies.

Quick Start

Ask the next-best-practices skill to audit your current directory for legacy Pages Router patterns and suggest necessary App Router migrations.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I migrate from Next.js Pages Router to App Router?▼

Migrating from Next.js Pages Router to App Router involves detecting legacy patterns like getServerSideProps and replacing them with modern React Server Component alternatives for routing and data fetching.

What are the best practices for React Server Components in Next.js App Router?▼

Next.js App Router best practices for React Server Components include validating RSC boundaries, enforcing correct async API usage, and following established file conventions to maintain optimal architectural standards.

How do I optimize Next.js App Router performance with caching and image directives?▼

Optimize Next.js App Router performance by implementing correct caching directives, metadata strategies, and image optimization techniques to ensure optimal rendering and efficient resource loading.

Can I audit my Next.js codebase for deprecated Pages Router patterns?▼

You can audit a Next.js codebase for deprecated Pages Router patterns by scanning the current directory to identify legacy functions like getServerSideProps and suggesting necessary App Router migrations.

Why does my Next.js App Router migration break data fetching?▼

Next.js App Router migration breaks data fetching when React Server Component boundaries are violated or async APIs are used incorrectly, requiring validation against modern App Router standards to resolve.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

project-conventions

Enforce naming and folder structure conventions for React TypeScript admin templates.

Community
Basic
quanganh208quanganh208

ck:web-frameworks

Build Next.js App Router and Turborepo monorepos with caching and optimization.

Community
Advanced
loayalsaid1loayalsaid1

next-best-practices

Guide Next.js development with best practices for file conventions and data fetching.

Community
Advanced
sckrollsckroll

nextjs-app-router-fundamentals

Guide migration from Pages Router to Next.js App Router with layouts and routing.

Community
Intermediate