Hi @split fulcrum. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Get value from URL
west merlinBOT
In Next.js, when you're working with dynamic routes, you can access the dynamic parts of the URL via the params prop. In your case, you should access the dynamic url part of your route like this:
// app/news/[url]/page.tsx
export default async function DisplayPage({ params }) {
return(
<h1>Welcome to { params.url } </h1>
)
}
Here, params is an object that contains the dynamic segments of your URL. In your case, it would be { url: 'your-dynamic-part' }.
This is explained in the Next.js documentation (https://nextjs.org/docs/app) where it states "You can access the route segments through the params prop for a given page."
Remember, the name of the dynamic segment (in this case url) should match the name you used in the file path ([url]).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
You can define the type for params using TypeScript. In your case, you can define a type for params where url is a string. Here's how you can do it:
type Params = {
url: string;
};
export default async function DisplayPage({ params }: { params: Params }) {
// your code here
return (
<div>
<div className="p-5 m-5 bg-gray-100">
Velkommen hit
<strong>
ID: {params.url}
</strong>
</div>
</div>
);
}
In the above code, Params is a type that represents an object with a url property of type string. This type is then used to type the params prop in your DisplayPage function.
This is explained in the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#typescript) where it states "When using TypeScript, you can add types for params depending on your configured route segment."
Remember, the name of the dynamic segment (in this case url) should match the name you used in the file path ([url]).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
To include params.url in your page declaration and use it in your client.fetch call, you can pass it as a parameter to your query. Here's how you can do it:
type Params = {
url: string;
};
export default async function DisplayPage({ params }: { params: Params }) {
const page = await client.fetch(
`*[_type == "CorporatePage" && locSlug.no.current == $slug[0]]{
_id,
title,
"slug": locSlug.no.current,
lead,
content,
}`,
{ slug: params.url } // passing params.url as slug
);
// rest of your code
return (
<div>
<div className="p-5 m-5 bg-gray-100">
Velkommen hit
<strong>ID: {params.url}</strong>
</div>
</div>
);
}
In the above code, params.url is passed as the slug parameter to the client.fetch call. This will replace $slug[0] in your query with the actual url from your route.
Please note that the actual implementation might vary depending on the specifics of your client and the structure of your data in Sanity.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
The error message suggests that params.url is undefined at the time of the client.fetch call. This could happen if the page is being pre-rendered and the url parameter is not available yet.
To fix this, you can add a check to ensure params.url is defined before making the client.fetch call. Here's how you can do it:
type Params = {{
url: string;
}};
export default async function DisplayPage({{ params }}: {{ params: Params }}) {{
let page;
if (params.url) {
page = await client.fetch(
`*[_type == "CorporatePage" && locSlug.no.current == $slug[0]]{{
_id,
title,
"slug": locSlug.no.current,
lead,
content,
}}`,
{{ slug: params.url }} // passing params.url as slug
);
}
// rest of your code
return (
<div>
<div className="p-5 m-5 bg-gray-100">
Velkommen hit
<strong>ID: {{params.url}}</strong>
</div>
</div>
);
}}
In the above code, the client.fetch call is only made if params.url is defined. If params.url is undefined, page will remain undefined.