Module Federation in NextJS Today!

[@clublati]

This is awesome. KZbin suggested this exactly when I needed it for a work project without having any idea what Module Federation was! Thanks for sharing this.

[@TheStillwinterNation]

cant wait to catch this live!

[@sreekumarmenon]

was waiting for this! :)

[@jherr]

Thanks! There is an issue with the shared React instance on the consuming side in the second half of the video. But I'm working on it, and I should have an answer by the Friday livestream. Thanks for watching!

[@RuudvanZuidam]

Thanks for the examples Jack the help so much in grasping WP MF5

[@刘朝旭]

太棒了~ 非常感谢!

[@kinbaum27]

Hi Jack, great example. One thing I noticed is that as soon as you incorporate useState in the component Next.js is consuming, you are hit with the invalid hook call. Can you talk about this during your live stream?

[@jherr]

Absolutely!

[@jherr]

And I'll check that out now. It shouldn't happen if I got the init right.

[@kinbaum27]

@@jherr Awesome, thanks. The only difference with what I'm doing is that my Next.js app is consuming the same component that my sidecar exposes.

[@alvaroj.tobarmayorquin7125]

Does module federation support App router of NextJS? I'm receiving an error while trying to share a component with internal routes

[@jatingundabathula5821]

Do you have an example of NextJS SSG without the node runtime dependency federated and consumed as remote in host MFE?

[@jherr]

No.

[@kristibraholli8508]

Does this example works on nextjs 13 ?

[@RodrigoMallmann1]

Hey Jack! I have been researching a lot around module federation in Next.js. In my particular case, we wouldn't want to really abandon the framework, but we can't really afford Zack's plugin also. That being said, watching this implementation here, it seems to me it could be a workaround to load remote modules client-side in Next, which is exactly what I need. One last question, I wonder how environment variables would work in this scenario, Isn't the code being bundled alongside env variables? If I load the script with this loader, would the code reassociate the environment? Thank you for your content! I am saving to buy your book

[@jherr]

I'm not sure I full understand your environment variables question. You should jump on my Discord server (discord.gg/VAZyhMZe) and ask your question there to see if you can get some help.

[@qianyouzhou9061]

Hi Radrigo, if I my ask, is there are any particular reason that you still wanna use client side Nextjs instead of move it back to a react app, was it just for don't wanna abandon the current framework? The reason I'm asking is that I'm currently working on module federation part but not sure if it worth to move into Nextjs

[@dino56ac49]

Thanks for this awesome video! I just discovered federated modules and its potential, thanks to you mostly. I read that next is planning to support MF out of the box on version 10, but I couldn't find details about it. Also they just launched beta support for webpack 5 on their latest release. All that said, do you know how to support SSR for external modules? How can the Caption module in your example be server rendered. I would love a video on that, but anyway, once more thanks for the awesome video!

[@jherr]

@scriptedAlchemy has an SSR example github.com/module-federation/module-federation-examples/tree/master/server-side-rendering but if it were me I'd wait for NextJS support

[@clublati]

Jack, would it be possible to have an updated video of this with the new NextJS 9.5 version? It'd be also helpful to see an example of NextJS consuming components from a non-NextJS app. A great use case for MF I see is having a component library built on anything else and then have NextJS consume them. If SSR or SSG works with it, it'd just be a game changer.

[@jherr]

I'm gonna wait until Next 10. I have a GOOOOOD feeling about it. :)

[@sebastiannietor9724]

​@@jherrPlease update with Next 13 and also besides how to share specific component, I would like to know how to share an entire folder route like /blog with all the paths /blog/detail

[@artemu78]

Brilliant, as usual, Jack. Thank you so much. Could you please point on github example?

[@jherr]

Here is the code - github.com/jherr/wp5-nextjs-for-youtube - Though I would strongly recommend looking at the github gist that is in the comments below for an excellent example of how to consume code properly in the current WP4 release of NextJS.

[@shawn-dsz]

What about module federation for server apps

[@jherr]

You mean server side rendering apps? Zack Jackson is finishing up a release on a NextJS plug-in that provides Module Federation support.

[@kristibraholli8508]

I tried same instruction on nextJs13 but it has a bunch of problems, please sir, can you make a repo of Module Federation on nextjs13. Would help me a lot!! Thanks :)

[@jerrysonlacson3531]

Tried to build this for production build and it does not work