How to get route pathname inside nextjs 13 app using the latest app directory? "Server Side"

Question

I'm using the experimental appDir in Next.js 13, and want to get the URL path of the request. I need this info to set the searchparams before I do the redirection. I want to get the request path on the server side.

There is a question with similar to this. How to get current pathname in app directory with Next 13? However it concerns with getting pathname on the client side.

I have tried looking into the Layout option and it has props of only children and params. I will not be able to reconstruct the URL with that info. I would like to know where the request is coming from on the server side. How can I achieve this?

The linked [thread](https://stackoverflow.com/questions/74584091/how-to-get-the-current-pathname-in-the-app-directory-of-next-js-13) has been updated to answer this question. — Youssouf Oumar, Jul 26 '23 at 09:49

khuezy · Answer 1 · 2023-04-02T00:16:58.770

4

Nextjs13 app dir doesn't have a nice API for this yet. It'll be nice if the props passed down the segment.

For now, you can use children.props.childProp.segment to get the path of your route on the server.

edited Apr 02 '23 at 00:16

answered Mar 31 '23 at 01:18

khuezy

157
1
9

Could you share that how you discovered this one? – Emre May 07 '23 at 20:33
1

@emre just experimentation – khuezy May 08 '23 at 22:14

score 2 · Answer 2 · answered Mar 20 '23 at 15:17

2

You can pass params to the function and can access to the dynamic route in this case i assume your dynamic route is [id]

export default function Page({params}) {
  return (
    <>
      <div className={styles.container}>
        <h1>Page for {params.id}</h1>
      </div>
    </>
  )
}

answered Mar 20 '23 at 15:17

therenaydin

21
3

How do you pass the params? – in43sh Aug 18 '23 at 07:48

score 1 · Answer 3 · answered Jun 13 '23 at 01:41

1

You probably might want to use searchParams

export default function Page({ params, searchParams }) {

answered Jun 13 '23 at 01:41

Aziz

859
6
16

score 0 · Answer 4 · answered Jul 26 '23 at 08:19

You can use a middleware file to achieve this.

    // middleware.ts
    import { NextResponse } from 'next/server';
    
    export function middleware(request: Request) {
    
      // get the URL from request header
      const requestHeaders = new Headers(request.headers);
      requestHeaders.set('x-url', request.url);
    
      // pass the header to the layout
      return NextResponse.next({
        request: {
          headers: requestHeaders,
        }
      });
    }

To get it in layout:

    // app/layout.tsx
    import { headers } from 'next/headers';
    
    export default function RootLayout() {
      const headersList = headers();
      // read the custom x-url header
      const header_url = headersList.get('x-url') || "";
    }

Warning: Doing this will turn off the Server-Side Generation and will trigger Server-Side Rendering because functions like cookies(), headers() are dynamic. They can also result in Cache Miss!

Reference: https://github.com/vercel/next.js/issues/43704#issuecomment-1411186664

You can read the complete issue here: https://github.com/vercel/next.js/issues/43704

How to get route pathname inside nextjs 13 app using the latest app directory? "Server Side"

4 Answers4

Linked