Next.js Link Component | Updated 2024

68

The Next.js Link component is a powerful tool for client-side navigation in a Next.js application. It provides a way to navigate between pages without refreshing the entire page, ensuring a smooth user experience. In this section, we’ll explore how to use the Link component.

Basic Usage of the Link Component

First, ensure you have a Next.js project set up. If not, create one:

npx create-next-app nextjs-link-component
cd nextjs-link-component

Next, create a few pages for navigation:

// pages/index.js

import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  );
};

export default Home;

// pages/about.js

import Link from 'next/link';

const About = () => {
  return (
    <div>
      <h1>About Page</h1>
      <Link href="/">
        <a>Home</a>
      </Link>
    </div>
  );
};

export default About;

Here, we’ve created two pages (index.js and about.js) with navigation links between them. The Link component from Next.js wraps the <a> tag to enable client-side transitions.

Linking to Dynamic Routes

Next.js supports dynamic routing, which allows you to create pages with dynamic content. Let’s create a dynamic route:

// pages/post/[id].js

import { useRouter } from 'next/router';
import Link from 'next/link';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
      <Link href="/">
        <a>Home</a>
      </Link>
    </div>
  );
};

export default Post;

// pages/index.js

import Link from 'next/link';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
      <br />
      <Link href="/post/1">
        <a>Post 1</a>
      </Link>
      <br />
      <Link href="/post/2">
        <a>Post 2</a>
      </Link>
    </div>
  );
};

export default Home;

This example demonstrates how to navigate to dynamic routes using the Link component.

Next.js Link Custom Component

Sometimes you may want to customize the appearance or behavior of the Link component. You can create a custom link component to achieve this.

Creating a Custom Link Component

Create a new file for your custom link component:

// components/CustomLink.js

import Link from 'next/link';
import styles from './CustomLink.module.css';

const CustomLink = ({ href, children }) => {
  return (
    <Link href={href}>
      <a className={styles.customLink}>{children}</a>
    </Link>
  );
};

export default CustomLink;

Add some styles to CustomLink.module.css:

/* components/CustomLink.module.css */

.customLink {
  color: #0070f3;
  text-decoration: none;
  font-weight: bold;
}

.customLink:hover {
  text-decoration: underline;
}

Use the custom link component in your pages:

// pages/index.js

import CustomLink from '../components/CustomLink';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <CustomLink href="/about">About</CustomLink>
      <br />
      <CustomLink href="/post/1">Post 1</CustomLink>
      <br />
      <CustomLink href="/post/2">Post 2</CustomLink>
    </div>
  );
};

export default Home;

Next.js Styled Components Link

Styled Components is a library that allows you to write CSS in JavaScript, providing a way to style your components dynamically. Let’s create a styled Link component using Styled Components.

Setting Up Styled Components

First, install styled-components and its Babel plugin:

npm install styled-components
npm install --save-dev babel-plugin-styled-components

Next, create a .babelrc file in the root of your project if it doesn’t exist and add the Styled Components plugin:

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

Creating a Styled Link Component

Create a styled link component:

// components/StyledLink.js

import Link from 'next/link';
import styled from 'styled-components';

const StyledAnchor = styled.a`
  color: #0070f3;
  text-decoration: none;
  font-weight: bold;

  &:hover {
    text-decoration: underline;
  }
`;

const StyledLink = ({ href, children }) => {
  return (
    <Link href={href} passHref>
      <StyledAnchor>{children}</StyledAnchor>
    </Link>
  );
};

export default StyledLink;

Use the styled link component in your pages:

// pages/index.js

import StyledLink from '../components/StyledLink';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <StyledLink href="/about">About</StyledLink>
      <br />
      <StyledLink href="/post/1">Post 1</StyledLink>
      <br />
      <StyledLink href="/post/2">Post 2</StyledLink>
    </div>
  );
};

export default Home;

Conclusion

In this article, we explored different ways to use the Link component in Next.js. We covered basic usage, creating a custom link component, and styling links with Styled Components. These methods provide flexibility in navigation and styling in your Next.js applications.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Next.js Link Component – FAQs