Theo's Typesafe Cult•12mo ago

importing data into [slug]

i have a '/craft' page where i display all the craft titles. at '/craft/{id}' i have to display a specific craft. how do people usually import the data for slug pages depending upon the id? also how do you import custom components for specific pages?

11 Replies

Neto•12mo ago

https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

Routing: Dynamic Routes

Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.

harshcut•12mo ago

i know how to get the id. currently this is my file structure /craft/page.tsx /craft/craft-1/page.tsx /craft/craft-2/page.tsx each craft-n/page has different client react components. how do i store these pages and import them depending upon the id is there an example repo?

Neto•12mo ago

you can render a different components based on the slug

if (slug === 'craft-1') {
  // render X
}

if (slug === 'craft-2') {
  // render Y
}

// return Z (fallback)

if (slug === 'craft-1') {
  // render X
}

if (slug === 'craft-2') {
  // render Y
}

// return Z (fallback)

idk how app dir would cache that

Brendonovich•12mo ago

surely you can just hardcode /craft/craft-n/page.tsx for each thing you need a specific component for, and then use /craft/[id]/page.tsx as a fallback?

harshcut•12mo ago

i was thinking the same thing, but i dont think this the right way currently am i hardcoding the pages. i thought there might an easy way with slugs, as i could just plug the components and write the reusable functions directly into [slug]/page.tsx

Brendonovich•12mo ago

Could you put the shared stuff into a separate component and add the specific stuff as props in each page?

harshcut•12mo ago

the shared stuff will all go into layout.tsx and yes, the specific stuff could be added from props

Neto•12mo ago

If you really want to try You can use dynamic imports and props

ItsBrumm•12mo ago

what u could do is use it like this: files=/craft/[slug]/page.tsx

export default async function Page({ params }: { params: { slug: string } }) {
  return <p>I should render a page for {params.slug}</p>
}

export default async function Page({ params }: { params: { slug: string } }) {
  return <p>I should render a page for {params.slug}</p>
}

hope this is helpfull and if i am wrong please correct me

harshcut•12mo ago

wont be server rendered 😦

ItsBrumm•12mo ago

what I just send should be server rendered have u already found a solution?

Gaming

Programming

importing data into [slug]