NEXT.Js Link routing on steroids
Tags: webdev, react, nextjs, link
Published: 2023-09-12 12:59:43

When building things with Next.JS 13, I previously had two main problems when using Next.JS <Link/> component:
 
- I sometimes had to compromise on the server components' awesomeness when dealing with more complex routing scenarios. 
e.g Using a route that requires a params

```tsx
"use client";
import { useParams } from "next/navigation";
import Link from "next/link";
const Normal = () => {
  const params = useParams();

  //current page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Membership/Request
  return (
    <div>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Membership/Members */}
        <Link href={`/groups/${params!.id}/manage/Membership/Members`}>Membership</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Community/Members */}
        <Link href={`/groups/${params!.id}/manage/Community/Members`}>Community</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Content */}
        <Link href={`/groups/${params!.id}/manage/Content`}>Content</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h */}
        <Link href={`/groups/${params!.id}`}>Content</Link>
     </div>
  );
};

```
- Some unnecessarily overly long link strings in my href attributes. 😫
```tsx
import Link from "next/link";
const Normal = () => {
//current page: http://localhost:3000/main/portfolio/flyingDay/info/colorScheme
return (
  <div>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay/info/colorScheme/secondary */}
      <Link href={`/main/portfolio/flyingDay/info/colorScheme/secondary`}>secondary</Link>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay/info/typography */}
      <Link href={`/main/portfolio/flyingDay/info/typography`}>typography</Link>
      {/* go to page: http://localhost:3000/main/portfolio/HappyMan */}
      <Link href={`/main/portfolio/HappyMan`}>HappyMan</Link>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay */}
      <Link href={`/main/portfolio/flyingDay/info`}>main info</Link>
   </div>
  );
};

```

This becomes a lot more stressful and repetitive when building large web apps and you have to go through these... right???

But guess what? Building large web applications doesn't have to be a constant source of stress and repetition! 😄 NEXT.js has introduced an amazing feature that will make you smile. 😊 Now, creating cleaner and more efficient links is a breeze, without giving up on server components.

You can now create links as if routes are just like navigating through folders. Just like you would import from a files tree: 

So basically treat every / or route as a folder.

`abc` --- i want to replace something in this path with abc

`./abc` --- i want to replace something in this path with abc

`../abc` --- i want to replace something in the parent path above the last path with abc

`../../abc` --- i want to replace something 2 paths above the last path with abc

`../../../abc` --- i want to replace something 3 pathsabove the last path with abc

Here's how it looks in action:

```tsx
import Link from "next/link";
const Normal = () => {
  //current page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Membership/Request
  return (
    <div>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Membership/Members */}
        <Link href={`Members`}>Membership</Link>
        <Link href={`./Members`}>Membership</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Community/Members */}
        <Link href={`../Community/Members`}>Community</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h/manage/Content */}
        <Link href={`../Content`}>Content</Link>
        {/* go to page: http://localhost:3000/groups/2vz8t6svg7y63e56788h7h */}
        <Link href={`../../`}>Content</Link>
     </div>
  );
};
```

```tsx
import Link from "next/link";
const Normal = () => {
//current page: http://localhost:3000/main/portfolio/flyingDay/info/colorScheme
return (
  <div>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay/info/colorScheme/secondary */}
      <Link href={`colorScheme/secondary`}>secondary</Link>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay/info/typography */}
      <Link href={`typography`}>typography</Link>
      {/* go to page: http://localhost:3000/main/portfolio/HappyMan */}
      <Link href={`../../HappyMan`}>HappyMan</Link>
      {/* go to page: http://localhost:3000/main/portfolio/flyingDay */}
      <Link href={`../`}>main info</Link>
   </div>
  );
};
```

**With this method (path based href), We can:**

- Avoid always using useParams hook.
- Be flexible in changing hrefs.
- Avoid too long href links in our code.

You can view the idea discussion on this feature [here](https://github.com/vercel/next.js/discussions/53533), 

On a scale of 1 - 10, what do you rate this feature ?
If you have any questions, contributions or critique on this, I would love to hear them 🤗