docs(blog): update next js link component (#6002)

Co-authored-by: Batuhan Wilhelm <[email protected]>
refinedev · May 31, 2024 · e6feede · e6feede
1 parent 0b1b118
commit e6feede
Showing 1 changed file with 161 additions and 22 deletions.
diff --git a/documentation/blog/2022-09-04-next-link.md → documentation/blog/2024-05-29-next-link.md b/documentation/blog/2022-09-04-next-link.md → documentation/blog/2024-05-29-next-link.md
@@ -4,32 +4,30 @@ description: A guide for navigation between pages using Next.js Link
 slug: next-js-link-component
 authors: michael
 tags: [nextjs]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-04-next-link/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-09-04-next-link/social-2.png
 hide_table_of_contents: false
 ---
 
+**_This article was last updated on May 29, 2024 to add new sections on advanced usage, accessibility and benefit consideration on Next.js Link Component_**
+
 ## Introduction
 
 If you have built websites and applications on the web, then you're very likely to have used a common method for navigation. Traditionally, navigation is often achieved with the HTML anchor element (`<a></a>`). The anchor element is primarily used for navigating within and outside websites and webpages, and it serves its purpose pretty well.
 
 In this article, we'll introduce you to Next.js `<Link/>` component, a similar method of navigation to the native anchor element but with additional built-in features for optimization. The **Next.js Link** component has additional benefits, such as options to customize navigation behavior through props and improved performance and SEO metrics.
 
-<!--truncate-->
-
 Steps we'll cover:
 
 - [Introducing the `<Link/>` component](#introducing-the-link-component)
-- [The Next.js Link component props](#the-link-component-props)
-  - [**Required props**](#required-props)
-  - [`href`](#href)
-  - [**Optional props**](#optional-props)
-  - [`as`](#as)
-  - [`passHref`](#passhref)
-  - [`prefetch`](#prefetch)
-  - [`replace`](#replace)
-  - [`scroll`](#scroll)
-  - [`locale`](#locale)
-  - [`shallow`](#shallow)
+- [The Link component props](#the-link-component-props)
+- [What are the benefits of using the Next.js Link component?](#what-are-the-benefits-of-using-the-nextjs-link-component)
+- [The advanced uses of the Next.js Link component](#the-advanced-uses-of-the-nextjs-link-component)
+  - [Nested Links](#nested-links)
+- [Dynamic Routes](#dynamic-routes)
+- [Custom Components](#custom-components)
+- [Accessibility Considerations of Next.js Link](#accessibility-considerations-of-nextjs-link)
+  - [ARIA attributes](#aria-attributes)
+  - [Follow Focus Management](#follow-focus-management)
 
 ## Prerequisites
 
@@ -270,13 +268,6 @@ Preloading page content can drastically improve application performance. The `pr
 </Link>
 ```
 
-<br/>
-<div>
-<a href="https://discord.gg/refine">
-  <img  src="https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/discord_big_blue.png" alt="discord banner" />
-</a>
-</div>
-
 ### `replace`
 
 The replace prop changes how navigation works by replacing the current history state instead of adding a new URL into the stack. This can be demonstrated by clicking on the `back` button in the navigation bar in the browser.
@@ -382,7 +373,155 @@ The `shallow` props let us update the path of the current page without running a
 
 [Here's](https://github.com/vercel/next.js/blob/canary/examples/with-shallow-routing/pages/index.js) a good example showing how to use shallow routing in your web pages.
 
-### Conclusion
+## What are the benefits of using the Next.js Link component?
+
+Now, I want to discuss shortly a few benefits regarding Next.js's Link component. Among the number one benefits of working with a Link component are performance gains. Linked pages are prefetched in the background. The preloading provides very high-performance navigation with almost zero friction. It translates into SEO implementation when search engines quickly crawl and index the entire structural navigation flow.
+
+The next feature pertaining to it is client-side navigation. It's unlike a traditional anchor tag, in which we can navigate without a complete page transition for state maintenance and a fast experience. In addition to this, these pages open in the background—with links to the page that are wired with the Link component—so when people navigate to such pages, the slow speed visible to people is not a barrier.
+
+This feature combination gives the Next.js Link component an edge in using web apps for optimality in both performance and SEO.
+
+```tsx
+function Navigation() {
+  return (
+    <nav>
+      <Link href="/">
+        <a>Home</a>
+      </Link>
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+      <Link href="/contact">
+        <a>Contact</a>
+      </Link>
+    </nav>
+  );
+}
+
+export default Navigation;
+```
+
+## The advanced uses of the Next.js Link component
+
+Some other advanced uses of the Next.js Link component will include:
+
+### Nested Links
+
+Make nested links to retain complex navigation structures.
+
+```tsx
+function Sidebar() {
+  return (
+    <div>
+      <h2>Categories</h2>
+      <Link href="/category/technology">
+        <a>Technology</a>
+      </Link>
+      <Link href="/category/science">
+        <a>Science</a>
+      </Link>
+    </div>
+  );
+}
+
+export default Sidebar;
+```
+
+## Dynamic Routes
+
+The Link can easily handle dynamic routes, hence beneficial for parameterized paths.
+
+```tsx
+// pages/post/[id].js
+import { useRouter } from "next/router";
+
+function Post() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  return <p>Post: {id}</p>;
+}
+
+export default Post;
+
+// Linking to dynamic routes
+import Link from "next/link";
+
+function HomePage() {
+  return (
+    <div>
+      <Link href="/post/[id]" as="/post/1">
+        <a>Go to Post 1</a>
+      </Link>
+      <Link href="/post/[id]" as="/post/2">
+        <a>Go to Post 2</a>
+      </Link>
+    </div>
+  );
+}
+
+export default HomePage;
+```
+
+## Custom Components
+
+We wrap the Link with custom components for more flexible designs.
+
+```tsx
+import styled from "styled-components";
+import Link from "next/link";
+
+const CustomLink = styled.a`
+  color: red;
+  font-size: 20px;
+`;
+
+function HomePage() {
+  return (
+    <div>
+      <h1>Home</h1>
+      <Link href="/about" passHref>
+        <CustomLink>About Us</CustomLink>
+      </Link>
+    </div>
+  );
+}
+
+export default HomePage;
+```
+
+## Accessibility Considerations of Next.js Link
+
+### ARIA attributes
+
+Ensure that the appropriate ARIA attributes are available for the links by which a person using a screen reader knows what the purpose of the link focused is. In some examples, you would need the attributes to be able to add a new attribute named aria-label describing what the purpose of that link is.
+
+```tsx
+<Link href="/about">
+  <a aria-label="Learn more about us on the About Page">About Us</a>
+</Link>
+```
+
+### Follow Focus Management
+
+After navigation, follow focus management for maximum enhancement.
+
+```tsx
+function Contact() {
+  return (
+    <div>
+      <h1>Contact Us</h1>
+      <Link href="/">
+        <a onFocus={() => console.log("Focused on Home link")}>Home</a>
+      </Link>
+    </div>
+  );
+}
+
+export default Contact;
+```
+
+## Conclusion
 
 The **Next.js Link** component simplifies client-side navigation, and we recommend using it over the native anchor element for routing in your next.js applications. In this article, you learned how to use `Link` and configure its behavior using props to suit your use cases. You also learned how important concepts such as dynamic routes and URL objects work using the Link component.