How to pass non-slug string params from getStaticPaths to getStaticProps in Next.js?

The issue you're experiencing is due to how Next.js handles dynamic routes. In Next.js, getStaticPaths can only return params that correspond to actual dynamic route segments in your file structure.

For example:

• If your file is pages/[slug].js, you can only return { params: { slug: "..." } }
• If your file is pages/[slug]/[tags].js, you can return { params: { slug: "...", tags: "..." } }

When you return extra params that don't match your file structure, Next.js simply ignores them, which is why tags comes through as null in getStaticProps.

Solutions:

Option 1: Change your file structure (if you want tags in the URL) If you want both slug and tags as URL parameters, rename your file to something like pages/[slug]/[tags].js:

export async function getStaticPaths() {
  const chapters = await client.fetch(
    `*[_type == "chapters" && defined(slug.current)] {
      "slug": slug.current,
      "tags": tags
    }`
  );
  return {
    paths: chapters.map((s: any) => ({
      params: { slug: s.slug, tags: s.tags }
    })),
    fallback: false,
  }
}

Option 2: Fetch tags in getStaticProps (recommended) Keep your current file structure and fetch the tags based on the slug:

export async function getStaticProps(context: any) {
  const { slug = "" } = context.params
  
  // First get the chapter with its tags
  const chapter = await client.fetch(`
    *[_type == "chapters" && slug.current == $slug][0] {
      tags
    }
  `, { slug })
  
  // Then use the tags value for your suggestions query
  const suggestions = await client.fetch(`
    *[_type == "chapters" && tags == $tags][0]
  `, { tags: chapter?.tags })
  
  return {
    props: { suggestions }
  }
}

Option 3: Use query parameters instead If tags don't need to be in the URL path, you could pass them as query parameters, but this doesn't work well with static generation.

Option 2 is typically the best approach since you're only generating paths based on slug, and you can fetch all related data (including tags) within getStaticProps using that slug.