Next.js App目录router.query/useSearchParams失效及NextUI兼容问题

1. App目录page.js获取URL参数为null的修复 #

App Router与Pages Router的参数获取逻辑完全不同，你可能混淆了API或路由结构：

• 处理URL查询参数（如?id=123）：
  必须使用useSearchParams，且组件需声明为客户端组件（添加'use client'指令）：

  'use client';
  import { useSearchParams } from 'next/navigation';
  
  export default function Page() {
    const searchParams = useSearchParams();
    const id = searchParams.get('id');
    return <div>查询参数ID: {id}</div>;
  }
  

• 处理动态路由参数（如/items/123）：
  先创建动态路由目录结构app/items/[id]/page.js，再通过组件props获取参数：

  // app/items/[id]/page.js
  export default function Page({ params }) {
    const { id } = params;
    return <div>动态路由ID: {id}</div>;
  }
  

注意：App Router中不存在router.query，这是Pages Router专属的useRouter属性，别混用。

2. Pages目录page.js出现404的原因 #

Pages Router的路由命名规则与App Router不同：

• Pages Router的根页面必须命名为index.js，而非page.js
• 动态路由需命名为[id].js（如pages/items/[id].js）
  所以Pages目录下用page.js不符合路由规则，会返回404，换成index.js即可正常访问。

3. App与Pages目录同时使用NextUI组件的配置 #

需分别在两个路由系统的全局入口配置NextUI Provider：

App Router 配置（app/layout.js） #

'use client';
import { NextUIProvider } from '@nextui-org/react';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <NextUIProvider>{children}</NextUIProvider>
      </body>
    </html>
  );
}

Pages Router 配置（pages/_app.js） #

import { NextUIProvider } from '@nextui-org/react';
import '@nextui-org/react/dist/style.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

完成配置后，两个目录下的组件都能正常使用NextUI。

内容的提问来源于stack exchange，提问作者Zack Lau