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 StackBlitzEdit and run in your browser

View on GitHubBrowse the source code

Key Code

"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>
  )
}