Get path in dynamic route in Next JS when Server Component? – Javascript

The Problem:

In Next JS 13, it is easy to get the path in a dynamic route in a client component using the usePathname hook from next/navigation. However, this hook cannot be used in a Server Component. How can you get the URL in a React Server Component in Next JS 13?

The Solutions:

Solution 1: Using Params in Server Component

In a dynamic route in Next.js, the server component gets passed a `params` object. This `params` object contains the dynamic segments of the route, including the ID. You can use this `params` object to get the path in a server component.

For example, consider the following dynamic route:

/app/[id]/page

The `[id]` segment is a dynamic segment that can accept any value. When the server component for this route is rendered, it will receive a `params` object that looks like this:

{
  id: "123"
}

To get the path in a server component, you can access the `params` object and use the dynamic segment value. For example, the following code gets the path of the current route:

// app/[id]/page.tsx

export default function Page({ params }: { params: { id: string } }) {
  const path = `/app/${params.id}/page`;

  return <div>{path}</div>;
}

This code will render the following output:

/app/123/page

This solution is straightforward and easy to use. It allows you to get the path in a server component without having to use the `usePathname` hook.

Solution 2: Use the `headers` API

The `headers` API provides access to the request headers. You can use it to get the `next-url` header, which contains the full URL of the request. From there, you can extract the dynamic part of the path using some string manipulation.

Here’s an example of how you can use the headers API to get the path in a React Server Component:

// your-server-component.tsx

'use server'

import { headers } from 'next/headers'

const YourServerComponent = async () => {
  const pathname = headers().get('next-url') || ''

  // I assume you know how your path will look like so make some
  // logic to extract the dynamic part from the pathname and use
  // it however you want in this server component. For example
  // fetch specific Post from you backend

  const postId = pathname.split('/').pop() || ''

  const postResult = await fetch(`www.your-domain.com/api/posts/${postId}`)

  const post = result.json()

  return <p>{post.title}</p>
}

This approach eliminates the need for prop drilling, as the path is directly accessible in the Server Component.

Video Explanation: