Help with adding subpages

[atomic vigil]

How to create subpages of a pages collection, if we have app/[slug]/page.tsx for pages collection then how we should config collection to create subpages and how to build folder strucutre to render subpages.
Is it something like: app/[slug]/page.tsx & app/[slug]/[slug]/page.tsx
Could you please help me to understand this topic

[uncut agate]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Blocks Field - Block Configs
• Search Plugin
• Collection Configs
• Page Metadata
• Page Metadata - Root Metadata

[atomic vigil]

Help with adding subpages

[violet fern]

One way to do it is use catch-all route segments

This way, you write the logic to fetch your page data in app/[…slug]/page.tsx and it should handle anything like /route/subroute/leafroute.

If you’re using the website template, you may need to modify the existing slug field to allow for slashes etc in the slug value.

[atomic vigil]

Thanks @violet fern , could you please provide me a brief to how we can achieve it in backend (pages collection) also. the payload official website is a bit complex to me as a new to these topics.

[violet fern]

export default async function Page({ params: paramsPromise }: Args) {
  const { isEnabled: draft } = await draftMode()
  const { slug = ['home'] } = await paramsPromise
  const url = '/' + (slug ?? []).join('/')

  let page: PageType | null

  page = await queryPageBySlug({
    slug: slug.join('/'),
  })

  // Remove this code once your website is seeded
  if (!page && slug[0] === 'home') {
    page = homeStatic
  }

  if (!page) {
    return <PayloadRedirects url={url} />
  }

  const { hero, layout } = page

  return (
    <article>
      <PageClient />
      {/* Allows redirects for valid pages too */}
      <PayloadRedirects disableNotFound url={url} />

      {draft && <LivePreviewListener />}

      <RenderHero {...hero} />
      <RenderBlocks blocks={layout} _page={omit(page, ['hero', 'layout'])} />
    </article>
  )
}

Here's what I use in the page.tsx file I mentioned. Replace queryPageBySlug with your own function that uses the local api to find a page by the slug.

Most of what you need should be able to be found in the payload website template, that's what my project is based on.