skills.rest
almiavicas
almiavicasCOMMUNITY
Explore all skills by this author →
𝕏@toy_lalaGitHub

next-best-practices

Guide Next.js development with file conventions, component boundaries, and data handling.

Updated Mar 17, 2026
Search Tags:#best practices#error handling#next.js#bundling#image optimization#async patterns#self-hosting#route handlers#data patterns#file conventions
One-click install
npx skills add https://github.com/almiavicas/nextjs-django-template --skill next-best-practices-almiavicas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/almiavicas/nextjs-django-template/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/almiavicas/nextjs-django-template --skill next-best-practices-almiavicas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to Next.js development, offering best practices, file conventions, and patterns to enhance development efficiency and code quality.

Core Features & Use Cases

  • File Conventions: Learn about project structure, file naming, and special files in Next.js.
  • RSC Boundaries: Identify and prevent invalid patterns in Server/Client component boundaries.
  • Async Patterns: Navigate Next.js 15+ async API changes for efficient data handling.
  • Error Handling: Implement effective error handling strategies for robust applications.
  • Data Patterns: Choose the right data fetching pattern for various scenarios.
  • Route Handlers: Create API endpoints with route.ts files.
  • Hydration Errors: Debug and fix React hydration mismatch errors.
  • Image Optimization: Optimize images for better performance and SEO.
  • Font Optimization: Learn to optimize fonts for web performance and accessibility.
  • Bundling: Address common bundling issues with third-party packages.
  • Self-Hosting: Deploy Next.js independently of Vercel.
  • Debugging: Use advanced debugging techniques for Next.js applications.
  • Parallel & Intercepting Routes: Implement modal patterns and parallel routes.
  • Metadata & OG Images: Add SEO metadata and generate Open Graph images.
  • SEO Best Practices: Follow best practices for search engine optimization.
  • OG Image Generation: Create dynamic Open Graph images with next/og.
  • Viewport: Customize viewport settings for responsive design.

Quick Start

To get started with Next.js best practices, review the 'file-conventions.md' file to understand the recommended project structure and file naming conventions.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
What are the recommended file conventions for structuring a Next.js project?▼

Next.js file conventions dictate project structure through specialized files for routing, error handling, and data fetching. Reviewing file naming conventions and special files helps organize project directories, optimize component boundaries, and maintain robust code.

How do I handle async API changes for data fetching in Next.js 15?▼

Next.js 15 async API changes require careful handling of data fetching patterns to ensure efficient data loading. This Skill guides navigating these asynchronous patterns to choose the right data fetching strategy for various server-side scenarios.

What is the best way to fix React hydration errors in Next.js applications?▼

Fixing React hydration errors involves debugging mismatches between server-rendered and client-rendered HTML. This Skill provides techniques to identify and resolve hydration mismatch errors to ensure robust and stable Next.js applications.

Can I deploy and self-host a Next.js application independently of Vercel?▼

Self-hosting Next.js independently of Vercel is fully supported. This Skill provides deployment insights and best practices for configuring your Next.js application to run robustly on your own infrastructure.

How do I generate dynamic Open Graph images and metadata for Next.js SEO?▼

Generate dynamic Open Graph images using the `next/og` module to improve Next.js SEO. This Skill covers adding SEO metadata, customizing viewport settings, and following best practices for search engine optimization.

How do I prevent invalid patterns in Server and Client component boundaries?▼

Preventing invalid patterns in Server and Client component boundaries requires understanding RSC boundaries within Next.js. This Skill helps identify and avoid common architectural mistakes to maintain robust and maintainable code.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
Just-mpmJust-mpm

firebase-app-hosting

Configure, deploy, and troubleshoot Firebase App Hosting with Next.js.

Community
Advanced
vinhnguyenn020325-cmdvinhnguyenn020325-cmd

next-best-practices

Provide best practices for building Next.js applications.

Community
Advanced
UlanxxUlanxx

setup-deploy

Detect hosting platforms and persist deployment configuration to CLAUDE.md.

Community
Advanced