2

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
  };
}
2
  • Do you have a .nojekyll file (it can be empty) in the root of your pages branch?
    – Zac Anger
    Commented Apr 6, 2023 at 3:29
  • Yup, I have a .nojekyll
    – m1771vw
    Commented Apr 6, 2023 at 4:20

3 Answers 3

2

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.

1
  • 1
    Yup, exactly this -- ended up just going with a different hosting service
    – m1771vw
    Commented Apr 8, 2023 at 1:38
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>
  );
}
1
  • Please consider adding some explanation, Adding just a code snippet does not really help the SO community. I would recommend you to please take a look at how to write a good answer before you engage further on SO stackoverflow.com/help/how-to-answer Commented Jun 6 at 23:57
-1

I faced the same issue recently. My solution is to rewrite my code using React JS and a hash router. So the routes become https://example.com/#/whatever_routes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.