Link and Navigation

Next.js 188 views Dec 22, 2025 2 min read

Next.js provides built-in tools for fast and efficient navigation between pages. Instead of traditional page reloads, Next.js uses client-side navigation, which improves performance and user experience.

1. Link Component

The Link component from next/link is used to navigate between pages.

Basic Example

import Link from 'next/link';

export default function Home() {
  return (
    <Link href="/about">Go to About Page</Link>
  );
}

Enables client-side navigation
Preloads pages automatically
Faster than normal tags

2. Linking with Anchor Tags

You can still style links using inside Link.

<Link href="/contact">
  Contact Us
</Link>

In modern Next.js, wrapping with is optional.

3. Dynamic Links

Links can be created for dynamic routes.

<Link href="/blog/my-first-post">
  Read Blog
</Link>

Or using route parameters:

<Link href={`/blog/${slug}`}>
  Read More
</Link>

4. Programmatic Navigation (useRouter)

You can navigate programmatically using the useRouter hook.

Example

'use client';

import { useRouter } from 'next/navigation';

export default function Login() {
  const router = useRouter();

  const handleLogin = () => {
    router.push('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}

5. replace() vs push()

push() – Adds a new entry to browser history
replace() – Replaces the current history entry

router.replace('/home');

6. Back and Forward Navigation

router.back();
router.forward();

7. Active Links (Current Route)

You can highlight active links using usePathname.

'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';

export default function Navbar() {
  const pathname = usePathname();

  return (
    <Link
      href="/about"
      className={pathname === '/about' ? 'active' : ''}
    >
      About
    </Link>
  );
}

8. External Links

For external websites, use a normal anchor tag.

"https://example.com" target="_blank" rel="noopener noreferrer">
  External Link

Conclusion

Next.js navigation is optimized for speed and user experience. Using the Link component and navigation hooks, you can build smooth, fast, and scalable navigation systems in your application.

Some advanced sections are available for Registered Members

← Previous

Pages and Routing in Next.js

Layouts in Next.js