Nextjs App

対象範囲

本スキルは Next.js の App Router（app/ ディレクトリ）専用のリファレンスである。 Pages Router（pages/ ディレクトリ、getStaticProps / getServerSideProps / getInitialProps 等）は対象外。 Pages Router からの移行手順のみ references/guides/app-router-migration.md に含む。

プラットフォームの実行挙動（Vercel の CDN・ISR インフラ・Edge 実行環境・デプロイ設定）は vercel スキルが担当する。 本スキルは「App Router でどう書くか（API 仕様・ファイル規約）」に徹する。

ディレクトリ構成

skills/nextjs-app/
  SKILL.md
  references/
    getting-started/
      README.md
      installation.md
      project-structure.md
      layouts-and-pages.md
      linking-and-navigating.md
      server-and-client-components.md
      fetching-data.md
      mutating-data.md
      caching.md
      revalidating.md
      error-handling.md
      css.md
      images.md
      fonts.md
      metadata-and-og-images.md
      route-handlers.md
      proxy.md
      deploying.md
      upgrading.md
    guides/
      README.md
      analytics.md
      app-router-migration.md
      authentication.md
      backend-for-frontend.md
      caching-without-cache-components.md
      ci-build-caching.md
      codemods.md
      content-security-policy.md
      css-in-js.md
      custom-server.md
      cypress.md
      debugging.md
      draft-mode.md
      environment-variables.md
      forms.md
      from-create-react-app.md
      from-vite.md
      incremental-static-regeneration.md
      instrumentation.md
      internationalization.md
      jest.md
      json-ld.md
      lazy-loading.md
      local-development.md
      mdx.md
      memory-usage.md
      multi-tenant.md
      multi-zones.md
      open-telemetry.md
      package-bundling.md
      playwright.md
      ppr-platform-guide.md
      prefetching.md
      production-checklist.md
      progressive-web-apps.md
      redirecting.md
      sass.md
      scripts.md
      self-hosting.md
      server-actions.md
      single-page-applications.md
      static-exports.md
      streaming.md
      tailwind-v3-css.md
      testing.md
      third-party-libraries.md
      version-14.md
      version-15.md
      version-16.md
      videos.md
      vitest.md
    api-reference/
      functions/
        README.md
        after.md
        cacheLife.md
        cacheTag.md
        unstable_catchError.md
        connection.md
        cookies.md
        draftMode.md
        fetch.md
        forbidden.md
        generateImageMetadata.md
        generateMetadata.md
        generateSitemaps.md
        generateStaticParams.md
        generateViewport.md
        headers.md
        ImageResponse.md
        NextRequest.md
        NextResponse.md
        not-found.md
        permanentRedirect.md
        redirect.md
        refresh.md
        revalidatePath.md
        revalidateTag.md
        unauthorized.md
        unstable_cache.md
        unstable_noStore.md
        unstable_rethrow.md
        updateTag.md
        useLinkStatus.md
        use-params.md
        usePathname.md
        useReportWebVitals.md
        useRouter.md
        use-search-params.md
        use-selected-layout-segment.md
        use-selected-layout-segments.md
        userAgent.md
      file-conventions/
        README.md
        default.md
        dynamic-routes.md
        error.md
        forbidden.md
        instrumentation.md
        instrumentation-client.md
        intercepting-routes.md
        layout.md
        loading.md
        mdx-components.md
        not-found.md
        page.md
        parallel-routes.md
        proxy.md
        public-folder.md
        route.md
        route-groups.md
        src-folder.md
        template.md
        unauthorized.md
        metadata.md
        metadata/
          README.md
          app-icons.md
          manifest.md
          opengraph-image.md
          robots.md
          sitemap.md
        route-segment-config.md
        route-segment-config/
          README.md
          dynamicParams.md
          maxDuration.md
          preferredRegion.md
          runtime.md
      components/
        README.md
        font.md
        form.md
        image.md
        link.md
        script.md
      directives/
        README.md
        use-cache.md
        use-cache-private.md
        use-cache-remote.md
        use-client.md
        use-server.md
      config/
        README.md
        overview.md
        images.md
        headers-redirects-rewrites.md
        routing.md
        build-output.md
        caching.md
        bundling.md
        react-experimental.md
        dev-environment.md
        deployment.md
        env-and-checks.md
        typescript.md
        eslint.md
        create-next-app.md
        next-cli.md
      misc/
        README.md
        adapters.md
        adapters-configuration.md
        adapters-creating-an-adapter.md
        adapters-api-reference.md
        adapters-testing-adapters.md
        adapters-routing-with-next-routing.md
        adapters-implementing-ppr-in-an-adapter.md
        adapters-runtime-integration.md
        adapters-invoking-entrypoints.md
        adapters-output-types.md
        adapters-routing-information.md
        adapters-use-cases.md
        edge-runtime.md
        turbopack.md
  samples/
    README.md
    server-component-data-fetching.md
    server-actions-form.md
    dynamic-route-static-params.md
    route-file-conventions.md
    route-handler-get-post.md
    metadata-and-og-image.md
    on-demand-revalidation.md
    streaming-with-suspense.md
    parallel-intercepting-routes-modal.md
  scripts/
    README.md
    install.md
    cli.md
    codemod.md
    telemetry.md
    info.md
    bundle-analyzer.md
    env.md

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

1. まず対象が App Router の話題か確認する（Pages Router の API は本スキル対象外）
2. 下記マッピング表でタスクに対応するカテゴリを探す
3. そのカテゴリの README.md（references/{category}/README.md または samples/README.md / scripts/README.md）を参照して目的のページを特定する
4. 該当ページの .md を Read して詳細を確認する
5. デプロイ先の CDN 挙動・ISR インフラ・Edge 実行環境などプラットフォーム側の話題は vercel スキルを参照する

タスク → カテゴリ マッピング

基本概念・セットアップ

機能別ガイド・運用

関数 API

ファイル規約

組み込みコンポーネント・ディレクティブ

設定・ツール

実例・コマンド

補足