如何在Next.js中为Router实例添加TypeScript类型注解？

Next.js的路由系统分**Pages Router（传统路由）和App Router（Next.js 13+新路由）**两种，对应的router类型不一样，以下分场景给出解决方案：

场景1：使用Pages Router（next/router） #

1. 首先从next/router导入对应的Router类型
2. 修改RequestPasswordResetProps接口，将router的类型从any替换为Router

示例代码：

// 导入所需的类型和钩子
import { useRouter, Router } from 'next/router';
import { useState } from 'react';

// 定义类型注解后的接口
interface RequestPasswordResetProps {
  router: Router; // 替换原有的any类型
  email: string; // 你的其他参数
}

// 密码重置请求函数
function requestPasswordReset(props: RequestPasswordResetProps) {
  // 示例逻辑：发送请求后跳转页面
  props.router.push('/password-reset-success');
  // ...其他业务逻辑
}

// 表单组件
export default function PasswordResetRequestForm() {
  const router = useRouter();
  const [email, setEmail] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    requestPasswordReset({ router, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
        placeholder="输入你的邮箱"
      />
      <button type="submit">发送重置链接</button>
    </form>
  );
}

场景2：使用App Router（next/navigation） #

如果你的项目用的是Next.js 13+的App Router，useRouter来自next/navigation，对应的类型是NextRouter：

1. 从next/navigation导入NextRouter类型
2. 替换接口中的router类型

示例代码：

// 导入所需的类型和钩子
import { useRouter, NextRouter } from 'next/navigation';
import { useState } from 'react';

// 定义类型注解后的接口
interface RequestPasswordResetProps {
  router: NextRouter; // 替换原有的any类型
  email: string; // 你的其他参数
}

// 密码重置请求函数
function requestPasswordReset(props: RequestPasswordResetProps) {
  // 示例逻辑：发送请求后跳转页面
  props.router.push('/password-reset-success');
  // ...其他业务逻辑
}

// 表单组件
export default function PasswordResetRequestForm() {
  const router = useRouter();
  const [email, setEmail] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    requestPasswordReset({ router, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
        placeholder="输入你的邮箱"
      />
      <button type="submit">发送重置链接</button>
    </form>
  );
}

注意事项 #

• 确认你的项目使用的路由系统：如果是pages目录下的页面，用Pages Router的类型；如果是app目录下的路由，用App Router的类型。
• 类型导入路径不要搞混，next/router和next/navigation是两个不同的模块。

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