1.
Я использую репозиторий Next.js, поэтому вам нужно его установить. Если вы новичок в этом, вот ссылка, чтобы начать.
2.
После того, как репозиторий будет установлен, мы займемся бессерверными функциями (если новые), после чего добавим следующий код в бессерверную функцию.
Я создаю пример приветствия 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(); };
3.
Добавление 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>
4.
Это важный шаг, теперь мы скажем next.js показать код HTML внутри файла index.html и вернуть его на странице api/profile
.
Когда пользователь откроет страницу профиля, api/profile
endpoint получит запрос на отображение profile
HTML-файла на веб-сайте.
Мы укажем next.js настроить запрос с использованием концепции URL-адреса прокси, и это будет достигнуто путем добавления следующего кода в файл next.config.js
в корневом каталоге.
module.exports = () => { rewrites: async () => [{ source: "/public/portfolio/index.html", destination: "/pages/api/portfolio.js", },], }
Теперь наш маршрут profile.html будет просто отображать файл HTML.
5.
На сегодня все, до следующего раза, хорошего дня.
Наш сайт — iHateReading
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.