Search code examples
react-routernext.jsfirebase-hostingssg

How to combine the SG page of next.js with firebase hosting and CSR routing for some pages


I want to publish my site on firebase hosting.
I'm using Static Generate in Next.js to create a page.
However, there are some pages that I want to do dynamic routing like a blog.

The URL looks like this "blog/[slug]"
If reloaded on a page other than the top page, it will be 404, so use next.config.
"Trailing Slash: true" is set.

When Dynamic Routing is performed with SG, the page has a file such as "blog/[slug]/index.html" exported.

Normally, it works fine for the transition from the top screen, but If you reload with that URL, it will be 404.

One way to solve this is to detect that the blog is updated and rebuild it with WebHook etc. and deploy it.

There are various ways to do this on the website, but it is difficult to build each time because the update frequency is high.

Next, I'm thinking of doing CSR (Client Side Rendering) only for the blog part in the SG site.
Can't you route using a regular React Router? about it.
I tried to use React Router only for some pages, but I get an error because React Router is not a server side process.

Is the second thing I'm trying to do feasible?

If you have any other solutions to this problem, please let me know.

PS: Firebase Functions cannot be used due to a cold start issue...

Best regard.


Solution

  • It seems that it was solved just by entering the rewrite setting. Thank you to everyone who saw the question.

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