Next.js - Compile react components from submodule to dynamically load from static html pages

Viewed 149

I have many repos (e.g. A, B, C, D, ...) using the same other repo (e.g. X) as a submodule.

I use Next.js to export static html pages for each of the repo A, B, C and D. When I make a change to repo X, I need to rebuild each (re-export static html pages for each) of the repo A, B, C, D (again, each of which uses repo X as a submodule) and then redeploy those static html pages to Firebase hosting. That takes a long time, since I actually have not 4 (A, B, C, D) but 20 repos using X as a submodule.

What I would like to do is, and forgive my terminology I’m new to this, to “compile”/”package” all of the code from repo X (to something like X.js ??), serve that from a server (e.g. https://cdn.com/X.js) and let it be dynamically loaded by each of the static html pages exported from repo A, B, C and D.

The goal is that I wouldn’t anymore use X as submodule of repo A, B, C and D and I wouldn’t have to re-export static html pages for each of the repo A, B, C and D every time I make a change to repo X. When making a change to repo X, I would only have to “re-compile”/”re-package” X.js and upload it to https://cdn.com/X.js, and then all the static html pages would start using the latest version of X upon being loaded in the browser.

Something like:

Say the repo X includes a many files such as Welcome.js:

export default function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

And then have, in Next.js, pages that look something like pages/index.js:

import Head from 'next/head';
...
return (
  <div>
    <Head>
       <script
          async
          src="https://cdn.com/X.js"
        ></script>
    </Head>
    // The component Welcome coming from X.js - could it be accessed like that?
    <Welcome name={“Pat”}/>
  </div>);

 

Is this even possible? What I don’t know how to do is the parts: “compile”/”package” all of the code (react components) from repo X and then access them from the pages to be statically exported.

0 Answers
Related