🔗 Navigation and Linking in Next.js

Next.js provides fast and efficient navigation using client-side routing. It supports both declarative and imperative routing methods for smooth page transitions.

📌 1. Declarative Navigation Using <Link>

Next.js provides the <Link> component for navigation without a full page reload.

🔹 Basic Example

javascript
<button onClick={goToContact}>Go to Contact</button>;}

✅ Useful for buttons, form submissions, and redirects

📌 5. Navigating with replace() Instead of push()

Use replace() to navigate without adding to browser history:

javascript
router.replace("/dashboard");

✅ Prevents users from going back to the previous page

📌 6. Handling Back Navigation

javascript
const goBack = () => {  router.back();};

✅ Allows users to return to the previous page programmatically

📌 7. Shallow Routing (Update URL Without Full Reload)

Use shallow routing to update the URL without fetching new data:

javascript
router.push("/profile", undefined, { shallow: true });

✅ Best for filter updates, tab navigation, or UI state changes

📌 8. External Links (New Tab & SEO Considerations)

javascript
<Link href="https://example.com" target="_blank" rel="noopener noreferrer">  Visit Example</Link>

✅ Prevents security risks while opening external sites

📌 9. When to Use Which Navigation Method?