skills.rest
xabierlameiro
xabierlameiroCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-components

Reference Next.js 16 built-in components with props and TypeScript signatures.

Updated Mar 8, 2026
Search Tags:#web development#frontend#react#components#next.js#app router
One-click install
npx skills add https://github.com/xabierlameiro/price-tracker --skill nextjs-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-components
Source: https://github.com/xabierlameiro/price-tracker/tree/main/.agents/skills/nextjs-components
Command: npx skills add https://github.com/xabierlameiro/price-tracker --skill nextjs-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive reference for Next.js 16's built-in components, ensuring efficient and optimized use of core features for modern web development.

Core Features & Use Cases

  • Component Reference: Detailed information on <Image>, <Link>, <Script>, <Font>, and <Form>.
  • Prop Definitions: Covers all available props, their types, defaults, and requirements.
  • Optimization Insights: Explains the performance benefits and usage patterns for each component.
  • Use Case: When building a new Next.js page, quickly look up the correct props and best practices for implementing an optimized image with next/image or setting up client-side navigation with next/link.

Quick Start

Show me the props for the next/image component.

Frequently Asked Questions about nextjs-components

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

FAQPage Schema
How do I use the Next.js Image component for optimized images in the App Router?▼

The Next.js Image component requires specific props for optimized images in the App Router. You must provide src and alt attributes, and the component handles lazy loading, responsive sizing, and automatic format conversion to improve Core Web Vitals.

What props are available for the Next.js Link component for client-side navigation?▼

The Next.js Link component supports props like href, replace, scroll, prefetch, and legacyBehavior. It enables fast client-side navigation by prefetching linked routes automatically and extending the standard HTML anchor element with TypeScript signatures.

Does Next.js 16 provide a built-in Form component for form submissions?▼

Yes, Next.js 16 includes a built-in Form component. It extends the standard HTML form element to support progressive enhancement, allowing forms to submit and mutate data even before JavaScript loads on the page.

How do I load web fonts in Next.js without layout shift?▼

Next.js provides a built-in Font component to load web fonts without layout shift. It automatically optimizes fonts by self-hosting them and using CSS size-adjust properties, ensuring zero layout shift during page load.

Can I use the Next.js Script component to defer third-party scripts?▼

The Next.js Script component allows precise control over third-party script loading. You can use the strategy prop to set defer, afterInteractive, or lazyOnload loading behaviors to prioritize execution and prevent render blocking.

Related Skills

Explore More Software Engineering Skills→
School-Agent-IncSchool-Agent-Inc
1

web-builder

Scaffold Next.js/React websites with App Router, TypeScript, and Tailwind CSS.

Official
Intermediate
mohamedgshoaibmohamedgshoaib
5

nextjs-performance

Optimize Next.js performance by addressing Core Web Vitals and bundle size.

Community
Advanced
frankxaifrankxai

React & Next.js Patterns

Implement React 19 and Next.js 15 patterns for Server Components, Client Components, and Server Actions.

Community
Advanced
ri-ruri-ru

next-partial-prefetching-adoption

Enable Partial Prefetching in Next.js 16.3 applications via route-level configuration.

Community
Advanced