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:
File from where we call the hook |
Active URL | useSelected LayoutSegment() |
useSelected LayoutSegments() |
---|---|---|---|
app/layout.js | / | null | [] |
app/layout.js | /blog | 'blog' | ['blog'] |
app/blog/layout.js | /blog | null | [] |
app/layout.js | /blog/123 | 'blog' | ['blog', '123'] |
app/blog/layout.js | /blog/123 | 123 | ['123'] |
app/blog/[id]/layout.js | /blog/123 | null | [] |
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:
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.