wondering if it's possible to somehow replace a template file with actual content (coming from an api). E.g. the template looks like this:

import { NextPage } from "next";

const Page: NextPage = () => {
    return (
        <Layout>
            {content}
        </Layout>
    )
};

export default Page;

the following would have to be replaced: Page with the actual file name, Layout with the corresponding layout that file uses, and content with the page`s content.

Now I am able to create a file already using the following:

import type { NextApiRequest, NextApiResponse } from "next";
import fs from "fs";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const page_name: string = req.body.name;
  const page_slug: string = req.body.slug;
  const page_directory: string = req.body.directory;
  const page_layout: string = req.body.layout;
  const components: Array<string[]> = req.body.components;

  const page_data = {
    layout: page_layout,
    components,
  };

  fs.writeFile(
    `Pages/${page_name}`,
    JSON.stringify(page_data),
    function (error) {
      if (error) throw error;

      return res.json({
        message: "File has been created",
      });
    }
  );
}

e.g. if I where to call this api and pass in a name of about it would create a about.tsx file, but the content would obviously be empty.

How would I go about using a template file and replacing said content with content coming from the api?