1:"$Sreact.fragment"
2:I[4848,["/_next/static/chunks/2yct8jg546ldb.js","/_next/static/chunks/2pqmxqmuvx47g.js","/_next/static/chunks/3ht24vhxzmogn.js","/_next/static/chunks/27_qec9rbjtf6.js","/_next/static/chunks/2d9npwfp19s_q.js"],"BlogPostBody"]
3:I[97367,["/_next/static/chunks/0h2qsuyze9ds1.js"],"OutletBoundary"]
4:"$Sreact.suspense"
8:I[97367,["/_next/static/chunks/0h2qsuyze9ds1.js"],"ViewportBoundary"]
9:I[97367,["/_next/static/chunks/0h2qsuyze9ds1.js"],"MetadataBoundary"]
7:X
1c:X
1c:C
0:{"buildId":"fTCmVGBJapZxXF7IIDULz","data":[{"rsc":["$","$1","c",{"children":[["$","$L2",null,{"post":{"slug":"micro-frontends-nextjs-app-router-in-practice","title":"Micro-Frontends in Practice: When Next.js App Router Architecture Actually Helps","excerpt":"A pragmatic look at when splitting a monolithic frontend into independently deployable modules is worth the added complexity.","category":"custom-engineering","categoryLabel":"Custom Engineering","publishedAt":"2026-04-11","tags":["Micro-Frontends","Next.js","App Router"],"author":{"name":"Webersol Engineering Team","role":"Custom Engineering"},"body":[{"type":"paragraph","text":"Micro-frontends solve an organizational problem more often than a technical one. Before reaching for the pattern, it is worth being honest about whether the constraint is team autonomy or something else entirely."},{"type":"heading","level":2,"text":"Good reasons to split"},{"type":"list","style":"bullet","items":["Multiple teams need to ship independently without coordinating a shared release train.","Different parts of the product have genuinely different technical requirements or lifecycles.","A legacy module needs to be incrementally replaced without a big-bang rewrite."]},{"type":"heading","level":2,"text":"Weak reasons to split"},{"type":"paragraph","text":"\"It felt like the modern way to do it\" is not a reason. Neither is anticipating a team split that has not happened yet. The App Router's route groups and parallel routes already give a single Next.js application enough structural separation for most mid-size products without paying the runtime cost of module federation."},{"type":"callout","tone":"warning","text":"Micro-frontends trade deployment coupling for runtime and consistency complexity — shared design systems, versioning, and cross-app navigation all get harder. Make sure the trade is worth it before committing."}]}}],[["$","script","script-0",{"src":"/_next/static/chunks/27_qec9rbjtf6.js","async":true}],["$","script","script-1",{"src":"/_next/static/chunks/2d9npwfp19s_q.js","async":true}]],["$","$L3",null,{"children":["$","$4",null,{"name":"Next.MetadataOutlet","children":"$@5"}]}]]}],"isPartial":"$@6","staleTime":"$7","varyParams":null},{"rsc":["$","$1","h",{"children":[null,["$","$L8",null,{"children":[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","2",{"name":"theme-color","content":"#0B0F17","media":"(prefers-color-scheme: dark)"}],["$","meta","3",{"name":"theme-color","content":"#FFFFFF","media":"(prefers-color-scheme: light)"}],["$","meta","4",{"name":"color-scheme","content":"dark light"}]]}],["$","div",null,{"hidden":true,"children":["$","$L9",null,{"children":["$","$4",null,{"name":"Next.Metadata","children":[["$","title","0",{"children":"Micro-Frontends in Practice: When Next.js App Router Architecture Actually Helps | Webersol"}],["$","meta","1",{"name":"description","content":"A pragmatic look at when splitting a monolithic frontend into independently deployable modules is worth the added complexity."}],["$","meta","2",{"name":"application-name","content":"Webersol"}],["$","link","3",{"rel":"author","href":"https://webersol.com"}],["$","meta","4",{"name":"author","content":"Webersol"}],["$","meta","5",{"name":"keywords","content":"AI automation,AI automation company,enterprise AI solutions,AI agents,generative AI,AI software development,custom software development,software engineering company,enterprise software development,business process automation,workflow automation,AI integration,cloud solutions,cloud architecture,financial software,ERP software development,AI search optimization,generative engine optimization,GEO services,Webersol"}],["$","meta","6",{"name":"creator","content":"Webersol"}],["$","meta","7",{"name":"publisher","content":"Webersol"}],["$","meta","8",{"name":"robots","content":"index, follow"}],["$","meta","9",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],"$La","$Lb","$Lc","$Ld","$Le","$Lf","$L10","$L11","$L12","$L13","$L14","$L15","$L16","$L17"]}]}]}],"$L18"]}],"isPartial":"$@19","staleTime":"$7","varyParams":null},{"rsc":"$L1a","isPartial":"$@1b","staleTime":"$7","varyParams":"$1c"},{"rsc":"$L1d","isPartial":"$@1e","staleTime":"$7","varyParams":"$1c"},{"rsc":"$L1f","isPartial":"$@20","staleTime":"$7","varyParams":null}],"isUpgradeableISRFallback":false,"a":"$@21","rootVaryParams":null,"needsRuntimeRequest":"$@22"}
23:I[27201,["/_next/static/chunks/0h2qsuyze9ds1.js"],"IconMark"]
24:I[39756,["/_next/static/chunks/0h2qsuyze9ds1.js"],"default"]
25:I[37457,["/_next/static/chunks/0h2qsuyze9ds1.js"],"default"]
26:I[70119,["/_next/static/chunks/2yct8jg546ldb.js","/_next/static/chunks/2pqmxqmuvx47g.js","/_next/static/chunks/3ht24vhxzmogn.js"],"Header"]
27:I[56691,["/_next/static/chunks/2yct8jg546ldb.js","/_next/static/chunks/2pqmxqmuvx47g.js","/_next/static/chunks/3ht24vhxzmogn.js"],"Footer"]
28:I[3438,["/_next/static/chunks/2yct8jg546ldb.js","/_next/static/chunks/2pqmxqmuvx47g.js","/_next/static/chunks/3ht24vhxzmogn.js"],"FloatingAIBot"]
:HL["/_next/static/chunks/3hl0l27z3361h.css","style"]
5:null
a:["$","meta","10",{"name":"category","content":"technology"}]
b:["$","link","11",{"rel":"canonical","href":"https://webersol.com/blog/micro-frontends-nextjs-app-router-in-practice"}]
c:["$","meta","12",{"name":"format-detection","content":"telephone=no, address=no, email=no"}]
d:["$","meta","13",{"property":"og:title","content":"Micro-Frontends in Practice: When Next.js App Router Architecture Actually Helps | Webersol"}]
e:["$","meta","14",{"property":"og:description","content":"A pragmatic look at when splitting a monolithic frontend into independently deployable modules is worth the added complexity."}]
f:["$","meta","15",{"property":"og:url","content":"https://webersol.com/blog/micro-frontends-nextjs-app-router-in-practice"}]
10:["$","meta","16",{"property":"og:type","content":"article"}]
11:["$","meta","17",{"property":"article:published_time","content":"2026-04-11"}]
12:["$","meta","18",{"property":"article:modified_time","content":"2026-04-11"}]
13:["$","meta","19",{"name":"twitter:card","content":"summary_large_image"}]
14:["$","meta","20",{"name":"twitter:title","content":"Micro-Frontends in Practice: When Next.js App Router Architecture Actually Helps | Webersol"}]
15:["$","meta","21",{"name":"twitter:description","content":"A pragmatic look at when splitting a monolithic frontend into independently deployable modules is worth the added complexity."}]
16:["$","link","22",{"rel":"icon","href":"/favicon.ico?favicon.1cqmactnloi1r.ico","sizes":"256x256","type":"image/x-icon"}]
17:["$","$L23","23",{}]
18:["$","meta",null,{"name":"next-size-adjust","content":""}]
1a:["$","$1","c",{"children":[null,["$","$L24",null,{"parallelRouterKey":"children","template":["$","$L25",null,{}]}]]}]
1d:["$","$1","c",{"children":[null,["$","$L24",null,{"parallelRouterKey":"children","template":["$","$L25",null,{}]}]]}]
1f:["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/3hl0l27z3361h.css","precedence":"next"}],["$","script","script-0",{"src":"/_next/static/chunks/2yct8jg546ldb.js","async":true}],["$","script","script-1",{"src":"/_next/static/chunks/2pqmxqmuvx47g.js","async":true}],["$","script","script-2",{"src":"/_next/static/chunks/3ht24vhxzmogn.js","async":true}]],["$","html",null,{"lang":"en","className":"scroll-smooth","suppressHydrationWarning":true,"children":[["$","head",null,{"children":["$","script",null,{"dangerouslySetInnerHTML":{"__html":"\n(function () {\n  try {\n    var stored = localStorage.getItem('webersol-theme');\n    var theme = stored === 'light' ? 'light' : 'dark';\n    document.documentElement.setAttribute('data-theme', theme);\n  } catch (e) {\n    document.documentElement.setAttribute('data-theme', 'dark');\n  }\n})();\n"}}]}],["$","body",null,{"suppressHydrationWarning":true,"className":"inter_c15e96cb-module__0bjUvq__variable space_grotesk_e6988195-module__RNs2Mq__variable jetbrains_mono_7ea1d0f9-module__6GV5LG__variable bg-obsidian text-white antialiased flex flex-col min-h-screen relative overflow-x-hidden font-sans","children":[["$","$L26",null,{}],["$","main",null,{"className":"flex-1 w-full relative","children":["$","$L24",null,{"parallelRouterKey":"children","template":["$","$L25",null,{}],"notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]]}]}],["$","$L27",null,{}],["$","$L28",null,{}]]}]]}]]}]
7:300
22:true
7:C
21:0
19:"$undefined"
1b:"$undefined"
1e:"$undefined"
20:"$undefined"
6:"$undefined"