fix: nextjs-app-prefetching

[YukiOnishi1129]

🎯 Changes

Fixed Next.js App Router prefetching example to properly implement server-side data prefetching with React Query.

Key Changes

1. Fixed server component prefetching in app/page.tsx:

   • Made the Home component async to support server-side data fetching
   • Changed from void queryClient.prefetchQuery() to await queryClient.prefetchQuery() to ensure data is prefetched before rendering
   • Fixed import path for PokemonInfo component

2. Added proper loading and error states in app/pokemon-info.tsx:

   • Added loading state handling (though useSuspenseQuery doesn't actually need it)
   • Added error state handling for better UX

3. Cleaned up imports in app/providers.tsx:

   • Changed from import type * as React to import type { ReactNode }
   • Fixed code formatting

Why these changes matter

• The example now correctly demonstrates server-side prefetching in Next.js App Router
• Data is properly hydrated on the client without additional fetches
• Better developer experience with proper TypeScript imports

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• New Features

  • Added visible loading and error states to Pokémon details and a user-facing error screen with a retry action.

• Bug Fixes

  • Home now awaits prefetching, reducing flicker and ensuring data is ready on first render.

• Refactor

  • Simplified provider children typing for clarity.
  • Standardized component import paths for consistency.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8a204c0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

Home is now an async page that awaits prefetchQuery; PokemonInfo gains explicit loading and error render paths; Providers narrows children type to a type-only ReactNode import; a client-side Error component is added; one PokemonInfo import path changed to an absolute alias.

Changes

Cohort / File(s)	Summary
Prefetch control flow in Home examples/react/nextjs-app-prefetching/app/page.tsx	Export changed to async function Home. prefetchQuery is now awaited instead of fire-and-forget. PokemonInfo import path updated to an absolute alias.
Component loading/error rendering examples/react/nextjs-app-prefetching/app/pokemon-info.tsx	useSuspenseQuery results (isLoading, error) are handled with early returns: "Loading..." and "Error: {message}", preserving existing success rendering.
Type import and prop typing examples/react/nextjs-app-prefetching/app/providers.tsx	Added import type { ReactNode } from 'react' and changed Providers props from { children: React.ReactNode } to { children: ReactNode }.
Client error UI examples/react/nextjs-app-prefetching/app/error.tsx	New client component Error exported as default; accepts { error, reset }, renders error message and "Try again" button that calls reset.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant Next as Next.js App Router
  participant Home as Home (page.tsx)
  participant QC as QueryClient
  participant API as Data Source

  U->>Next: Request /
  Next->>Home: Render (async)
  rect rgba(200,240,255,0.25)
    note over Home: Await prefetch before returning JSX
    Home->>QC: prefetchQuery(key, fetchFn)
    QC->>API: fetch data
    API-->>QC: data
    QC-->>Home: cache populated
  end
  Home-->>Next: JSX (includes PokemonInfo)
  Next-->>U: HTML

Loading

sequenceDiagram
  autonumber
  participant PI as PokemonInfo
  participant QC as QueryClient
  participant API as Data Source

  PI->>QC: useSuspenseQuery(key, fetchFn)
  alt Loading
    PI-->>PI: Render "Loading..."
  else Error
    PI-->>PI: Render "Error: {message}"
  else Success
    QC->>API: (may use cache / fetch)
    PI-->>PI: Render data view
  end

Loading

sequenceDiagram
  autonumber
  participant Next as Next.js Error Boundary
  participant Err as Error (client)
  participant Dev as Developer / User

  Next->>Err: Render with { error, reset }
  Err->>Dev: Display message + "Try again" button
  Dev->>Err: Click "Try again"
  Err->>Next: call reset()

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I nibbled on bytes beneath async moonlight,
Awaited prefetch—no hurried flight.
Loading signs glow, errors shown true,
Types snug like carrots in tidy queue.
Hop! Reset pressed — the UI feels new. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly identifies that this pull request fixes the Next.js app prefetching example by naming the relevant example directory, directly reflecting the main intent without extraneous detail.
Description Check	✅ Passed	The description adheres to the repository’s template by including the 🎯 Changes section with detailed motivations and breakdown of key modifications, the ✅ Checklist confirming adherence to contributing and testing guidelines, and the 🚀 Release Impact section with correct selections.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 559fc0a and 8a204c0.

📒 Files selected for processing (1)

• examples/react/nextjs-app-prefetching/app/error.tsx (1 hunks)

🧰 Additional context used

🪛 Biome (2.1.2)

examples/react/nextjs-app-prefetching/app/error.tsx

[error] 3-3: Do not shadow the global "Error" property.

Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.

(lint/suspicious/noShadowRestrictedNames)

🔇 Additional comments (1)

examples/react/nextjs-app-prefetching/app/error.tsx (1)

1-17: LGTM! Correct Next.js error boundary implementation.

The error component correctly implements the Next.js App Router error boundary pattern with the required 'use client' directive, proper prop types, and functional error UI with retry capability.

Regarding the static analysis warning about the function name shadowing the global Error: while technically valid, naming the exported function Error is a common Next.js convention seen in their documentation. Since this is a default export in an example directory and the component doesn't reference the global Error constructor, the shadowing has no practical impact here.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 36ece87 and 559fc0a.

📒 Files selected for processing (3)

• examples/react/nextjs-app-prefetching/app/page.tsx (1 hunks)
• examples/react/nextjs-app-prefetching/app/pokemon-info.tsx (1 hunks)
• examples/react/nextjs-app-prefetching/app/providers.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (3)

examples/react/nextjs-app-prefetching/app/pokemon-info.tsx (1)

examples/react/nextjs-app-prefetching/app/pokemon.ts (1)

• pokemonOptions (3-10)

examples/react/nextjs-app-prefetching/app/providers.tsx (1)

integrations/react-next-15/app/providers.tsx (1)

• Providers (26-39)

examples/react/nextjs-app-prefetching/app/page.tsx (2)

examples/react/nextjs-app-prefetching/app/get-query-client.ts (1)

• getQueryClient (25-37)

examples/react/nextjs-app-prefetching/app/pokemon.ts (1)

• pokemonOptions (3-10)

🔇 Additional comments (2)

examples/react/nextjs-app-prefetching/app/providers.tsx (1)

4-8: LGTM: Cleaner type-only import.

The change to ReactNode with a type-only import is idiomatic and preferred. Note that this differs from integrations/react-next-15/app/providers.tsx which uses React.ReactNode, but different examples having different styles is acceptable.

examples/react/nextjs-app-prefetching/app/page.tsx (1)

6-6: LGTM: Absolute import path.

The change to an absolute alias path (@/app/pokemon-info) is consistent with other imports in the file and improves maintainability.

[TkDodo]

this example is for streaming so we don’t await the promise on the server on purpose. also, suspense doesn’t need error/loading handling the component. not sure what this PR is trying to do ...