在Next.js中，你可以使用next/router模块提供的push方法来跳转到外部URL。

首先，需要在你的组件中导入next/router模块：

import { useRouter } from 'next/router';

然后，在需要进行跳转的事件处理函数中，调用push方法，并传递一个外部URL作为参数。例如：

const router = useRouter();

function handleClick() {
  router.push('https://www.example.com');
}

这将把用户重定向到指定的外部URL。

需要注意的是，由于安全性限制，Next.js不能直接从客户端代码中打开新的标签页或窗口。你必须使用服务器端渲染或静态生成的页面才能实现这个功能。

在Next.js中，你可以使用next/router模块提供的push方法来实现内部路由跳转。

首先，需要在你的组件中导入next/router模块：

import { useRouter } from 'next/router';

然后，在需要进行跳转的事件处理函数中，调用push方法，并传递一个内部URL作为参数。例如：

const router = useRouter();

function handleClick() {
  router.push('/about');
}

这将把用户重定向到内部的/about页面。

还可以通过第二个可选参数来提供查询参数和哈希值。例如：

router.push({
  pathname: '/search',
  query: { q: 'search term' },
  hash: '#results'
})

这将把用户重定向到内部的/search?q=search%20term#results页面。

如果你需要在不保留历史记录的情况下进行内部路由跳转，可以使用replace方法代替push方法。例如：

router.replace('/login');

这将用新页面替换当前页面，而不是添加一个新的历史记录条目。

next/router 和 next/navigation 都是 Next.js 框架提供的导航工具。它们之间的区别在于以下几点：

1. 功能不同：next/router 提供了路由相关的功能，例如内部路由跳转和传递参数等；而 next/navigation 则提供了浏览器历史记录相关的功能，例如前进、后退等。

2. API 不同：next/router 的 API 更加丰富，包含了许多与路由相关的方法和属性，例如 push、replace、query 等；而 next/navigation 的 API 相对简单，只有 back、forward 和 listen 三个方法。

3. 使用场景不同：next/router 适用于需要在应用内进行页面跳转的情况，例如点击链接或者提交表单后需要跳转到另一个页面；而 next/navigation 适用于需要操作浏览器历史记录的情况，例如通过前进、后退按钮切换页面。

综上所述，如果你需要进行内部页面跳转，就应该使用 next/router；如果你需要监听浏览器历史记录的变化并进行相应的处理，就应该使用 next/navigation。

这个错误提示的意思是在使用useRouter()方法之前，NextRouter尚未被加载或挂载。这通常是因为你在没有经过服务器端渲染或静态生成的情况下直接打开了页面，导致客户端代码无法正确加载。

解决这个问题的方法是，在调用useRouter()方法之前，先判断typeof window !== 'undefined'是否为true，以确保代码在浏览器环境中运行。

例如：

import { useRouter } from 'next/router';

function Home() {
  const router = typeof window !== 'undefined' ? useRouter() : null;

  const toApp = (e: any) => {
    if (router) {
      router.push('https://ai.tercel.tech');
    }
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={toApp}>Go to App</button>
    </div>
  );
}

export default Home;

这样就可以避免NextRouter was not mounted的错误了。