Next.js custom url name (url re-writing)

Question

I have a project in Next.js where I have 2 different users: admin and employee.

I have set up 2 folders inside pages; /admin and /users. Each folder/users has its own subpages. for example /admin/dashboard and /employee/dashboard etc

I am trying to obfuscate the role, so that instead of displaying the url: "/admin/dashboard", if the user is an admin, I would like the url to display "/dashboard" which actually gets the "admin/dashboard" page.

I have tried next.js.config and that works perfectly when I do a full page refresh on /dashboard

module.exports = {
    async rewrites() {
        return [
        {
          source: '/:path*',
          destination: '/admin/:path*',
        },
      ]
    },
  }

However, if I set my link to "/dashboard", it does not work. I have tried middleware, and I can get "/" to redirect to "/admin", but I want the opposite. ie if I go to "/" it will use the "/admin/" page, but cannot work out how to achieve my goal (if it is possible !)

if (request.nextUrl.pathname.startsWith('/dashboard')) {

    url.pathname = "/admin/dashboard";
    return NextResponse.redirect(url);
}

Any help greatly appreciated

koolskateguy89 · Accepted Answer · 2022-12-27 02:23:32Z

1

You can use as from router.push and the Link component.

For example:

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

export default function Example() {
  const router = useRouter();

  const handleEmployeeClick = () => {
    // will show page from /employee/dashboard but show as /dashboard
    router.push('/employee/dashboard', '/dashboard');
  };

  return (
    <>
      <button onClick={handleEmployeeClick}>
        Go to dashboard (employee only)
      </button>

      <Link href="/admin/dashboard" as="/dashboard">
        Go to dashboard (admin only)
      </Link>
    </>
  );
}

answered Dec 27, 2022 at 2:23

koolskateguy89

4122 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

grayson Over a year ago

this has solved half of my issue. Thank you. However, a user can still manually enter /employee/dashboard and the url with show that rather then just /dashboard

koolskateguy89 Over a year ago

@grayson Then you would have to add role-based authentication in /employee/dashboard and admin/dashboard to stop users from accessing the specific page. If you want them to be able to just enter /dashboard, you can create a /dashboard page and automatically redirect to the correct dashboard page depending on the user's role.

Collectives™ on Stack Overflow

Next.js custom url name (url re-writing)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related