1.

Я использую репозиторий Next.js, поэтому вам нужно его установить. Если вы новичок в этом, вот ссылка, чтобы начать.



Вам действительно необходимо перейти на Next JS
И вот причины, почему?medium.com



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/profileendpoint получит запрос на отображение 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.