Theo's Typesafe Cult•2y 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•2y 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.

harshcutOP•2y 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•2y 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•2y 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?

harshcutOP•2y 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•2y ago

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

harshcutOP•2y ago

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

Neto•2y ago

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

ItsBrumm•2y 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

harshcutOP•2y ago

wont be server rendered 😦

ItsBrumm•2y ago

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

Gaming

Programming

importing data into [slug]