Is it possible to use React.JS app as a Micro Frontend in a container app built with NextJS?

Question

I have a webpage that uses NextJS. I would like to add, a vanilla React.JS app that is in another repo, to this NextJS website. Using Micro Frontend architecture. Is it possible? Where should I get started?

All suggestions are welcome.

Thanks

Answer 1

I think the answer is yes because Nextjs is built over the top of Reactjs. Nextjs uses the same structure as Reactjs.

Answer 2

There are a few options.

• copy and paste the components from the other repo and use them in your next app (in case you do not need to maintain the old anymore)
• put the reusable components into a npm library and install this library in your next app and import the components one-by-one when necessary.
• create a built version from your old app and import this code into the nextjs codebase using dynamic import. See below:

import dynamic from 'next/dynamic';

const MyOldApp = dynamic(
  () =>
    import('my-old-app/build').then(app => {
      return app
    })
)

const NewApp = () => {
  return (
    <main>
      ...
      <MyOldApp />
    </main>
  )
}