Next.js 导航和路由跳转

import React from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
 
const Navigation = () => {
  const router = useRouter();
 
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a className={router.pathname === '/' ? 'active' : ''}>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a className={router.pathname === '/about' ? 'active' : ''}>About</a>
          </Link>
        </li>
        <li>
          <Link href="/contact">
            <a className={router.pathname === '/contact' ? 'active' : ''}>Contact</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
};
 
export default Navigation;

这段代码展示了如何在Next.js中创建一个导航组件，该组件使用useRouter钩子来获取当前的路由信息，并通过Link组件提供导航链接。当用户点击导航链接时，会触发页面的重新加载或服务器端渲染，从而切换到对应的页面。这个例子简洁明了，并且使用了函数组件和Hooks API，这是Next.js推荐的现代React模式。