NextJS app router trips/[id]/page.tsx

Hello all, How do I correctly pull in [id] to page.tsx to console.log and display the id?
3 Replies
JulieCezar
JulieCezar17mo ago
Server components
export default function Page({
params,
searchParams,
}: {
params: { slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}) {
return <h1>My Page</h1>
}
export default function Page({
params,
searchParams,
}: {
params: { slug: string }
searchParams: { [key: string]: string | string[] | undefined }
}) {
return <h1>My Page</h1>
}
Client
'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
const params = useParams()

// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)

return <></>
}
'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
const params = useParams()

// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)

return <></>
}
Huperniketes
Huperniketes17mo ago
If you need to set up props with getServerSideProps(), you'd do something like
export async function
getServerSideProps(ctx: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>): Promise<{ props: {
id: string,
}}>
{
const id = ctx.query?.id || "";

return ({ props: { id }});
}
export async function
getServerSideProps(ctx: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>): Promise<{ props: {
id: string,
}}>
{
const id = ctx.query?.id || "";

return ({ props: { id }});
}
four4255
four425517mo ago
Thank you both!
Want results from more Discord servers?
Add your server