Question 72726 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Going directly to a dynamic route in Next.js and a static hosting site like Github Pages is giving a 404 – Reactjs

I’m writing my web app in Next.js and I’m hosting it on Github Pages (an outside constraint, would personally use Vercel or something else).

I have a dynamic route: webapp.com/experiments/[id].

ID needs to be dynamically generated whenever a users creates an experiment, therefore I cannot preload all the IDs to build the static pages.

It is important these pages are able to be generated dynamically without needing to re-build / re-deploy the project.

On localhost, I’m able to go to my page and it is able to retrieve data and display it on the page.

However, once I’ve hosted it onto Github Pages, I can click to the page and it will load, but when I try to go directly to the URL, it gives me a 404.

I’ve set up getStaticPaths and getStaticProps and it built out the known pages but when I go to a URL for a new experiment it still gives me a 404.

What am I missing?
Is there a different way of doing this?

export async function getStaticPaths() {
  // Fetch initial list of experiment IDs from your database
  const experimentIds = await fetchExperimentUrls();

  // Generate paths for static generation
  const paths =
    experimentIds.urls.map((url: string) => ({
      params: { url: url.toString() },
    }));

  return {
    paths,
    fallback: true, 
  };
}

export async function getStaticProps({ params }: any) {
  const { url } = params;
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/experiments/${url}`,
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    }
  );
  const experimentProps = await res.json();
  return {
    props: {
      experimentProps,
    },
    revalidate: 60, // Optional: Set a revalidation time (in seconds) to update the static page
  };
}
Tags:

2

Answers


  1. 0

    I missed an important part of your question when I commented. You’re dynamically rendering some pages, but you’re deploying static assets. Github Pages doesn’t run the Next server, it assumes you’re deploying static pages (all of them, already built). There’s no way for a site hosted on gh-pages to dynamically fetch data server-side, because there’s no server. If fetching new experiments is a requirement, you’ll need to host your app on a VPS or cloud provider.

    Login or Signup to reply.
  2. 0 
    import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function ExperimentPage() {
  const router = useRouter();
  const [experimentProps, setExperimentProps] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/experiments/${router.query.id}`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Accept: "application/json",
          },
        }
      );
      const data = await res.json();
      setExperimentProps(data);
    }
    if (router.query.id) {
      fetchData();
    }
  }, [router.query.id]);

  if (!experimentProps) {
    return <div>Loading...</div>;
  }

  return (
    <div>...</div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search