文章/答案/技术大牛

发布

社区首页 >问答首页 >Next.js中的微前端路由问题

问Next.js中的微前端路由问题
EN

Stack Overflow用户

提问于 2022-05-31 15:21:59

回答 1查看 982关注 0票数 1

我正在构建一个包含三个Next.js项目(app1、app2、base)的微前端框架。app1和app2是远程应用程序，base是主机应用程序。

app1 next.config.js

const { withModuleFederation } = require('@module-federation/nextjs-mf');
module.exports = {
  webpack5: true,
  images: {
    domains: ['static.wikia.nocookie.net'],
  },
  webpack: (config, options) => {
    const { isServer } = options;
    const mfConf = {
      mergeRuntime: true,
      name: 'app1',
      library: {
        type: config.output.libraryTarget,
        name: 'app1',
      },
      filename: 'static/runtime/app1RemoteEntry.js',
      remotes: {},
      exposes: {
        './thanatos': './components/thanatos',
      },
    };
    config.cache = false;
    withModuleFederation(config, options, mfConf);
    if (!isServer) {
        config.output.publicPath = 'http://localhost:3001/_next/';
    }

    return config;
  },

  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config;
  },
};

app2 next.config.js

const { withModuleFederation } = require('@module-federation/nextjs-mf');
module.exports = {
  webpack5: true,
  images: {
    domains: ['static.wikia.nocookie.net'],
  },
  webpack: (config, options) => {
    const { isServer } = options;
    const mfConf = {
      mergeRuntime: true,
      name: 'app2',
      library: {
        type: config.output.libraryTarget,
        name: 'app2',
      },
      filename: 'static/runtime/app2RemoteEntry.js',
      remotes: {},
      exposes: {
        './zagreus': './components/zagreus',
      },
    };
    config.cache = false;
    withModuleFederation(config, options, mfConf);
    if (!isServer) {
        config.output.publicPath = 'http://localhost:3002/_next/';
    }

    return config;
  },

  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config;
  },
};

碱基next.config.js

const { withModuleFederation } = require('@module-federation/nextjs-mf');
const path = require('path');

// For SSR, resolve to disk path (or you can use code streaming if you have access)
// in production use the chunks
const ssrRemoteEntry = (app) =>
  process.env.NODE_ENV === 'production'
    ? path.join(
        `<remotes-path>/${app}/.next/server/chunks/static/runtime/remoteEntry.js`
      )
    : path.resolve(
        __dirname,
        `../${app}/.next/server/static/runtime/remoteEntry.js`
      );

module.exports = {
  webpack5: true,
  images: {
    domains: ['static.wikia.nocookie.net'],
  },
  webpack: (config, options) => {
    const { isServer } = options;
    const mfConf = {
      name: 'base',
      library: {
        type: config.output.libraryTarget,
        name: 'base',
      },
      remotes: {
        app1: isServer ? ssrRemoteEntry('app1') : 'app1',
        app2: isServer ? ssrRemoteEntry('app2') : 'app2',
      },
      exposes: {},
    };
    config.cache = false;
    withModuleFederation(config, options, mfConf);

    return config;
  },

  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config;
  },
};

碱基_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <script src="http://localhost:3001/_next/static/runtime/app1RemoteEntry.js" />
        <script src="http://localhost:3002/_next/static/runtime/app2RemoteEntry.js" />
        <Head>
          <link rel="icon" href="/favicon.ico" />
          <meta
            name="description"
            content="Demo for Microfrontends using Module Federation"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

当我运行这三个应用程序时，在base应用程序上，我只能看到base的页面，但是当我单击其他两个要导航到app1和app2的按钮时，浏览器会显示空白页。

webpack

next.js

micro-frontend

webpack-module-federation

javascript

回答 1

Stack Overflow用户

发布于 2022-08-26 19:31:14

我也许能为你找到解决办法。在next.config.js中需要做的是将URL添加到.env文件中。从那里，你告诉你的基础应用程序导航到URL和路由。

下面是我所做的事情的一个例子：

const { APP1_URL, APP2_URL } = process.env;

module.exports = {
   webpackDevMiddleware: (config) => {
      config.watchOptions = {
         poll: 1000,
         aggregateTimeout: 300,
      };

      return config;
   },
   output: "standalone",
   async rewrites() {
      return [
         {
            source: "/dashboard",
            destination: "/",
         },
         {
            source: "/app1",
            destination: `${APP1_URL}/app1`,
         },
         {
            source: "/app1/:path*",
            destination: `${APP1_URL}/app1/:path*`,
         },
         {
            source: "/app2",
            destination: `${APP2_URL}/app2`,
         },
         {
            source: "/app2/:path*",
            destination: `${APP2_URL}/app2/:path*`,
         },
      ];
   },
};

最棘手的是回到你的基地。下面是app1的next.config.js示例：

module.exports = {
   webpackDevMiddleware: (config) => {
      config.watchOptions = {
         poll: 1000,
         aggregateTimeout: 300,
      };

      return config;
   },
   basePath: "/app1",
   output: "standalone",
   async redirects() {
      return [
         {
            source: "/app1/dashboard",
            destination: "/",
            basePath: false,
            permanent: true,
         },
         {
            source: "/app1/app1",
            destination: "/app1",
            basePath: false,
            permanent: true,
         },
      ];
   },
};

注意，webpackDevMiddleware只是用来提神的。如果你不想要的话就不需要了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72450399

复制

相似问题

问Next.js中的微前端路由问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Next.js中的微前端路由问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Next.js中的微前端路由问题
EN