Как отобразить HTML-контент в next.js

Я хочу отображать содержимое HTML-файла в next.js. Я узнал, что для этого можно использовать опасноSetInnerHTML в App.js.

Однако при его использовании я продолжаю видеть пустой белый экран. Я попытался отправить запрос GET в файл index.html, но все равно получаю белый экран.

App.js

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    async function fetchHtml() {
      try {
        const response = await fetch('index.html');
        const html = await response.text();
        setHtmlContent(html);
      } catch (error) {
        console.error('Error fetching HTML file:', error);
      }
    }

    fetchHtml();
  }, []);

  return (
    <div dangerouslySetInnerHTML = {{ __html: htmlContent }} />
  );
}

export default MyComponent;

В моем index.html есть шаблонный код и <p>Hello World</p>, поэтому он должен отображать текст на странице, однако я получаю белый экран.

вот белый экран, который я получаю

Вот мой каталог файлов: