Next.js使用Router报错：Cannot read properties of null (reading 'useContext')

错误核心原因 #

你把React页面组件放在了/api目录下，这是关键错误：

• /api是Next.js专属的API路由目录，里面的文件运行在服务端，用于处理HTTP请求（如GET/POST），并非用来渲染React页面。
• useRouter是客户端React Hook，只能在/pages目录下的页面组件或客户端组件中使用，API路由环境没有React上下文（Context），调用后必然触发useContext相关报错。

修复步骤 #

1. 迁移页面组件到正确目录
   将ProjectDetails组件从/api/[key].js移至/pages目录下，比如创建/pages/projects/[key].js（路由路径可根据你的需求调整），组件代码保持不变：

   import { useRouter } from 'next/router';
   
   const ProjectDetails = () => {
      const router = useRouter();
      const { key } = router.query;
      
      return (
         <div>
            {/* 展示项目详情 */}
            <p>项目标识：{key}</p>
         </div>
      );
   };
   
   export default ProjectDetails;
   

2. 修正跳转路径
   修改Projects页面的跳转逻辑，指向新的页面路由：

   const openProjectDetails = () => {
     Router.push('/projects/' + props.projetos.key);
   };
   

补充：从数据库获取项目数据 #

如果要根据key从数据库拉取项目信息，推荐使用Next.js官方的数据获取方案：

• 若需要每次请求都获取最新数据，使用getServerSideProps：

  const ProjectDetails = ({ project }) => {
     return (
        <div>
           <h1>{project.title}</h1>
           <p>{project.description}</p>
        </div>
     );
  };
  
  export async function getServerSideProps(context) {
    // 从路由参数中提取key
    const { key } = context.params;
    // 替换为你的数据库查询逻辑
    const project = await fetch(`你的数据库接口地址/${key}`).then(res => res.json());
    
    return {
      props: { project } // 将数据传递给组件
    };
  }
  
  export default ProjectDetails;
  

• 若项目数据更新频率低，可使用getStaticProps配合getStaticPaths生成静态页面，提升访问性能。

错误提示回顾：
Error: Cannot read properties of null (reading 'useContext')

内容的提问来源于stack exchange，提问作者João Silva