Переход непосредственно к динамическому маршруту в Next.js и статическому хостинг-сайту, такому как Github Pages, дает 404
Я пишу свое веб-приложение в Next.js и размещаю его на страницах Github (внешнее ограничение, лично я буду использовать Vercel или что-то еще).
У меня есть динамический маршрут: webapp.com/experiments/[id].
Идентификатор должен генерироваться динамически всякий раз, когда пользователи создают эксперимент, поэтому я не могу предварительно загрузить все идентификаторы для создания статических страниц.
Важно, чтобы эти страницы могли генерироваться динамически без необходимости повторной сборки/повторного развертывания проекта.
В localhost я могу зайти на свою страницу, и она может получить данные и отобразить их на странице.
Однако, как только я разместил его на страницах Github, я могу щелкнуть страницу, и она загрузится, но когда я пытаюсь перейти непосредственно к 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
};
}
Да, у меня есть .nojekyll
Ответы 2
Я пропустил важную часть вашего вопроса, когда я прокомментировал. Вы динамически отображаете некоторые страницы, но используете статические ресурсы. Github Pages не запускает сервер Next, предполагается, что вы развертываете статические страницы (все они уже созданы). У сайта, размещенного на gh-pages, нет возможности динамически получать данные на стороне сервера, потому что сервера нет. Если получение новых экспериментов является обязательным требованием, вам необходимо разместить свое приложение на VPS или облачном провайдере.
Да, именно это - в итоге просто перешел на другой хостинг.
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>
);
}
У вас есть файл
.nojekyll(он может быть пустым) в корне ветки ваших страниц?