Linking to Dynamic Routes

Create a navigation component using Next.js Link to navigate programmatically to dynamic routes, passing query parameters.

import Link from 'next/link';

// NavigationComponent.js
// This component provides navigation links to dynamic routes in Next.js.
function NavigationComponent() {
  // Example dynamic route parameters
  const userId = 'user123';
  const postId = 'post456';

  return (
    <nav>
      {/* Link to a dynamic user profile route */}
      <Link href={`/profile/${userId}`}>
        <a>Go to user profile</a>
      </Link>
      {/* Link to a dynamic post route with query parameters */}
      <Link href={{ pathname: `/post/${postId}`, query: { ref: 'newsletter' } }}>
        <a>Read the post (with ref query param)</a>
      </Link>
    </nav>
  );
}

export default NavigationComponent;

This is a NavigationComponent which uses Next.js Link to navigate to dynamic routes. It contains two examples: one that links to a dynamic user profile page with a user ID, and another that links to a dynamic post page with a post ID and a query parameter (ref='newsletter').