UseSelectedLayoutSegment() vs UseSelectedLayoutSegments() in NextJs 13

DanielDecember 5, 2022December 6, 2022

The scope of this article is to show how theuseSelectedLayoutSegment() and useSelectedLayoutSegments() hooks work in NextJs 13, how they are different, and how to use them to find out the active path.

Similarities between useSelectedLayoutSegment() and useSelectedLayoutSegments()

Both useSelectedLayoutSegment() and useSelectedLayoutSegments() hooks were added in NextJs13. They are hooks that are meant to be used in layouts files.

Also, keep in mind that they are only client components hooks. So in order to be able to make use of them we will need to add the use client directive at the top of the layout component.

We can import any of these hooks from the next/navigation package.

Differences between useSelectedLayoutSegment() and useSelectedLayoutSegments()

In a nutshell, the useSelectedLayoutSegment() returns ONLY the first segment after the path of the layout file, while the useSelectedLayoutSegments() returns ALL the segments after the path of the layout file.

The return type is different, as useSelectedLayoutSegment() will return a string value or null, while useSelectedLayoutSegments() will always return an array.

I was first confused about how these two hooks work, but to make it clear I've built the following example.

Let's say that we have the following file structure in the /app folder:

/app
    layout.js
    page.js
    /blog
        layout.js
        page.js
        [id]
            layout.js
            page.js

So, our app will have the following routes patterns:

/
/blog
/blog/123

Any of the layouts files will just print the output of these hooks:

/* 
Each of the following files has similar content to the one below:
    /app/layout.js
    /app/blog/layout.js
    /app/blog/[id]/layout.js 
*/

'use client'
import { useSelectedLayoutSegment } from 'next/navigation'
import { useSelectedLayoutSegments } from 'next/navigation'

export default function Layout({ children }) {
    console.log(useSelectedLayoutSegment())
    console.log(useSelectedLayoutSegments())
    return (<>{children}</>)
}

And below we have the table with the results:

Remember how the nested layouts work. For example, if we visit this URL /app/blog only the /app/layout.js and /app/blog/layout.js files will get called. The /app/blog/[id]/layout.js will not be included.

You can download the full code from here.

In the next post, we will see how to use useSelectedLayoutSegment() and useSelectedLayoutSegments() to highlight the active link in a NextJs 13 navigation.

And beflow we have the links for the official documentation:

• useSelectedLayoutSegment
• useSelectedLayoutSegments