Issue with Dynamic Routes in Next.js App Hosted on Firebase

Question

I'm working on a Next.js project with dynamic routing and have encountered a problem when hosting it on Firebase. The application works fine locally, but the dynamic routes don't work as expected after deployment.

Here's an overview of my setup:

• Next.js MainPage /search/ this is in search/index.tsx
• Next.js app with dynamic routes (e.g., /search/brands/search/brand/toyota).
• Using dynamic routing with both index.tsx and [...params].tsx (both remains under pages/search.This works fine in locally)
• Deploying to Firebase using GitHub Actions.

The relevant part of my firebase.json looks like this:

 "rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

Here are my specific questions:

• How can I configure Firebase Hosting to correctly handle dynamic routes in a Next.js application?
• Is my firebase.json rewrite configuration correct for supporting dynamic routes, or does it need adjustments?
• Given that Firebase Hosting serves static files, is there a way to make these dynamic routes work, or should I consider a different approach or hosting solution for my Next.js app?

Following is the [...params].tsx

// pages/search/[...params].tsx
import SearchCars from "@/components/pages/SearchCars";
import { useGlobalContext } from "@/contexts/GlobalContext";
import { buildSearchFilterFromDynamicRoute } from "@/graphql/filters";
import { useRouter } from "next/router";
import React, { useEffect } from "react";

const SearchPage: React.FC = () => {
  const router = useRouter();
  const { params } = router.query;
  const { setSearchFilter } = useGlobalContext();

  console.log(params);

  useEffect(() => {
    if (params && Array.isArray(params)) {
      const searchFilter = buildSearchFilterFromDynamicRoute(params);
      setSearchFilter(searchFilter);
    }
  }, [params, setSearchFilter]);
  return <SearchCars />;
};

export default SearchPage;

Any insights or suggestions would be greatly appreciated!

Answer 1

I was able to fix the issue as following.

• First run npm build with above mentioned [...params].tsx file.This should create following folder structure in "out" or in the "build" folder
• --search--index.html
• --search--[...params]--index.html

Then create firebase.json file as following

"rewrites": [
      {
        "source": "/search/**",
        "destination": "/search/[...params]/index.html"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]

After that I was able to handle multiple dynamically changing paths in nextjs on the firebase.