A modern, full-stack template for building decentralized applications on the Internet Computer using Rust backend canisters and Next.js 16 frontend, powered by IC Reactor v3 for type-safe canister interactions.

Click the "Use this template" button at the top of this repository, then:

git clone https://github.com/YOUR_USERNAME/YOUR_NEW_REPO.git
cd YOUR_NEW_REPO
npm install

# Clone the template
npx degit b3hr4d/ic-rust-nextjs my-icp-app

# Navigate to project
cd my-icp-app

# Install dependencies
npm install

# Clone with full history
git clone https://github.com/b3hr4d/ic-rust-nextjs.git my-icp-app
cd my-icp-app

# Remove original git history and start fresh
rm -rf .git
git init

# Install dependencies
npm install

💡 Tip: After cloning, update the project name in package.json, dfx.json, and Cargo.toml to match your project.

• 🚀 Next.js 16 with React 19 & Turbopack
• 🦀 Rust Backend with IC CDK
• ⚡ IC Reactor v3 - Type-safe canister interactions with TanStack Query caching
• 🔐 Internet Identity - Built-in authentication support
• 🎨 Modern Dark UI - Beautiful ICP-themed design

├── backend/             # Rust canister code
│   └── hello/           # Hello world canister
│       ├── Cargo.toml   # Rust dependencies
│       └── src/
│           └── lib.rs   # Canister logic
├── src/
│   ├── components/      # React components (Login, Greeting)
│   ├── declarations/    # Auto-generated canister interface
│   ├── lib/
│   │   ├── reactor.ts   # IC Reactor setup (ClientManager + Reactor)
│   │   └── hooks.ts     # Typed React hooks for canister calls
│   ├── pages/           # Next.js pages
│   └── styles/          # CSS styles
├── dfx.json             # Canister configuration
└── package.json

Before getting started, make sure you have the following installed:

1. Node.js (v18+)
2. DFINITY Canister SDK (dfx)

   sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"

3. Rust

   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
   rustup target add wasm32-unknown-unknown

# Install Node.js dependencies
npm install

# Install Rust tools for canister development
npm run candid:install    # Install candid-extractor
npm run ic-wasm:install   # Install ic-wasm optimizer

# Terminal 1: Start local IC replica
npm run dfx:start

# Terminal 2: Deploy canisters (including Internet Identity)
dfx deploy

# Terminal 3: Start Next.js development server
npm run dev

Open http://localhost:3000 to see the app.

This template uses IC Reactor v3's new patterns for type-safe canister interactions:

import { ClientManager, Reactor } from "@ic-reactor/react"
import { QueryClient } from "@tanstack/react-query"

const queryClient = new QueryClient()
const clientManager = new ClientManager({ queryClient, withProcessEnv: true })

export const helloReactor = new Reactor<_SERVICE>({
  clientManager,
  idlFactory,
  canisterId
})

import { createActorHooks, createAuthHooks } from "@ic-reactor/react"

// Authentication hooks
export const { useAuth, useAgentState } = createAuthHooks(clientManager)

// Canister hooks
export const { useActorQuery, useActorMutation } =
  createActorHooks(helloReactor)

import { useActorMutation } from "lib/hooks"

function Greeting() {
  const { mutate, data, isPending } = useActorMutation({
    functionName: "greet"
  })

  return (
    <button onClick={() => mutate(["World"])}>
      {isPending ? "Loading..." : data || "Click to greet"}
    </button>
  )
}

# Deploy to mainnet (requires cycles)
dfx deploy --network=ic

After cloning, update these files with your project name:

1. package.json - Update name and description
2. dfx.json - Rename canister from hello to your name
3. backend/hello/Cargo.toml - Update package name
4. src/declarations/ - Run npm run dfx:generate to regenerate

1. Create a new directory in backend/your_canister/
2. Add canister configuration to dfx.json
3. Create a new Reactor in src/lib/reactor.ts
4. Generate hooks with createActorHooks()

dfx command not found

# Re-run the install script
sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"

Rust wasm32 target not found

rustup target add wasm32-unknown-unknown

Port 4943 already in use

npm run dfx:stop
npm run dfx:start

Candid generation fails

npm run candid:install
npm run dfx:generate

• IC Reactor Documentation
• DFINITY SDK Documentation
• Rust on IC
• Next.js
• Internet Identity

Contributions are welcome! Please feel free to submit a Pull Request.

MIT License - see LICENSE for details.

Built with ❤️ for the Internet Computer community