Сборка Nextjs успешна на netlify, но css сайта недоступен
Мой сайт Nextjs строится без ошибок на netlify. Но сайт выглядит вот так и не подхватывает css. Консоль показывает синтаксическую ошибкуUncaught SyntaxError: Unexpected token '<'. Маршрутизация тоже не работает.
Этот сайт отлично работает при развертывании на vercel. Когда я бегуnpm run build and npm run startлокально тоже работает нормально. Мои сценарии в package.json следующие:
"scripts": {
"dev": "next dev",
"start": "next start",
"build": "next build"
},
Раньше я использовалnext build && next exportдля создания моего сайта, но теперь мне нужна добавочная статическая регенерация , которая не поддерживается при следующем экспорте .
Мои настройки развертывания netlify следующие :
Когда я использую ссылку на любую динамическую страницу, которой нет в getStaticPaths, я попадаю на домашнюю страницу. Если я перехожу по URL-адресу из приложения, оно работает нормально, но обновление возвращает меня на домашнюю страницу. Когда я удаляюnext exportЯ столкнулся с вышеуказанной проблемой в netlify.
урезанный код моей динамической страницы выглядит следующим образом [tag].js
import Head from "next/head";
import SearchPage from "../../components/app/SearchPage/SearchPage";
import {
fetchAllCuratedTopicsToRender,
fetchTitleAndDescription,
} from "../../services/SearchService";
const Search = ({ title, meta_description }) => {
const defaultTitle = "default title";
const defaultMetaDescription = "default meta description";
return (
<>
<Head>
<title key="title">{title || defaultTitle}</title>
<meta
name="description"
content={meta_description || defaultMetaDescription}
key="description"
/>
</Head>
<SearchPage />
</>
);
};
export default Search;
// Generates all the paths for the curated topics stored in the database
export async function getStaticPaths() {
const APIresponse = await fetchAllCuratedTopicsToRender();
const allPaths = APIresponse.map((el) => {
return { params: { tag: el.keyword } };
});
return {
paths: [...allPaths],
fallback: "blocking",
};
}
export async function getStaticProps(context) {
let titleAndDescription = {
title: "",
meta_description: "",
};
// only get title and description if there is a tag in the url
if (context.params?.tag) {
const tag = context.params.tag.toString();
titleAndDescription = await fetchTitleAndDescription(tag);
}
return {
props: {
title: titleAndDescription.title || "",
meta_description: titleAndDescription.meta_description || "",
},
revalidate: 31536000,
};
}
1 ответ
Это будет случай, когда у вас есть правило перенаправления, например:
/* /index.html 200
в вашей