agent-skills-nextjs-page

Next.js Page

Full detail in this skill's references/nextjs.md. Load agent-skills-conventions for component, styling, and boundary rules. Match the repo's layout wrappers, routes config location, and path aliases.

Recipe

1. Page = thin server component (export default function) that only composes named section components:

export default function Home() {
  return (
    <>
      <section><Hero /></section>
      <section><WhatIDo /></section>
    </>
  );
}

Wrap sections in the project's layout/container component when one exists.

1. Sections are server components (kebab-case files, named arrow-const exports — colocated with the route/feature or in shared components/ when cross-feature). Content is a typed as const array mapped to markup — editing copy never means editing JSX structure. Keep the tree flat: page → section → primitive; no pass-through wrappers, no prop drilling past one intermediate.

2. Interactivity goes to the leaves. A section needing animation imports MotionDiv from the components/motion.tsx client boundary — it does not become a client component itself. Icons are imported directly from the project's icon library (they render fine server-side).

3. Metadata: root layout owns metadataBase and title: { template: '%s - Site Name', default: '...' }; the page exports a static Metadata object with bare title, description, full openGraph + twitter, and alternates.canonical. Repeated route families go through a createPageMetadata(config) factory plus a JSON-LD factory injected as a plain <script type="application/ld+json"> with escaped JSON (see references/nextjs.md for snippets).

4. Routing: group by domain with (folder) route groups, each with its own layout.tsx. A self-contained feature owns its components/, lib/, hooks/, colocated tests.

5. Register the route in the repo's typed routes/navigation config — nav and sitemap.ts both derive from the same source.