feat: routing with dynamic imports for bundling

Author: moonmeister

examples/next/template-hierarchy/example-app/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "15.3.3",
+    "next": "^15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "urql": "^4.2.2"

examples/next/template-hierarchy/example-app/src/components/Layout.js

@@ -10,6 +10,19 @@ export default function Layout({ children }) {
       <TemplateHierarchyInfo template={templateData} uri={uri} />
       <header>
         <h1>Template Hierarchy Example</h1>
+        <nav>
+          <ul>
+            <li>
+              <a href="/">Home</a>
+            </li>
+            <li>
+              <a href="/hello-world">Sample Post</a>
+            </li>
+            <li>
+              <a href="/sample-page">Sample Page</a>
+            </li>
+          </ul>
+        </nav>
       </header>
       <main>{children}</main>
     </div>

examples/next/template-hierarchy/example-app/src/lib/templates.js

@@ -147,10 +147,14 @@ export async function getAvailableTemplates() {
   const templates = [];
 
   for (const file of files) {
+    if (file === "index.js") {
+      continue; // Skip the index file
+    }
+
     const slug = file.replace(".js", "");
 
     templates.push({
-      id: slug,
+      id: slug === "default" ? "index" : slug,
       path: join("/", TEMPLATE_PATH, file),
     });
   }

examples/next/template-hierarchy/example-app/src/pages/[[...uri]].js

@@ -1,16 +1,15 @@
 import { uriToTemplate } from "@/lib/templateHierarchy";
 import { RouteDataContext } from "@/lib/context";
-import Layout from "@/components/Layout";
+import availableTemplates from "@/wp-templates";
+
+export default function Page(props) {
+  const { templateData } = props;
+
+  const PageTemplate = availableTemplates[templateData.template?.id];
 
-export default function Page({ params, uri, templateData }) {
   return (
-    <RouteDataContext.Provider value={{ params, uri, templateData }}>
-      <Layout>
-        <p>
-          You shouldn't see this page if the template hierarchy is working
-          correctly.
-        </p>
-      </Layout>
+    <RouteDataContext.Provider value={props}>
+      <PageTemplate {...props} />
     </RouteDataContext.Provider>
   );
 }
@@ -22,6 +21,15 @@ export async function getServerSideProps({ params }) {
 
   const templateData = await uriToTemplate({ uri });
 
+  if (
+    !templateData?.template?.id ||
+    templateData?.template?.id === "404 Not Found"
+  ) {
+    return {
+      notFound: true,
+    };
+  }
+
   return {
     props: {
       params,

examples/next/template-hierarchy/example-app/src/wp-templates/default.js

@@ -0,0 +1,12 @@
+import Layout from "@/components/Layout";
+
+export default function DefaultTemplate() {
+  return (
+    <Layout>
+      <h2>Default Template</h2>
+      <p>
+        This is the default template for the template hierarchy example app.
+      </p>
+    </Layout>
+  );
+}

examples/next/template-hierarchy/example-app/src/wp-templates/home.js

@@ -0,0 +1,10 @@
+import Layout from "@/components/Layout";
+
+export default function Home() {
+  return (
+    <Layout>
+      <h2>Home Template</h2>
+      <p>This is the home page of the template hierarchy example app.</p>
+    </Layout>
+  );
+}

examples/next/template-hierarchy/example-app/src/wp-templates/index.js

@@ -0,0 +1,15 @@
+import dynamic from "next/dynamic";
+
+const home = dynamic(() => import("./home.js"), {
+  loading: () => <p>Loading Home Template...</p>,
+});
+
+const index = dynamic(() => import("./default.js"), {
+  loading: () => <p>Loading Index Template...</p>,
+});
+
+const single = dynamic(() => import("./single.js"), {
+  loading: () => <p>Loading Single Template...</p>,
+});
+
+export default { home, index, single };

examples/next/template-hierarchy/example-app/src/wp-templates/single.js

@@ -0,0 +1,10 @@
+import Layout from "@/components/Layout";
+
+export default function SingleTemplate() {
+  return (
+    <Layout>
+      <h2>Single Template</h2>
+      <p>This is the single template for the template hierarchy example app.</p>
+    </Layout>
+  );
+}