Next.js Integration

This example shows how to use IC Reactor in an existing Next.js app that still uses dfx for local deployment and declaration generation.

Features Demonstrated

• Next.js Pages Router: The app lives under src/pages, not the App Router.
• Rust Backend: A local canister under backend/.
• Manual declaration flow: dfx generate output is committed under src/declarations/todo/.
• IC Reactor hooks: createActorHooks wraps a Reactor built from those generated declarations.

Links

Open in StackBlitz Edit and inspect the example

View on GitHub Browse the source code

Setup Guide

cd examples/nextjs
npm run install:all
npm run dfx:start
npm run deploy
npm run generate
npm run dev

Key Integration

src/service/client.ts

export const clientManager = new ClientManager({
  queryClient,
  withProcessEnv: true,
  agentOptions: {
    verifyQuerySignatures: false,
  },
})

src/service/todo.ts

export const todoReactor = new Reactor<_SERVICE>({
  name: "todo",
  clientManager,
  canisterId,
  idlFactory,
})

export const { useActorQuery: useQueryTodo, useActorMutation: useMutateTodo } =
  createActorHooks(todoReactor)

Note

This example is intentionally a manual dfx workflow reference. If you want automatic regeneration on .did changes, use the Vite plugin examples instead.