直接转到Next.js中的动态路由和Github Pages这样的静态托管网站会出现404

bvk5enib 于 2023-04-11 发布在 Git

关注(0)|答案(2)|浏览(194)

我用Next.js编写Web应用程序，并将其托管在Github Pages上（这是一个外部约束，我个人会使用Vercel或其他东西）。
我有一个动态路由：webapp.com/experiments/[id]。
每当用户创建实验时，ID需要动态生成，因此我无法预加载所有ID来构建静态页面。

重要的是这些页面能够动态生成，而无需重新构建/重新部署项目。

在localhost上，我可以转到我的页面，它可以检索数据并将其显示在页面上。
然而，一旦我把它托管到Github Pages上，我可以点击页面，它就会加载，但是当我试图直接转到URL时，它给了我一个404。
我已经设置了getStaticPaths和getStaticProps，它构建了已知的页面，但当我去一个新的实验的URL，它仍然给我一个404。
我错过了什么？还有别的方法吗？

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
  };
}

next.js

来源：https://stackoverflow.com/questions/75945464/going-directly-to-a-dynamic-route-in-next-js-and-a-static-hosting-site-like-gith

2条答案

按热度按时间

kmbjn2e31#

我在评论的时候漏掉了你问题的一个重要部分。你正在动态渲染一些页面，但是你正在部署静态资产。Github Pages不运行Next服务器，它假设你正在部署静态页面（所有的，已经建立）。对于托管在gh-pages上的网站来说，没有办法动态地从服务器端获取数据，因为没有服务器。如果获取新的实验是一个要求，您需要将应用托管在VPS或云提供商上。

赞(0）回复(0）举报 2023-04-11

jhiyze9q2#

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>
  );
}

赞(0）回复(0）举报 2023-04-11

我来回答

直接转到Next.js中的动态路由和Github Pages这样的静态托管网站会出现404

2条答案

相关问题

热门标签

最新问答