服务器端 pdf 和电子邮件的样式 html（通过 nextjs api 路由）

Question

我可以生成一个 pdf 文件，也可以通过 nextjs API 路由发送电子邮件。但问题是用于创建 pdf 的 HTML 模板以及电子邮件看起来太难看了。我想使用 grid 和 flexbox 设置样式。

现在我被迫在反引号下编写 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' })
}