{"_id":"@0xbojack/fhevm-nextjs","_rev":"2-d9022a66f1cba214094f2658423ee2fd","name":"@0xbojack/fhevm-nextjs","dist-tags":{"latest":"0.2.2"},"versions":{"0.2.1":{"name":"@0xbojack/fhevm-nextjs","version":"0.2.1","keywords":["fhevm","fhe","encryption","nextjs","next.js","react","hooks","privacy","zama","blockchain"],"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","_id":"@0xbojack/fhevm-nextjs@0.2.1","maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"homepage":"https://github.com/huaigu/fhevm-sdk/tree/main/packages/nextjs#readme","bugs":{"url":"https://github.com/huaigu/fhevm-sdk/issues"},"dist":{"shasum":"b58c55e3c1805d4a5da525f371f99841b92d9bed","tarball":"https://registry.npmjs.org/@0xbojack/fhevm-nextjs/-/fhevm-nextjs-0.2.1.tgz","fileCount":8,"integrity":"sha512-MjprpmBI9izfeX92FPskHguKl/475UZ2JYpJ8q5q3deaq399BxvmAX5Nlldm2AiQkDtgFGfsjvF6vDuXQe85QQ==","signatures":[{"sig":"MEUCIASutuR6nuV1WZAvo643oZ9PW8J1WLB7SjoWju959dLVAiEA/74KjmhqScHvnO8cpR+88LBI+LlMkGGBruwxEdZ+jFU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13168},"main":"./dist/index.js","type":"module","types":"./src/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./src/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"ec27c715ab2af5df43030543383780607ec34eec","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","prepublishOnly":"pnpm build"},"_npmUser":{"name":"0xbojack","email":"coderbojack@gmail.com"},"repository":{"url":"git+https://github.com/huaigu/fhevm-sdk.git","type":"git","directory":"packages/nextjs"},"_npmVersion":"10.8.2","description":"Next.js adapter for FHEVM SDK with built-in client-side directives","directories":{},"sideEffects":false,"_nodeVersion":"20.19.4","dependencies":{"@0xbojack/fhevm-react":"^0.2.1"},"_hasShrinkwrap":false,"devDependencies":{"next":"^15.0.0","tsup":"^8.5.0","react":"^18.3.1","typescript":"^5.9.2","@types/node":"^22.7.5","@types/react":"^18.3.18"},"peerDependencies":{"next":"^14.0.0 || ^15.0.0","react":"^18.0.0 || ^19.0.0","ethers":"^6.13.7"},"_npmOperationalInternal":{"tmp":"tmp/fhevm-nextjs_0.2.1_1761117997687_0.19977695796372674","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@0xbojack/fhevm-nextjs","version":"0.2.2","description":"Next.js adapter for FHEVM SDK with built-in client-side directives","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./src/index.d.ts","exports":{".":{"types":"./src/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"engines":{"node":">=18.0.0"},"sideEffects":false,"keywords":["fhevm","fhe","encryption","nextjs","next.js","react","hooks","privacy","zama","blockchain"],"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","repository":{"type":"git","url":"git+https://github.com/huaigu/fhevm-sdk.git","directory":"packages/nextjs"},"homepage":"https://github.com/huaigu/fhevm-sdk/tree/main/packages/nextjs#readme","bugs":{"url":"https://github.com/huaigu/fhevm-sdk/issues"},"dependencies":{"@0xbojack/fhevm-react":"^0.2.2"},"peerDependencies":{"next":"^14.0.0 || ^15.0.0","react":"^18.0.0 || ^19.0.0","ethers":"^6.13.7"},"devDependencies":{"@types/node":"^22.7.5","@types/react":"^18.3.18","next":"^15.0.0","react":"^18.3.1","tsup":"^8.5.0","typescript":"^5.9.2"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@0xbojack/fhevm-nextjs@0.2.2","_integrity":"sha512-vUeQcmIdnvUqVvfdpu1P9KhnIjBHKZWCdpYVeUcuNowrwm3WpIEosSEI85Fgtev3LMwj6xETKcng6/rg8AsZsg==","_resolved":"/tmp/9bb3bd67dcc8b23003299218554348df/0xbojack-fhevm-nextjs-0.2.2.tgz","_from":"file:0xbojack-fhevm-nextjs-0.2.2.tgz","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-vUeQcmIdnvUqVvfdpu1P9KhnIjBHKZWCdpYVeUcuNowrwm3WpIEosSEI85Fgtev3LMwj6xETKcng6/rg8AsZsg==","shasum":"75dc04aca8c6d883b0e7722cba80c4307563e0d3","tarball":"https://registry.npmjs.org/@0xbojack/fhevm-nextjs/-/fhevm-nextjs-0.2.2.tgz","fileCount":8,"unpackedSize":13131,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCyfiC7zvXJD0VmeErS/pRn+86thbZCG4gAUoPl5xlV0wIgOnqTG1O5ms1hF5aB60z8MpkiCh/h4y4n7/m9Mse0HtE="}]},"_npmUser":{"name":"0xbojack","email":"coderbojack@gmail.com"},"directories":{},"maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fhevm-nextjs_0.2.2_1761201707863_0.6247768540609195"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-22T07:26:37.548Z","modified":"2025-10-23T06:41:48.232Z","0.2.1":"2025-10-22T07:26:37.902Z","0.2.2":"2025-10-23T06:41:48.051Z"},"bugs":{"url":"https://github.com/huaigu/fhevm-sdk/issues"},"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","homepage":"https://github.com/huaigu/fhevm-sdk/tree/main/packages/nextjs#readme","keywords":["fhevm","fhe","encryption","nextjs","next.js","react","hooks","privacy","zama","blockchain"],"repository":{"type":"git","url":"git+https://github.com/huaigu/fhevm-sdk.git","directory":"packages/nextjs"},"description":"Next.js adapter for FHEVM SDK with built-in client-side directives","maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"readme":"# @0xbojack/fhevm-nextjs\n\nNext.js adapter for FHEVM SDK with built-in `'use client'` directives. This package provides the same React hooks as `@0xbojack/fhevm-react`, but automatically handles client-side rendering for Next.js applications.\n\n## Why Use This Package?\n\nIn Next.js, FHEVM operations require client-side execution. With `@0xbojack/fhevm-react`, you need to manually add `'use client'` to every component:\n\n```tsx\n// ❌ With @0xbojack/fhevm-react - requires manual 'use client'\n'use client'\n\nimport { useFhevm } from '@0xbojack/fhevm-react'\n\nexport default function MyComponent() {\n const { instance } = useFhevm()\n return
...
\n}\n```\n\nWith `@0xbojack/fhevm-nextjs`, the `'use client'` directive is already included:\n\n```tsx\n// ✅ With @0xbojack/fhevm-nextjs - no manual directive needed!\nimport { useFhevm } from '@0xbojack/fhevm-nextjs'\n\nexport default function MyComponent() {\n const { instance } = useFhevm()\n return
...
\n}\n```\n\n## Installation\n\n```bash\nnpm install @0xbojack/fhevm-nextjs ethers\n# or\npnpm add @0xbojack/fhevm-nextjs ethers\n# or\nyarn add @0xbojack/fhevm-nextjs ethers\n```\n\n## Quick Start\n\n### 1. Create FHEVM Provider (App Router)\n\n```tsx\n// app/providers.tsx\nimport { FhevmProvider } from '@0xbojack/fhevm-nextjs'\nimport { ReactNode } from 'react'\n\nexport function Providers({ children }: { children: ReactNode }) {\n return (\n \n {children}\n \n )\n}\n```\n\n### 2. Add Provider to Layout\n\n```tsx\n// app/layout.tsx\nimport { Providers } from './providers'\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n {children}\n \n \n )\n}\n```\n\n### 3. Use FHEVM Hooks in Components\n\n```tsx\n// app/page.tsx (or any component)\nimport { useFhevm, useEncrypt, useDecrypt } from '@0xbojack/fhevm-nextjs'\nimport { useEffect } from 'react'\nimport { BrowserProvider } from 'ethers'\n\nexport default function EncryptPage() {\n const { instance, status, init } = useFhevm()\n const { encrypt, isEncrypting } = useEncrypt()\n const { decrypt, isDecrypting, results } = useDecrypt()\n\n useEffect(() => {\n async function initFhevm() {\n if (typeof window !== 'undefined' && window.ethereum) {\n const provider = new BrowserProvider(window.ethereum)\n await init({ provider })\n }\n }\n initFhevm()\n }, [init])\n\n const handleEncrypt = async () => {\n if (!instance) return\n\n const encrypted = await encrypt({\n value: 42,\n type: 'euint32',\n contractAddress: '0x...',\n userAddress: '0x...',\n })\n\n console.log('Encrypted:', encrypted)\n }\n\n return (\n
\n

FHEVM Encryption

\n

Status: {status}

\n \n
\n )\n}\n```\n\n## API Reference\n\nThis package re-exports all hooks and types from `@0xbojack/fhevm-react` and `@0xbojack/fhevm-core`:\n\n### Hooks\n\n- `useFhevm()` - Initialize and manage FHEVM instance\n- `useEncrypt()` - Encrypt data for on-chain computation\n- `useDecrypt()` - Decrypt encrypted data\n\n### Components\n\n- `FhevmProvider` - Context provider for FHEVM instance\n\n### Types\n\nAll TypeScript types from core and react packages are available:\n\n```tsx\nimport type {\n // Core types\n FhevmConfig,\n FhevmStatus,\n EncryptedType,\n EncryptParams,\n DecryptRequest,\n // React hook types\n UseFhevmResult,\n UseEncryptResult,\n UseDecryptResult,\n} from '@0xbojack/fhevm-nextjs'\n```\n\n## Next.js App Router Example\n\n### Complete Example with RainbowKit\n\n```tsx\n// app/providers.tsx\n'use client'\n\nimport { FhevmProvider } from '@0xbojack/fhevm-nextjs'\nimport { IndexedDBStorage } from '@0xbojack/fhevm-core/storage'\nimport { WagmiProvider } from 'wagmi'\nimport { RainbowKitProvider } from '@rainbow-me/rainbowkit'\nimport { config } from './wagmi'\n\nexport function Providers({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n```\n\n```tsx\n// app/page.tsx\nimport { useFhevm, useEncrypt } from '@0xbojack/fhevm-nextjs'\nimport { useAccount, useWalletClient } from 'wagmi'\nimport { useEffect } from 'react'\n\nexport default function Home() {\n const { address } = useAccount()\n const { data: walletClient } = useWalletClient()\n const { instance, status, init } = useFhevm()\n const { encrypt } = useEncrypt()\n\n useEffect(() => {\n if (walletClient) {\n init({ provider: walletClient })\n }\n }, [walletClient, init])\n\n return (\n
\n

FHEVM + Next.js

\n

Status: {status}

\n

Connected: {address}

\n
\n )\n}\n```\n\n## Next.js Pages Router Example\n\n```tsx\n// pages/_app.tsx\nimport type { AppProps } from 'next/app'\nimport { FhevmProvider } from '@0xbojack/fhevm-nextjs'\nimport { IndexedDBStorage } from '@0xbojack/fhevm-core/storage'\n\nexport default function App({ Component, pageProps }: AppProps) {\n return (\n \n \n \n )\n}\n```\n\n```tsx\n// pages/index.tsx\nimport { useFhevm, useEncrypt } from '@0xbojack/fhevm-nextjs'\nimport { useEffect } from 'react'\nimport { BrowserProvider } from 'ethers'\n\nexport default function Home() {\n const { instance, status, init } = useFhevm()\n\n useEffect(() => {\n if (typeof window !== 'undefined' && window.ethereum) {\n const provider = new BrowserProvider(window.ethereum)\n init({ provider })\n }\n }, [init])\n\n return (\n
\n

