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

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•15mo 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•15mo ago

Thank you both!

Gaming

Programming

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