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!

Rukshan · Accepted Answer · 2024-01-26 10:46:25Z

3

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.

answered Jan 26, 2024 at 10:46

Rukshan

731 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related