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
Neto•17mo ago
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
harshcut•17mo 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
Neto•17mo 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
Brendonovich•17mo 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
harshcut•17mo 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
Brendonovich•17mo ago
Could you put the shared stuff into a separate component and add the specific stuff as props in each page?
harshcut
harshcut•17mo ago
the shared stuff will all go into layout.tsx and yes, the specific stuff could be added from props
Neto
Neto•17mo ago
If you really want to try You can use dynamic imports and props
ItsBrumm
ItsBrumm•17mo 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
harshcut•17mo ago
wont be server rendered 😦
ItsBrumm
ItsBrumm•17mo ago
what I just send should be server rendered have u already found a solution?
Want results from more Discord servers?
Add your server