Next.js Functions: useSelectedLayoutSegments

Next.js is a framework dependent on React, designed for building server-rendered and statically generated web applications. One of its powerful features is useSelectedLayoutSegments, a client-side hook that allows developers to access and manage the active route segments within their application layouts.

Next.js Functions: useSelectedLayoutSegments

useSelectedLayoutSegments is a client-side hook in Next.js that retrieves the active route segments relative to the layout it is used in. This hook is useful for rendering dynamic UI elements, such as breadcrumbs, that reflect the current route path. It returns an array of strings representing the active segments, allowing for context-aware component updates based on the route hierarchy.

Syntax:

const segments = useSelectedLayoutSegments(parallelRoutesKey);

Steps To Implement useSelectedLayoutSegment Function

Step 1: Create a Next.js application using the following command.

npx create-next-app@latest gfg

Step 2: It will ask you some questions, so choose the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes

Step 3: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Folder Structure:

Dependencies

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.5"
},

Example: The below example demonstrates the use of useSelectedLayoutSegments function.

CSS

/* globals.css */
body {
	font-family: Arial, sans-serif;
	padding: 20px;
	background-color: #f0f0f0;
}

h1 {
	color: green;
	text-align: center;
}

h3 {
	text-align: center;
	margin-bottom: 20px;
}

nav {
	text-align: center;
	margin-bottom: 20px;
}

nav a {
	margin: 0 15px;
	text-decoration: none;
	color: blue;
	font-weight: bold;
	transition: color 0.3s;
}

nav a:hover {
	color: darkblue;
}

.content {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	text-align: center;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.segments {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.segment {
	background-color: #c8e6c9;
	padding: 10px 20px;
	margin: 5px;
	border-radius: 5px;
	font-weight: bold;
	transition: transform 0.2s, background-color 0.2s;
}

.segment:hover {
	transform: scale(1.05);
	background-color: #81c784;
}

JavaScript

// app/page.js
import ExampleClientComponent from './example-client-component';

export default function Page() {
  return (
    
      GeeksforGeeks
      Next.js Functions: useSelectedLayoutSegments Example
      
        Welcome to GeeksforGeeks! Explore various sections using the navigation links above.
        
      
      
        Returned Segments Examples:
        
          
            Home (/) : []
          
          
            /dashboard : ['dashboard']
          
          
            /dashboard/settings : ['dashboard', 'settings']
          
          
            /dashboard (dashboard/layout.js) : []
          
          
            /dashboard/settings (dashboard/layout.js) : ['settings']
          
        
      
    
  );
}

JavaScript

// app/layout.js
import './globals.css';
import Link from 'next/link';

export default function RootLayout({ children }) {
  return (

          Home
          Dashboard
          Settings
        
        {children}

  );
}

JavaScript

// app/dashboard/layout.js
import ExampleClientComponent from '../example-client-component';

export default function DashboardLayout({ children }) {
    return (

            {children}
        
    );
}

JavaScript

// app/dashboard/page.js
export default function DashboardPage() {
    return (
            Dashboard
            
                Welcome to the Dashboard section of GeeksforGeeks!
 
    );
}

JavaScript

// app/example-client-component.js
'use client';

import { useSelectedLayoutSegments } from 'next/navigation';

export default function ExampleClientComponent() {
    const segments = useSelectedLayoutSegments();

    return (
        
            {segments.length === 0 ? (
                Home
            ) : (
                segments.map((segment, index) => (
                    {segment}
                ))
            )}
        
    );
}

JavaScript

// app/dashboard/settings/page.js
export default function SettingsPage() {
    return (
        
            Settings
            
                Welcome to the Settings section of the Dashboard!
        
    );
}

To run the Application open the terminal in the project folder and enter the following command:

npm run dev

Output: