NEXT.Js Link routing on steroids

When building things with Next.JS 13, I previously had two main problems when using Next.JS 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

"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. 😫

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:

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>
  );
};

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,

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 🤗

Comments

[Chocoscoding - Oyeti Timileyin]

10/10 for me though... I just love it 🙃