Next.js Discord

Discord Forum

Production dynamic route 404 error with SSG

Unanswered
Black-crowned Night-Heron posted this in #help-forum
Open in Discord
Black-crowned Night-HeronOP
I am getting 404 errors on my dynamic route pages in production for static pages to be hosted on firebase

here is my dynamic page file structure /[blogTitle]/page.tsx
'use client'
import { collection, getFirestore, query, where } from "firebase/firestore"
import { app } from '../../../firebase/clientApp'
import { useCollectionData } from "react-firebase-hooks/firestore"

export const getStaticPaths = async () => {
  return {
    paths: [],
    fallback: true,
  }
}

 
export default function BlogTitle({ params }: any) {
  const database = getFirestore(app)
  const reference = collection(database, 'BlogPosts')
  const queryReady = query(reference, where("key", "==", `${params.blogTitle}`))
  const [data]: any[] = useCollectionData(queryReady)
  return (
    // INSERTHTML
  )
}



here is my next config 
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  reactStrictMode: true,
  swcMinify: true,
  output: "export",
  trailingSlash: true

}

module.exports = nextConfig

I am building for firebase
the error is only present in production not in developement I have tried all sorts of getstaticpaths configurations but I have not found a working one,

Thank you

2 Replies

Rafael Almeida
when using fallback: true Next.js will serve a fallback page while it is building the actual page, and while this happens the props are gonna be empty. you need to check for the fallback state and render a loading page: https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-pages

function Post({ post }) {
  const router = useRouter()
 
  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (router.isFallback) {
    return <div>Loading...</div>
  }
 
  // Render post...
}


or you can use fallback: 'blocking' and instead of serving a fallback page, Next will serve the page as SSR for the first request and add it to the cache so you don't need to check for the fallback
btw the whole question is a bit confusing. it looks like you are using the app dir (because of the [blogTitle]/page.tsx path) but getStaticPaths is not supported using this router. and you are also using output: "export" in the config file but fallback: true is not supported when using this output option