如何在Next.js Pages中实现基于React.lazy的模板化路由

DevOps 小满

2026-8-22

在Next.js中实现模板级独立路由的方案

问题背景

在React项目中，通过React.lazy()实现了3套模板的按需加载，每套模板内置独立路由配置，同一时间仅渲染一套模板，路由匹配完全由当前模板控制。但迁移到Next.js时，受限于文件系统路由机制，无法直接复用这套逻辑，需要找到适配Next.js的实现方式。

React项目实现示例

App.js

const Template1 = React.lazy(() => import("./template1/assets/Template1"));
const Template2 = React.lazy(() => import("./template2/assets/Template2"));
const Template3 = React.lazy(() => import("./template3/assets/Template3"));

const mapTemplatePath = {
  theme1: <Template1 />,
  theme2: <Template2 />,
  theme3: <Template3 />,
};

const getTemplate = (theme_name) => {
  return mapTemplatePath[theme_name] ? (
    mapTemplatePath[theme_name]
  ) : (
    <p>Loading....</p>
  );
};

function App() {
  return (
    <>
      <Suspense fallback={<Spinner animation="border" />}>
        {getTemplate('theme1')}
      </Suspense>
    </>
  );
}

Template1.jsx

const Template1 = () => {
  return (
    <div className="tmp1">
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home1 />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
        <Footer />
      </Router>
    </div>
  );
};

Template2.jsx

const Template2 = () => {
  return (
    <div className="tmp1">
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home1 />} />
          <Route path="/about" element={<About2 />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/blog" element={<Blog />} />
        </Routes>
        <Footer />
      </Router>
    </div>
  );
};

Template3.jsx

const Template3 = () => {
  return (
    <div className="tmp1">
      <Router>
        <Header />
        <Routes>
          <Route path="/" element={<Home1 />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
        <Footer />
      </Router>
    </div>
  );
};

Next.js实现方案

方案一：基于App Router（Next.js 13+）

利用App Router的动态路由和lazy加载，结合根布局的模板切换逻辑，让模板内部控制路由匹配规则。

项目结构调整

/app
  /[...catchAll]
    page.jsx
  layout.jsx
/templates
  /theme1
    layout.jsx
    /page.jsx
    /about
      page.jsx
    /contact
      page.jsx
  /theme2
    layout.jsx
    /page.jsx
    /about
      page.jsx
    /contact
      page.jsx
    /blog
      page.jsx
  /theme3
    layout.jsx
    /page.jsx
    /about
      page.jsx
    /contact
      page.jsx
    /profile
      page.jsx

根布局layout.jsx实现模板切换与按需加载

'use client';
import { Suspense, lazy } from 'react';
import { usePathname } from 'next/navigation';

// 按需加载模板布局
const Theme1Layout = lazy(() => import('../templates/theme1/layout'));
const Theme2Layout = lazy(() => import('../templates/theme2/layout'));
const Theme3Layout = lazy(() => import('../templates/theme3/layout'));

// 动态获取当前模板（可替换为从URL参数、用户配置等逻辑）
const getCurrentTemplate = () => {
  return 'theme1';
};

export default function RootLayout({ children }) {
  const pathname = usePathname();
  const template = getCurrentTemplate();

  const renderTemplate = () => {
    switch (template) {
      case 'theme1':
        return <Theme1Layout pathname={pathname}>{children}</Theme1Layout>;
      case 'theme2':
        return <Theme2Layout pathname={pathname}>{children}</Theme2Layout>;
      case 'theme3':
        return <Theme3Layout pathname={pathname}>{children}</Theme3Layout>;
      default:
        return <div>Loading...</div>;
    }
  };

  return (
    <html lang="zh-CN">
      <body>
        <Suspense fallback={<div>Loading template...</div>}>
          {renderTemplate()}
        </Suspense>
      </body>
    </html>
  );
}

模板内部布局（以Theme1为例）
/templates/theme1/layout.jsx：

'use client';
import Link from 'next/link';

export default function Theme1Layout({ children, pathname }) {
  // 定义当前模板允许的路由列表
  const allowedRoutes = ['/', '/about', '/contact'];

  // 校验路由，不符合则返回404
  if (!allowedRoutes.includes(pathname)) {
    return <div>404 - 该页面在当前模板下不存在</div>;
  }

  return (
    <div className="tmp1">
      <header>
        <Link href="/">首页</Link>
        <Link href="/about">关于我们</Link>
        <Link href="/contact">联系我们</Link>
      </header>
      <main>{children}</main>
      <footer>Theme1 Footer</footer>
    </div>
  );
}

全局捕获路由/app/[...catchAll]/page.jsx
用于匹配所有未定义的路径，交给模板处理：

export default function CatchAllPage() {
  return null;
}

方案二：基于Pages Router（Next.js 12及以下）

利用自定义App和动态导入，结合next/router实现模板级路由控制。

项目结构

/pages
  _app.js
  _document.js
  [...catchAll].js
/templates
  /theme1
    index.js
    about.js
    contact.js
    Layout.js
  /theme2
    index.js
    about.js
    contact.js
    blog.js
    Layout.js
  /theme3
    index.js
    about.js
    contact.js
    profile.js
    Layout.js

自定义App/pages/_app.js

import { Suspense, lazy } from 'react';
import { useRouter } from 'next/router';

// 按需加载模板布局
const Theme1Layout = lazy(() => import('../templates/theme1/Layout'));
const Theme2Layout = lazy(() => import('../templates/theme2/Layout'));
const Theme3Layout = lazy(() => import('../templates/theme3/Layout'));

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const template = 'theme1'; // 动态获取模板逻辑，比如从URL参数、后端接口

  const getTemplateLayout = () => {
    switch (template) {
      case 'theme1':
        return <Theme1Layout router={router} />;
      case 'theme2':
        return <Theme2Layout router={router} />;
      case 'theme3':
        return <Theme3Layout router={router} />;
      default:
        return <div>Loading...</div>;
    }
  };

  return (
    <Suspense fallback={<div>Loading template...</div>}>
      {getTemplateLayout()}
      <Component {...pageProps} />
    </Suspense>
  );
}

export default MyApp;

模板布局（以Theme1为例）
/templates/theme1/Layout.js：

import Link from 'next/link';
import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function Theme1Layout() {
  const router = useRouter();
  const allowedRoutes = ['/', '/about', '/contact'];

  useEffect(() => {
    // 路由守卫：校验当前路径是否属于模板允许范围
    if (!allowedRoutes.includes(router.pathname)) {
      router.push('/404');
    }
  }, [router]);

  return (
    <div className="tmp1">
      <header>
        <Link href="/">首页</Link>
        <Link href="/about">关于我们</Link>
        <Link href="/contact">联系我们</Link>
      </header>
      <footer>Theme1 Footer</footer>
    </div>
  );
}

全局捕获路由/pages/[...catchAll].js

export default function CatchAllPage() {
  return <div>404 - 页面不存在</div>;
}

关键说明

按需加载：通过lazy和Suspense实现模板的按需加载，和React项目逻辑一致，减少初始包体积。
路由控制：通过全局捕获路由和模板内部的路由校验，实现不同模板的独立路由规则，只有当前模板允许的路径才会渲染对应内容。
动态切换：getCurrentTemplate函数可根据业务需求动态获取当前模板（比如从URL参数、用户配置、后端接口返回等），无需修改路由结构。

内容的提问来源于stack exchange，提问作者Md. Rakibul Islam

如何在Next.js Pages中实现基于React.lazy的模板化路由

问题背景 #

React项目实现示例 #