FHEVM Next.js

\n

Status: {status}

\n
\n )\n}\n```\n\n## Differences from @0xbojack/fhevm-react\n\n| Feature | @0xbojack/fhevm-react | @0xbojack/fhevm-nextjs |\n|---------|----------------------|------------------------|\n| **Framework** | React (CRA, Vite) | Next.js (App/Pages Router) |\n| **`'use client'` directive** | ❌ Manual required | ✅ Built-in |\n| **SSR Support** | N/A | ✅ Handles client-side automatically |\n| **API** | Identical | Identical |\n| **Bundle Size** | Lighter (no Next.js deps) | Slightly larger |\n\n## When to Use Each Package\n\n- **Use `@0xbojack/fhevm-nextjs`**: Building a Next.js application\n- **Use `@0xbojack/fhevm-react`**: Building with Create React App, Vite, or other React frameworks\n- **Use `@0xbojack/fhevm-core`**: Framework-agnostic usage (Node.js, vanilla JS)\n\n## Troubleshooting\n\n### \"window is not defined\" Error\n\nMake sure you're initializing FHEVM only on the client side:\n\n```tsx\nuseEffect(() => {\n if (typeof window !== 'undefined') {\n // Initialize FHEVM here\n }\n}, [])\n```\n\n### Hydration Errors\n\nIf you see hydration mismatches, ensure FHEVM operations happen after hydration:\n\n```tsx\nconst [mounted, setMounted] = useState(false)\n\nuseEffect(() => {\n setMounted(true)\n}, [])\n\nif (!mounted) return null\n\nreturn \n```\n\n## Examples\n\nSee full working examples in our monorepo:\n\n- **[Next.js App](../../examples/nextjs-app/)** - Complete App Router example with RainbowKit\n- **[Vue App](../../examples/vue-app/)** - Vue 3 example for comparison\n\n## Related Packages\n\n- [`@0xbojack/fhevm-core`](../core) - Framework-agnostic core library\n- [`@0xbojack/fhevm-react`](../react) - React hooks (requires manual `'use client'`)\n- [`@0xbojack/fhevm-vue`](../vue) - Vue 3 composables\n\n## License\n\nBSD-3-Clause-Clear\n\n## Links\n\n- [FHEVM Documentation](https://docs.zama.ai/fhevm)\n- [GitHub Repository](https://github.com/huaigu/fhevm-sdk)\n- [Zama](https://zama.ai)\n","readmeFilename":"README.md"}