Next.js Tutorials
WhatsApp Channel
Join
Facebook Page
Follow

Link and Navigation

📘 Next.js 👁 33 views 📅 Dec 22, 2025
⏱ Estimated reading time: 2 min

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
Register Now
← Previous
Pages and Routing in Next.js
Next →
Layouts in Next.js
Share this Post
🚀 Want to Test Your Knowledge?

Take quizzes related to this topic and see where you stand!

Start Quiz Now
← Back to Tutorials

Popular Competitive Exam Quizzes

GK/GS Quiz | UPSC Exam Quiz | English Grammar Basics Quiz | Science Quiz