How to get the client side url in layout.tsx in Next 14 app router

[sammyview80]

`import { headers } from 'next/headers';

export default function Home() {
const headersList = headers();

headersList.get('host'); // to get domain
headersList.get('next-url'); // to get url

return

....

}`
host is localhost but I want the domain ie xyz.domain.com.

Geeting guys. I want to create a multi-tanent architecture saas application. Where I want to render a meta data based on the subdomain. For example: subdomain.trendspot80.tech i want to grab this subdomain and pass to layout.tsx so that express backend select schema based on subdomain. By using headers().get('host') it gave me localhost:3000 ie host running on server. I am stuck in here. using headers().get('referer') gave me null as it only provide domain if user redirect from client.

Here is code I have implemented in layout.tsx

`import "@/global.css";
import Provider from "@/providers";
import type { Metadata } from "next";

import Footer from "@/components/molecules/Footer";
import MainHeader from "@/components/molecules/MainHeader";
import { getWebsiteLayouts } from "@/services/layout";
import { fonts } from "../../../public/assets/fonts";
import { getOrign } from "@/lib/storageServer";
import { headers } from "next/headers";

export async function generateMetadata(): Promise {
const { data } = await getWebsiteLayouts('dallas_clothings.trendspot80.tech');
if (!data) {
return {
title: "TrendSpot ",
description: "Trendspot largest social media platform in the world",
};
}
return {
title: data?.results?.[0].name,
description: data?.results?.[0].description || "",
};
}

export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {

const origin = await getOrign();
console.log(origin, 'o')
const currentUrl = headers().get("referer");

console.log("saman", currentUrl);
const { data } = await getWebsiteLayouts(origin || currentUrl || '')

const palette = {
primary: data?.results?.[0].primaryColor || "#944e63",
secondary: data?.results?.[0].secondaryColor || "#944e63"
};

return (




{children}

);
}`

Please help me weather I could get the domain in layout.tsx or not.

[icyJoseph]

See the Layouts section on this post, #63775

Layout do not re-render on navigation, therefore are not recommend for auth checks. Consider a shared navigation that displays user information:

In your case, what you need to do, is create a use client component, read from usePathname and do all of your magic there, and then import that into the RootLayout, and wrap the children it renders. This keeps the RootLayout as a server component, and allows you to have a wedge in the client, where you can read otherwise not available information. Though, in client components, request information is not present, but it is derived in usePathname.