Discussion about creating a catch-all route within the app directory in Next.js and Sanity.io.

import { groq } from 'next-sanity'
import getQueryFromSlug from '@helpers/getQueryFromSlug'
import { sanityClient } from '@lib/sanity.server'
import SinglePage from './single-page'

export async function generateStaticParams() {
  const paths = await sanityClient.fetch(groq`*[_type in ["page", "post"] && defined(slug.current)][].slug.current`)

  return paths.map((slug: string) => ({
    slug: slug.split('/').filter((p) => p),
  }))
}

/**
 * Helper function to return the correct version of the document
 * If we're in "preview mode" and have multiple documents, return the draft
 */
function filterDataToSingleItem(data: object | any, preview = false) {
  if (!Array.isArray(data)) {
    return data
  }

  if (data.length === 1) {
    return data[0]
  }

  if (preview) {
    return data.find((item) => item._id.startsWith(`drafts.`)) || data[0]
  }

  return data[0]
}

export default async function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = params

  const { query, queryParams, docType } = getQueryFromSlug(slug)

  const pageData = await sanityClient.fetch(query, queryParams)

  const data = filterDataToSingleItem(pageData, false)

  return (
    <>
      {docType === 'page' && <SinglePage data={pageData} />}
    </>
  )
}

import { groq } from 'next-sanity'

const getQueryFromSlug = (slugArray = []) => {
  const docQuery = {
    post: groq`*[_type == "post" && slug.current == $slug][0] {
      title,
      _type,
      "slug": slug.current,
    }`,
    page: groq`*[_type == "page" && slug.current == $slug][0] {
      title,
      _type,
      "slug": slug.current,
    }`,
  }

  let docType = ''

  const [slugStart] = slugArray

  // We now have to re-combine the slug array to match our slug in Sanity.
  let queryParams = { slug: `/${slugArray.join('/')}` }

  if (slugStart === 'post' && slugArray.length === 2) {
    docType = `post`
  } else {
    docType = `page`
  }

  return {
    docType,
    queryParams,
    query: docQuery[docType],
  }
}

export default getQueryFromSlug

'use client'

import React from 'react'

interface SinglePageProps {
  data: object | any
}

const SinglePage = ({ data }: SinglePageProps) => {
  console.log(data)
  return (
    <>
      Page
    </>
  )
}

export default SinglePage