Next.js Functions: useSelectedLayoutSegment - Coding

Next.js framework has various useful functions that are used to enhance navigation and routing within applications. One such function is useSelectedLayoutSegment, a client-side hook that allows developers to access the active route segment one level below the current Layout. This function is particularly useful for dynamically updating UI components, such as navigation menus or tabs, based on the active route segment.

useSelectedLayoutSegment Function

The useSelectedLayoutSegment function is a client-side hook in Next.js that allows you to read the active route segment one level below the Layout component in which it is used. This is particularly useful for creating navigation UIs where you need to highlight or style links based on the current route segment. It returns a string representing the active segment or null if no segment is active.

Syntax:

import { useSelectedLayoutSegment } from 'next/navigation';
const segment = useSelectedLayoutSegment(parallelRoutesKey?: string);

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:

Next.js Folder Structure

Dependencies

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

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

CSS

/* src/app/globals.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    margin-bottom: 20px;
}

nav ul {
    padding: 0;
    margin: 0;
}

nav li {
    list-style: none;
}

main {
    padding: 20px;
}

JavaScript

// src/app/about/page.js

export default function AboutPage() {
    return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
            <h1>About Us</h1>
            <p>Information about us.</p>
        </div>
    );
}

JavaScript

// src/app/contact/page.js

export default function ContactPage() {
    return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
            <h1>Contact Us</h1>
            <p>Contact information.</p>
        </div>
    );
}

JavaScript

// src/app/client-component.js

'use client';

import { useSelectedLayoutSegment } from 'next/navigation';

export default function ClientComponent() {
    const segment = useSelectedLayoutSegment();

    return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
            <p>Active segment: {segment || "No segment selected"}</p>
        </div>
    );
}

JavaScript

// src/app/layout.js

import { Inter } from "next/font/google";
import "./globals.css";
import ClientComponent from './client-component';
import Link from "next/link";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
    title: "Next.js Interactive Example",
    description: "Interactive example using useSelectedLayoutSegment",
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body className={inter.className}>
                <header>
                    <h1 style={{ color: 'green', textAlign: 'center' }}>GeeksforGeeks</h1>
                    <h3 style={{ textAlign: 'center' }}>useSelectedLayoutSegment Function Example</h3>
                </header>
                <nav>
                    <ul style={{ display: 'flex', 
                                 listStyle: 'none',
                                 padding: 0,
                                 justifyContent: 'center' }}>
                        <li style={{ marginRight: '10px' }}>
                            <Link href="/">Home</Link>
                        </li>
                        <li style={{ marginRight: '10px' }}>
                            <Link href="/about">About</Link>
                        </li>
                        <li>
                            <Link href="/contact">Contact</Link>
                        </li>
                    </ul>
                </nav>
                <ClientComponent />
                <main>
                    {children}
                </main>
            </body>
        </html>
    );
}

JavaScript

// src/app/page.js

export default function HomePage() {
    return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
            <h1>Welcome to the Home Page</h1>
            <p>This is the homepage content.</p>
        </div>
    );
}

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

npm run dev

Output:

Next.js Functions: useSelectedLayoutSegment

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Next.js Functions: useParams
Next.js vs Nuxt.js
How To Add Google Analytics in React?
Next.js Functions: redirect
What are the Issues of Continuing to Import createRoot from "react-dom"?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	20