So I was working on my project I wanted to make a dynamic url function where if you visit different URLs you get different content in the same page, So if you visit 'wuilder.in/client1' you get different title and description and if you visit 'wuilder.in/client2' you get another title and description I created this page inside app/[client]/page.tsx:
import brandingData from '@/data/brandingData';
export default function ClientWebsite({ params }: { params: { client: string } }) {
const defaultConfig = {
title: "Welcome to Wuilder",
bgColor: "bg-gray-500",
logo: "/logos/default.png",
description: "Powerful websites for every business."
};
const clientConfig = brandingData[params.client] || defaultConfig;
return (
<div className='min-h-screen flex flex-col items-center justify-center'>
<img src={clientConfig.logo} alt="Logo" className="w-32 h-32 mb-4" />
<h1 className="text-white text-3xl font-bold">{clientConfig.title}</h1>
<p className="text-white text-lg mt-2">{clientConfig.description}</p>
</div>
);
}
It worked fine and fetching and displaying all the data from the brandingData.ts:
type BrandingConfig = {
title: string;
logo: string;
description: string;
};
const brandingData: Record<string, BrandingConfig> = {
client1: {
title: "Client 1 - Tech Solutions",
logo: "/space/satelite-launch.jpg",
description: "Innovative tech solutions for modern businesses.",
},
client2: {
title: "Client 2 - Fashion Hub",
logo: "/space/gabriele-garanzelli-PzO_CitnJdI-unsplash.jpg",
description: "Trendy fashion and lifestyle brand.",
},
client3: {
title: "Client 3 - Coffee Express",
logo: "/space/spacex-OHOU-5UVIYQ-unsplash.jpg",
description: "The best coffee experience, delivered to you.",
}
};
export default brandingData;
but I am getting this annoying error in my console:
Error: Route "/[client]" used `params.client`. `params` should be awaited before using its properties. Learn more:
at client (app\[client]\page.tsx:11:45)
9 | };
10 |
> 11 | const clientConfig = brandingData[params.client] || defaultConfig;
| ^
12 |
13 | return (
14 | <div className='min-h-screen flex flex-col items-center justify-center'>
GET /client3 200 in 203ms
I tried everything I don't know what to do
I am expecting this error to be gone, Help me!
So I was working on my project I wanted to make a dynamic url function where if you visit different URLs you get different content in the same page, So if you visit 'wuilder.in/client1' you get different title and description and if you visit 'wuilder.in/client2' you get another title and description I created this page inside app/[client]/page.tsx:
import brandingData from '@/data/brandingData';
export default function ClientWebsite({ params }: { params: { client: string } }) {
const defaultConfig = {
title: "Welcome to Wuilder",
bgColor: "bg-gray-500",
logo: "/logos/default.png",
description: "Powerful websites for every business."
};
const clientConfig = brandingData[params.client] || defaultConfig;
return (
<div className='min-h-screen flex flex-col items-center justify-center'>
<img src={clientConfig.logo} alt="Logo" className="w-32 h-32 mb-4" />
<h1 className="text-white text-3xl font-bold">{clientConfig.title}</h1>
<p className="text-white text-lg mt-2">{clientConfig.description}</p>
</div>
);
}
It worked fine and fetching and displaying all the data from the brandingData.ts:
type BrandingConfig = {
title: string;
logo: string;
description: string;
};
const brandingData: Record<string, BrandingConfig> = {
client1: {
title: "Client 1 - Tech Solutions",
logo: "/space/satelite-launch.jpg",
description: "Innovative tech solutions for modern businesses.",
},
client2: {
title: "Client 2 - Fashion Hub",
logo: "/space/gabriele-garanzelli-PzO_CitnJdI-unsplash.jpg",
description: "Trendy fashion and lifestyle brand.",
},
client3: {
title: "Client 3 - Coffee Express",
logo: "/space/spacex-OHOU-5UVIYQ-unsplash.jpg",
description: "The best coffee experience, delivered to you.",
}
};
export default brandingData;
but I am getting this annoying error in my console:
Error: Route "/[client]" used `params.client`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
at client (app\[client]\page.tsx:11:45)
9 | };
10 |
> 11 | const clientConfig = brandingData[params.client] || defaultConfig;
| ^
12 |
13 | return (
14 | <div className='min-h-screen flex flex-col items-center justify-center'>
GET /client3 200 in 203ms
I tried everything I don't know what to do
I am expecting this error to be gone, Help me!
The error is quite explanatory. In NextJS version 15, the searchParams and the params props of the Page component are now asynchronous and you would need to await them before using them.
export default async function ClientWebsite({ params }: { params: Promise<{ client: string }> }) {
const defaultConfig = {
title: "Welcome to Wuilder",
bgColor: "bg-gray-500",
logo: "/logos/default.png",
description: "Powerful websites for every business."
};
const client = (await params).client
const clientConfig = brandingData[client] || defaultConfig;
return (
<div className='min-h-screen flex flex-col items-center justify-center'>
<img src={clientConfig.logo} alt="Logo" className="w-32 h-32 mb-4" />
<h1 className="text-white text-3xl font-bold">{clientConfig.title}</h1>
<p className="text-white text-lg mt-2">{clientConfig.description}</p>
</div>
);
}