Currently, I am in the process of developing a micro-frontend application using Next.js 14.2.5 in combination with Module Federation. To initiate this project, I utilized the following commands to create two separate applications:
npx create-next-app mf-host
npx create-next-app mf-widgets
In both these applications, I have adopted the app directory structure. Below is an overview of how I configured the next.config.mjs files for each individual application:
mf-widgets - next.config.mjs:
/** @type {import('next').NextConfig} */
import { NextFederationPlugin } from '@module-federation/nextjs-mf';
process.env.NEXT_PRIVATE_LOCAL_WEBPACK = true;
const nextConfig = {
reactStrictMode: true,
transpilePackages: ["ui"],
webpack: (config, { isServer }) => {
config.plugins.push(
new NextFederationPlugin({
name: 'widgets',
filename: 'static/chunks/remoteEntry.js',
exposes: {
'./TopNavigation': './components/topNavigation/TopNavigation',
},
})
);
return config;
},
};
export default nextConfig;
mf-host - next.config.mjs:
/** @type {import('next').NextConfig} */
import { NextFederationPlugin } from '@module-federation/nextjs-mf';
process.env.NEXT_PRIVATE_LOCAL_WEBPACK = true;
const WIDGETS_APP_URL =
process.env.NEXT_PUBLIC_WIDGET_APP_URL || 'http://localhost:3000';
const remotes = (isServer) => {
const location = isServer ? 'ssr' : 'chunks';
return {
widgets: `widgets@${WIDGETS_APP_URL}/_next/static/${location}/remoteEntry.js`,
};
};
const nextConfig = {
webpack: (config, { isServer }) => {
config.plugins.push(
new NextFederationPlugin({
name: 'host',
filename: 'static/chunks/remoteEntry.js',
remotes: remotes(isServer),
})
);
return config;
},
};
export default nextConfig;
Upon attempting to launch the mf-widgets application, I encountered the following error message:
▲ Next.js 14.2.5 Local: http://localhost:3000 ✓ Starting... Error: App Directory is not supported by nextjs-mf. Use only pages directory, do not open git issues about this at NextFederationPlugin.validateOptions...
This error seems to indicate that nextjs-mf does not accommodate the app directory structure in Next.js 14. Is there a workaround to make it compatible with the app directory, or should I revert back to the pages directory paradigm? If so, could you provide guidance on how to go about it?
I attempted to rename the app directory to pages within my Next.js project. Following this adjustment, I anticipated normal functionality where upon accessing the deployment at localhost:3000 (a module federation host), the default page would load successfully. However, instead of seeing my application as expected, I was met with a 404 Page Not Found error.