Generate Optimized Next.js Pages

This skill generates Next.js pages using the App Router architecture (Next.js 13+). Core principles favor the app/ directory over the legacy pages/ directory, server components by default (client components only when interactivity is explicitly needed), file-system routing conventions, colocation of related files, and full TypeScript typing. A basic page exports typed metadata for SEO and a default component receiving typed params/searchParams.

Dynamic routes use generateMetadata() to fetch data asynchronously and produce per-page SEO metadata (including Open Graph tags) before the page component itself fetches and renders the same data as an async server component.

export async function generateMetadata({ params }: BlogPostProps): Promise<Metadata> {
  const post = await getPost(params.slug)
  return { title: post.title, description: post.excerpt, openGraph: { images: [post.image] } }
}

Layout patterns cover a root layout applying a Google Font, templated page titles, and shared nav/footer, plus route-group layouts (e.g. a (dashboard) group) for section-specific chrome like a sidebar without affecting the URL structure. Data fetching in server components uses native fetch() with explicit caching mode (force-cache for static data, no-store for dynamic), and Next.js's file-convention loading.tsx (skeleton UI) and error.tsx (client-component error boundary with a reset action) provide automatic loading and error states per route segment. Client components are marked with 'use client' and used for interactive elements like a controlled search form with local state. SEO and performance optimization covers generateStaticParams() for build-time static generation of dynamic routes, and injecting JSON-LD structured data (e.g. Product schema) via a raw <script type="application/ld+json"> tag. Best practices cover Suspense boundaries for granular loading states, error boundaries at appropriate levels, the Next.js Image component for optimized images, route.ts handlers for API endpoints, streaming for perceived performance, semantic/accessible HTML, typed props throughout, freshness-appropriate caching strategies, and parallel routes for complex multi-section layouts.

Use this skill when building or extending pages in a Next.js App Router project - creating typed pages with SEO metadata, dynamic routes with generateMetadata, shared or route-group layouts, server-component data fetching with proper caching, loading/error states, or structured data for rich search results.

It is not the right fit for Next.js projects still on the legacy pages/ directory (Pages Router conventions differ significantly), or for frameworks other than Next.js where the App Router's file conventions and server/client component model don't apply.

Input: the route/page to build, its data source, and its SEO/interactivity requirements. Output: a typed Next.js page component (server or client as appropriate) with SEO metadata, dynamic route handling with generateMetadata, an appropriate layout, server-side data fetching with caching, loading.tsx/error.tsx states, and structured data where relevant for search visibility.

Built on Next.js's App Router conventions (file-based routing, metadata/generateMetadata, generateStaticParams, route handlers), TypeScript for typed props/interfaces, next/font for font optimization, and next/image for image optimization.

Frontend developers building or extending pages in a Next.js App Router application - particularly those needing typed, SEO-optimized pages with proper server-component data fetching, loading/error states, and structured data.