# Next.js App Router

This example demonstrates a hydration-safe IC Reactor setup in a Next.js App
Router application. Browser-only IC Reactor state stays inside client
providers, while one `ClientManager` is shared by authentication and a dynamic
ledger reactor.

## Features Demonstrated

- Next.js App Router with client-side IC Reactor providers
- Stable `QueryClient` creation across server and client rendering
- Internet Identity authentication through `AuthenticationManager`
- Dynamic ICRC ledger queries against live mainnet canisters
- Shared `ClientManager` between auth and canister interaction

## Links

[Open in StackBlitz](https://stackblitz.com/github/b3pay/ic-reactor/tree/main/examples/nextjs-app-router?embed=1&theme=dark&file=src/app/page.tsx)
  [View on GitHub](https://github.com/b3pay/ic-reactor/tree/main/examples/nextjs-app-router)
## Key Code

```tsx
"use client"

export function ICReactorProvider({ children }: { children: React.ReactNode }) {
  const queryClient = getQueryClient()

  const [authContext] = useState(() => {
    const clientManager = new ClientManager({
      queryClient,
      agentOptions: { host: "https://ic0.app" },
    })
    const authentication = new AuthenticationManager({ clientManager })
    return { clientManager, authentication }
  })

  return (
    <QueryClientProvider client={queryClient}>
      <AuthContext.Provider value={authContext}>
        {children}
      </AuthContext.Provider>
    </QueryClientProvider>
  )
}
```

**Note:** This demo targets mainnet canisters through `https://ic0.app`. It does not
  rely on local `ic_env` injection or a local Internet Identity canister.