skills.rest
ngxtm
ngxtmCOMMUNITY
Explore all skills by this author →
GitHub

Next.js Optimization

Optimize Next.js applications with image, font, and metadata loading strategies.

Updated Jan 22, 2026
Search Tags:#performance#web vitals#optimization#nextjs#seo#image optimization#font optimization
One-click install
npx skills add https://github.com/ngxtm/skill-rule --skill next-js-optimization-ngxtm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Next.js Optimization
Source: https://github.com/ngxtm/skill-rule/tree/main/rules/nextjs/optimization
Command: npx skills add https://github.com/ngxtm/skill-rule --skill next-js-optimization-ngxtm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the critical need to optimize Next.js applications for speed, user experience, and search engine visibility by leveraging built-in optimization features.

Core Features & Use Cases

  • Image Optimization: Automatic resizing, lazy loading, and format conversion for images using next/image.
  • Font Optimization: Efficiently self-hosting fonts to prevent layout shifts using next/font.
  • Metadata Management: Streamlining SEO and social sharing with static and dynamic metadata generation.
  • Script Loading: Controlling third-party script loading strategies to improve initial page load times.
  • Use Case: Enhance your e-commerce product pages by ensuring images load quickly, fonts don't cause layout shifts, and critical SEO metadata is present, leading to better user engagement and search rankings.

Quick Start

Apply Next.js optimization strategies to the provided layout and page components.

Frequently Asked Questions about Next.js Optimization

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

FAQPage Schema
How do I optimize Next.js images to improve Core Web Vitals?▼

Optimize Next.js images by using the next/image component for automatic resizing, lazy loading, and format conversion to improve Core Web Vitals like LCP and CLS.

What's the best way to prevent font layout shifts in Next.js?▼

Prevent font layout shifts in Next.js by self-hosting fonts with the next/font component, which efficiently loads fonts and helps improve your Cumulative Layout Shift score.

How do I manage dynamic metadata for SEO in Next.js?▼

Manage dynamic SEO metadata in Next.js by using the metadata export to streamline static and dynamic metadata generation, improving search engine visibility and social sharing.

How do I control third-party script loading in Next.js?▼

Control third-party script loading in Next.js to improve initial page load times by implementing specific script loading strategies that prevent render-blocking.

Can I analyze my Next.js bundle to find performance bottlenecks?▼

Yes, you can analyze your Next.js bundle size to identify performance bottlenecks, addressing dynamic rendering and bundle efficiency for enhanced application speed.

Why does my Next.js app have a poor LCP score?▼

A poor Next.js LCP score often results from unoptimized images, render-blocking scripts, or inefficient font loading, which you can fix using next/image and next/font components.

Related Skills

Explore More Software Engineering Skills→
Let-s-internLet-s-intern
8

vercel-react-best-practices

Apply performance optimization guidelines to React and Next.js codebases.

Official
Advanced
deomiarndeomiarn

performance-audit

Audit website performance with Lighthouse against Core Web Vitals targets.

Community
Intermediate
ngxtmngxtm

React Performance

Optimize React applications by eliminating waterfalls, reducing bundle size, and minimizing re-renders.

Community
Advanced
deomiarndeomiarn

webp-images

Convert page images to WebP with responsive variants for Next.js Image components.

Community
Advanced