Node.js 为服务器端的pdf和电子邮件设置html样式（通过nextjs api路由）

我可以生成pdf文件，还可以通过nextjs API路由发送电子邮件。但问题是用于创建pdf的HTML模板以及电子邮件看起来太难看了。我想用网格和flexbox来设计它

现在，我被迫在backticks下编写HTML，将其作为字符串存储在相同的API路由中。我更喜欢在单独的文件夹中创建HTML和CSS文件，并在API路由中使用它。请有人指导我如何做到这一点？我应该在API文件夹下创建文件夹还是使用公用文件夹？一旦我这样做了，我如何将其导入到相应的API路由

下面是我的示例代码

const puppeteer = require('puppeteer')

const createQuotePdf = async () => {
    try {
      const browser = await puppeteer.launch();
      const page = await browser.newPage()
      const options = {
        path:'./public/temp/quote.pdf',
        format: 'A4',
        printBackground: true,
      }
      const quoteHtml = `
      <div>
        <h1>This way of creating the html template in the backend isn't cool :( </h1>
        <p>I don't look stylish :( </p>
        <p>My developer, please make me pretty and store me in a separate file/folder</p>
      </div>
      `
      await page.goto('http://localhost:3000/quote', {waitUntil: 'networkidle2'})
      await page.setContent()
      await page.pdf(options)
      await browser.close()

    }catch(e){
      console.log(e)
    }
}

export default async (req, res) => {
  await createQuotePdf()
  res.status(200).json({ name: 'done' })
}

const puppeter=require（'puppeter'）
const createQuotePdf=async（）=>{
试一试{
const browser=wait puppeter.launch（）；
const page=wait browser.newPage（）
常量选项={
路径：'./public/temp/quote.pdf'，
格式：“A4”，
背景：是的，
}
常数quoteHtml=`
这种在后端创建html模板的方法并不酷：（
我看起来不时髦：（

我的开发人员，请让我漂亮，并将我存储在单独的文件/文件夹中

`
等待页面。转到（'http://localhost:3000/quote“，{waitUntil:'networkidle2'}）
等待page.setContent（）
等待页面.pdf（选项）
等待浏览器关闭（）
}捕获（e）{
控制台日志（e）
}
}
导出默认异步（req，res）=>{
等待createQuotePdf（）
res.status（200）.json（{name:'done'}）
}