CODEWITHSUNDEEP
javascriptreactjsfirebasenext.jsfirebase-hosting
Christian Aichner
Christian Aichner

Reputation: 408

NextJS calling dynamic page on production redirects to root

What I want

User enters https://www.example.com/test, user gets content of NextJS dynamic route /test/index.js. This works locally.

What happens

User enters https://www.example.com/test, user gets content of root page (index.js). The browser still shows https://www.example.com/test but it's not the content of /test/index.js. This only appears on production.

Infos

Upvotes: 1

Views: 1054

Answers (1)

Christian Aichner
Christian Aichner

Reputation: 408

The root of the problem was, that I was exporting the NextJS application and using the output as source files for Firebase. The solution for my specific problem was, to set up Firebase functions to really enable serverside rendering instead of displaying served static files. This also solved my routing problem.

I found tutorials to be very misleading, once everyone uses different folder structures and ways to deploy the application.

If you are facing the same problem, feel free to check out my repository. It is a combination of the Firebase config, package.json and server file working together - taking in account different folder paths for exporting for development and production.

These resources were helpful to me:

Overall Tutorial: https://itnext.io/deploying-next-js-app-to-firebase-functions-eb473791d79e - This is missing some steps regarding function names.

Great for understanding what each file does: https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs

Nice for understanding ways of rendering: https://codeburst.io/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2

This made me understand how to use Firebase function names correctly: https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting

Upvotes: 5

Related Questions