Как правильно шаблонизировать html в проекте nextjs на react?

заранее извиняюсь за такой "тугой" вопрос. Знаю что так никто не делает и это неправильно, но в данный момент мне нужно это сделать. У меня есть проект на nextjs + ts, я еще начинающий и только изучаю эту технологию. У меня есть шаблон на чистом html/css/js и я пытаюсь перенести его на next. У шаблона много html файлов, различных страниц с одинаковыми элементами, шапка, подвал, кнопка подняться вверх, прелоадер и т.д. Сейчас это у меня работает так: я загрузил весь проект (html/css/js) в папку /public/ а в next.config.js записал следующее:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
    async redirects() {
        return [
            {
                source: '/',
                destination: '/index.html',
                permanent: true
            }
        ];
    }
}
module.exports = nextConfig;

ну и сделал деплой на vercel, все работает, все круто и да, повторюсь я знаю что это не правильно и можете смеяться, но мне нужно это. Так вот как можно настроить шаблонизатор и какой лучше? что бы я прям в html файлах мог заменить весь код например одним тегом {head} а его код лежал бы например в корне /components/header.tsx копал в сторону ejs но не смог с этим разобраться