Question 119263 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – My dynamic routing isn't displaying any information, I just get 404. next.js react

I am having issues with dynamic routes in Next.js.
Setup :
I have getStaticPaths and getStaticProps in my dynamic page. When I click on an item that should take me to the dynamic route, the browser navigates to a page with the right url "properties/propertyId" ; However, the page says 404, the page could not be found.

I am not sure if my problem is how I am fetching my data from firebase . I tried using the data fetching method on another page and it does fetch the data, so I am not 100% sure where the problem is.

When I inspect the network tab, it says 404 not found

http://localhost:3000/Properties/5f328e9c-656f-4691-8b4b-4f414bbfdee2

the path is correct, it matches whats in the database, but the webpage says 404

Here is my dynamic page , I believe the getStaticPaths portion is ok, but a second opinion would be nice, however regarding the getStaticProps, I think the problem is there.

import { get, ref } from "firebase/database";
import React, { useState } from "react";
import BookingMenu from "../../components/BookingMenu";
import { database } from "../../components/firebase";
import PropertyStyles from "../../styles/ViewProperty.module.css";

const ViewProperty = ({ property }) => {
  return (
    <>
      <div style={{ display: "flex" }}>
        <div className={PropertyStyles.album}>Property id</div>
        <BookingMenu />
      </div>
    </>
  );
};

export default ViewProperty;

export const getStaticPaths = async () => {
  const propertyRef = ref(database, "properties");
  const allProperties = [];
  const getProperties = async () => (await get(propertyRef)).val();

  getProperties().then((properties) => {
    allProperties.push[properties ? Object.values(properties) : []];
  });

  console.log(allProperties);

  const paths = allProperties.map((property) => {
    return {
      params: { Id: property.Id.toString() },
    };
  });

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.Id;
  const propertyRef = ref(database, "properties/" + id);
  const property = [];
  const getProperties = async () => (await get(propertyRef)).val();

  getProperties().then(
    (prop) => property.push[prop ? Object.values(prop) : []]
  );
  return {
    props: { property: property },
  };
};

pages folder structure
enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I changed fallback in getStaticPaths to true.

    return { paths, fallback: true, };


  2. 0

    use id insted of Id

    const paths = allProperties.map((property) => {
    return {
      params: { id: property.Id.toString() },
    };
});
...
const id = context.params.id;
    Login or Signup to reply.
  3. 0

    Try to visit http://localhost:3000/properties/5f328e9c-656f-4691-8b4b-4f414bbfdee2 – "properties" in lowercase. If you are using Mac OS this problem is possible, because there is case insensitive file system, for example you name folders pages/Properties but for Mac OS it is the same as pages/properties and nextJs will generate /properties

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search