在 Next.js App Router 中，客户端组件需使用 next/navigation 而非 next/router 导入 useRouter，否则会触发 “NextRouter was not mounted” 错误；同时必须确保组件明确标记为 Client Component（即含 'use client' 指令）。

在 next.js app router 中，客户端组件需使用 `next/navigation` 而非 `next/router` 导入 `userouter`，否则会触发 “nextrouter was not mounted” 错误；同时必须确保组件明确标记为 client component（即含 `'use client'` 指令）。

Next.js 13+ 的 App Router 与旧版 Pages Router 在路由 API 设计上存在根本差异：next/router（基于 Router 实例的旧 API）仅适用于 Pages Router；而在 App Router 中，所有路由能力均由 next/navigation 提供，包括 useRouter、useSearchParams、redirect 和 notFound 等。

你当前代码中的错误根源在于：

• ❌ 错误导入：import { useRouter } from 'next/router' —— 这在 App Router 下无效，且无法挂载；
• ✅ 正确导入：import { useRouter } from 'next/navigation' —— 这是 App Router 官方支持的客户端路由 Hook。

此外，还需注意以下关键点：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

✅ 正确用法示例（适配 App Router）

'use client';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function NFTDetails() {
  const router = useRouter();
  const searchParams = useSearchParams(); // 推荐用于读取 query 参数
  const [nft, setNft] = useState<record string>>({});

  // 方案一：使用 useSearchParams（推荐，无需依赖路由就绪状态）
  useEffect(() => {
    const data = Object.fromEntries(searchParams.entries());
    setNft(data);
  }, [searchParams]);

  // 方案二：若需监听路由变化或执行导航，可结合 useRouter.push()
  // router.push('/nft-details?tokenId=123');

  return (
    <div>
      <h2>NFT Details</h2>
      <pre class="brush:php;toolbar:false;">{JSON.stringify(nft, null, 2)}