How do I use the 'as' props for Link in the new App Router

[trebordng-archive]

Hi, I'm trying to use the link 'as' to fake the url when the user click on the link, just like I usually did on the pages router. But it doesn't work as expected anymore.

'<Link
aria-label={image.url}
key={image.url}
shallow
href={/${list.toLowerCase()}/?photoId=${index}}
as={/${list.toLowerCase()}/photoId/${index}}
className="md:w-[calc(50%-12px)] lg:w-[calc(33.33%-16px)] h-416 xl:h-512 rounded-lg overflow-hidden relative bg-black"
>'

It keeps directing the page to the 'as' url not the actual 'href'. Did I do something wrong or do I have to go a different way?

[devjiwonchoi]

The feature you are looking for can be resolved by using the middleware.

It's common to use Middleware for authentication or other purposes that involve rewriting the user to a different page.

Since the middleware runs before a request is completed, it is possible to redirect to the URL by pathname which was directed by the Link component.

Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.

Example:

// middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {

  // do something here to get the ${list.toLowerCase()} value and ${index} value

  return NextResponse.redirect(new URL('/your desired URL', request.url));
}
 
// See "path-to-regexp" below to learn more
export const config = {
  matcher: '/dynamic-route-path/:path*',
};

Read more details on path-to-regexp documentation.

Note that middleware.js | ts should be placed at the root of your project.

Use the file middleware.ts (or .js) in the root of your project to define Middleware. For example, at the same level as pages or app, or inside src if applicable.

Reference

• App Router Middleware: https://nextjs.org/docs/app/building-your-application/routing/middleware
• App Router Link Middleware: https://nextjs.org/docs/app/api-reference/components/link#middleware