Dynamic Metadata

In the Domiex - Next JS Admin & Dashboard Template, you can dynamically update page titles based on the active route using usePathname() and useEffect(). This method ensures that each page has a unique title, improving both user experience and SEO performance.

1: Define Metadata

To change other meta tags, modify the src/app/layout.jsx file accordingly. 

import ClientProviders from '@src/components/common/ClientProviders';
import { Metadata } from 'next';

export function generateViewport() {
    return {
        width: 'device-width',
        initialScale: 1,
        userScalable: 'no',
    };
}

export async function generateMetadata() {
    return {
        title: 'Domiex - Next TS Premium Admin & Dashboard Template',
        description: 'Domiex is a powerful and responsive admin dashboard template supporting 21 frameworks',
        keywords: [
            'admin dashboard template',
        ],
        openGraph: {
            title: 'Domiex - Next TS Premium Admin & Dashboard Template',
        },
    }
};                   

export default function RootLayout({ children }) {
    return (
        <html lang="en">               
            <body>
                {children}
            </body>
        </html>               
    );
}
2: Define Routes

The first is to define the available routes with their respective titles. These routes will be used to dynamically update the page title based on the active URL.

  • Navigate to the src directory.
  • Open the Common folder and locate the DynamicTitle.js file.
  • Add or modify the route item data to include your new page title.
  • Ensure the path property matches your page’s route.
export const routes = [
    { path: '/dashboard', title: 'Dashboard' },
    { path: '/apps-ecommerce/shop-cart', title: 'Shop Cart' },
    { path: '/apps-ecommerce/wishlist', title: 'Wishlist' },
    { path: '/new-page', title: 'New Page' }, // Add new page dynamically
];
3: Apply Dynamic Metadata

Now, we will use usePathname() to fetch the current URL and match it with the defined routes. When a match is found, we update the document.title dynamically. 

'use client';

import { useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { routes } from '@src/components/common/DynamicTitle';

export default function LayoutWrapper() {
    const pathname = usePathname();
    const route = routes.find((r) => r.path === pathname);

    useEffect(() => {
        document.title = route
            ? `${route.title} | Domiex - Premium Versatile Admin & Dashboard Template`
            : 'Domiex - Premium Versatile Admin & Dashboard Template';
    }, [route]);

    return null;
}
4: Integrate with Layout

To apply dynamic titles across all pages, include the DynamicTitle component inside your main layout file. 

import LayoutWrapper from '@src/components/layout/LayoutWrapper';

export default function Layout({ children }) {
    return {children};
  }
5: Test Your Implementation
  • Start the development server using yarn dev or npm run dev.
  • Navigate to different routes and observe the browser’s title bar.
  • Use browser developer tools to inspect the <title> tag inside the <head> section.
Receive the latest updates directly in your inbox!

Be the first to know about new updates and exclusive discounts. No spam, just great offers!

How about

A Custom Project?

With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.

Hire Us
More for Domiex
Domiex Admin & Dashboards
230+

Total Pages

5+

Layouts

11+

Application

We provide quick support withing one business day to all of our customers.

© Domiex Created & Crafted by SRBThemes.