01
Я использую репозиторий Next.js, поэтому вам нужно установить его, если вы новичок, вот ссылка для начала работы.
https://medium.com/nerd-for-tech/you-really-need-to-migrate-to-next-js-ee646a9982ab
02
После установки репозитория мы разберемся с бессерверными функциями (если они новые), затем добавим следующий код в бессерверную функцию.
Я создаю образец hello API внутри каталога pages/api, который будет возвращать HTML файл в ответ.
import fs from "fs";
const filename = "/portfolio/index.html";
module.exports = async(req, res) => {
res.setHeader("Content-Type", "text/html, charset=utf-9");
res.write(await fs.readFileSync(filename, "utf-8"));
res.end();
};
03
Добавление HTML-файла — это третий шаг.
Каталог pages в корневой директории является местом расположения всех статических файлов в репозитории next.js.
Добавьте HTML-код в файл profile.html.
<html>
<head>
<title>Example</title>
</head>
<body>
<p>This is an example of a simple HTML page with one paragraph.</p>
</body>
</html>
—
04
Это решающий шаг, теперь мы скажем next.js показать HTML-код внутри файла index.html и вернуть его на страницу api/profile.
Когда пользователь откроет страницу профиля, api/profileendpoint получит запрос на рендеринг HTML-файла профиля на сайте.
Мы скажем next.js сконфигурировать запрос, используя концепцию прокси URL, что будет достигнуто путем добавления следующего кода в файл next.config.js в корневом каталоге.
module.exports = () => {
rewrites: async () => [{
source: "/public/portfolio/index.html",
destination: "/pages/api/portfolio.js",
},],
}
Теперь наш маршрут profile.html будет просто отображать HTML-файл.
05
На сегодня это все, до следующего раза, хорошего дня.
Наш сайт iHateReading