CINXE.COM

<!DOCTYPE html><html class="__variable_0d0188 __variable_4d318d" lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=64&q=75 1x, /_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=128&q=75 2x"/><link rel="stylesheet" href="/_next/static/css/9b86c142f8048a63.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/5841d5fe2bea84d3.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/93d6a97e20faf20d.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/7b0dc059936e156c.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/de848c1722f89916.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/935a0b934d2099ee.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/905e2617510d2adb.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/ca88c4ca37434c71.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/024d05917fd5421b.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/3f075e35768c0271.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/a0d401486824442c.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-a62fb32779bc1725.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1"/><script src="/_next/static/chunks/36517b51-85fed9736cc5a221.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/7118-4e149435e7265d29.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/main-app-bcae842578ad77a5.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/9876-7eca81061e69b0cf.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/1885-dae94b1aa6713a47.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/3289-6a5b209092e40f07.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/app/(next-site)/page-d1c17161104eb782.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/519-d7ae7fd1f6ac920e.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><script src="/_next/static/chunks/app/(next-site)/blog/%5Bslug%5D/page-cb8cc67f5c96492d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><meta name="next-size-adjust" content=""/><style>.uwu-flex { display: none; } .uwu .uwu-flex { display: flex; } .uwu .uwu-hidden { display: none; }</style><script>try { if (['', 'true', '1'].includes(new URLSearchParams(document.location.search).get('uwu'))) { document.documentElement.classList.add('uwu'); console.log('Next.js uwu logo by SAWARATSUKI: https://github.com/SAWARATSUKI'); } } catch (e) {}</script><title>Layouts RFC | Next.js</title><meta name="description" content="Nested routes and layouts, client and server routing, React 18 features, and designed for Server Components."/><link rel="canonical" href="https://nextjs.org/blog/layouts-rfc"/><meta property="og:title" content="Layouts RFC"/><meta property="og:description" content="Nested routes and layouts, client and server routing, React 18 features, and designed for Server Components."/><meta property="og:url" content="https://nextjs.org/blog/layouts-rfc"/><meta property="og:image" content="https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/twitter-card.png"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2022-05-23T20:30:00.507Z"/><meta property="article:author" content="Delba de Oliveira"/><meta property="article:author" content="Lee Robinson"/><meta property="article:author" content="Sebastian Markb氓ge"/><meta property="article:author" content="Tim Neutkens"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Layouts RFC"/><meta name="twitter:description" content="Nested routes and layouts, client and server routing, React 18 features, and designed for Server Components."/><meta name="twitter:image" content="https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/twitter-card.png"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="48x48"/><script>document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" noModule=""></script></head><body><header class="header_header__zJOD0 header_sticky__2ak2z"><a class="skip-nav-link_skipLink__M2lut" href="#geist-skip-nav" tabindex="0">Skip to content</a><nav class="navbar_nav__dCdXi"><div class="navbar_mobileTop__yLNXQ"><div class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:row;--stack-align:center;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:4px"><a rel="noopener noreferrer" target="_blank" data-testid="navbar/vercel-logo" href="https://vercel.com/home?utm_source=next-site&utm_medium=banner&utm_campaign=blog_layouts-rfc" aria-label="Go to Vercel homepage" title="Go to Vercel homepage"><svg aria-label="Vercel logomark" height="22" role="img" style="width:auto;overflow:visible" viewBox="0 0 74 64"><path d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z" fill="var(--geist-foreground)"></path></svg></a><svg height="32" viewBox="0 0 32 32" width="32"><path d="M22 5L9 28" stroke="var(--accents-2)" stroke-linecap="round" stroke-linejoin="round"></path></svg><div class="uwu-flex"><a class="navbar_uwuMobileLogo__zHGR_" title="Go to the homepage" data-zone="same" href="/?uwu=true"><img alt="Next.js uwu logo by SAWARATSUKI" width="54" height="34" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=64&q=75 1x, /_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=128&q=75 2x" src="/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=128&q=75"/></a></div><div class="uwu-hidden"><a class="navbar_mobileLogo__Q5KxZ" title="Go to the homepage" data-zone="same" href="/"><svg aria-label="Next.js logotype" height="18" role="img" viewBox="0 0 394 79"><path d="M261.919 0.0330722H330.547V12.7H303.323V79.339H289.71V12.7H261.919V0.0330722Z" fill="var(--geist-foreground)"></path><path d="M149.052 0.0330722V12.7H94.0421V33.0772H138.281V45.7441H94.0421V66.6721H149.052V79.339H80.43V12.7H80.4243V0.0330722H149.052Z" fill="var(--geist-foreground)"></path><path d="M183.32 0.0661486H165.506L229.312 79.3721H247.178L215.271 39.7464L247.127 0.126654L229.312 0.154184L206.352 28.6697L183.32 0.0661486Z" fill="var(--geist-foreground)"></path><path d="M201.6 56.7148L192.679 45.6229L165.455 79.4326H183.32L201.6 56.7148Z" fill="var(--geist-foreground)"></path><path clip-rule="evenodd" d="M80.907 79.339L17.0151 0H0V79.3059H13.6121V16.9516L63.8067 79.339H80.907Z" fill="var(--geist-foreground)" fill-rule="evenodd"></path><path d="M333.607 78.8546C332.61 78.8546 331.762 78.5093 331.052 77.8186C330.342 77.1279 329.991 76.2917 330 75.3011C329.991 74.3377 330.342 73.5106 331.052 72.8199C331.762 72.1292 332.61 71.7838 333.607 71.7838C334.566 71.7838 335.405 72.1292 336.115 72.8199C336.835 73.5106 337.194 74.3377 337.204 75.3011C337.194 75.9554 337.028 76.5552 336.696 77.0914C336.355 77.6368 335.922 78.064 335.377 78.373C334.842 78.6911 334.252 78.8546 333.607 78.8546Z" fill="var(--geist-foreground)"></path><path d="M356.84 45.4453H362.872V68.6846C362.863 70.8204 362.401 72.6472 361.498 74.1832C360.585 75.7191 359.321 76.8914 357.698 77.7185C356.084 78.5364 354.193 78.9546 352.044 78.9546C350.079 78.9546 348.318 78.6001 346.75 77.9094C345.182 77.2187 343.937 76.1826 343.024 74.8193C342.101 73.456 341.649 71.7565 341.649 69.7207H347.691C347.7 70.6114 347.903 71.3838 348.29 72.0291C348.677 72.6744 349.212 73.1651 349.895 73.5105C350.586 73.8559 351.38 74.0286 352.274 74.0286C353.243 74.0286 354.073 73.8286 354.746 73.4196C355.419 73.0197 355.936 72.4199 356.296 71.6201C356.646 70.8295 356.831 69.8479 356.84 68.6846V45.4453Z" fill="var(--geist-foreground)"></path><path d="M387.691 54.5338C387.544 53.1251 386.898 52.0254 385.773 51.2438C384.638 50.4531 383.172 50.0623 381.373 50.0623C380.11 50.0623 379.022 50.2532 378.118 50.6258C377.214 51.0075 376.513 51.5164 376.033 52.1617C375.554 52.807 375.314 53.5432 375.295 54.3703C375.295 55.061 375.461 55.6608 375.784 56.1607C376.107 56.6696 376.54 57.0968 377.103 57.4422C377.656 57.7966 378.274 58.0874 378.948 58.3237C379.63 58.56 380.313 58.76 380.995 58.9236L384.14 59.6961C385.404 59.9869 386.631 60.3778 387.802 60.8776C388.973 61.3684 390.034 61.9955 390.965 62.7498C391.897 63.5042 392.635 64.413 393.179 65.4764C393.723 66.5397 394 67.7848 394 69.2208C394 71.1566 393.502 72.8562 392.496 74.3285C391.491 75.7917 390.043 76.9369 388.143 77.764C386.252 78.582 383.965 79 381.272 79C378.671 79 376.402 78.6002 374.493 77.8004C372.575 77.0097 371.08 75.8463 370.001 74.3194C368.922 72.7926 368.341 70.9294 368.258 68.7391H374.235C374.318 69.8842 374.687 70.8386 375.314 71.6111C375.95 72.3745 376.78 72.938 377.795 73.3197C378.819 73.6923 379.962 73.8832 381.226 73.8832C382.545 73.8832 383.707 73.6832 384.712 73.2924C385.708 72.9016 386.492 72.3564 387.055 71.6475C387.627 70.9476 387.913 70.1206 387.922 69.1754C387.913 68.312 387.654 67.5939 387.156 67.0304C386.649 66.467 385.948 65.9944 385.053 65.6127C384.15 65.231 383.098 64.8856 381.899 64.5857L378.081 63.6223C375.323 62.9225 373.137 61.8592 371.541 60.4323C369.937 59.0054 369.143 57.115 369.143 54.7429C369.143 52.798 369.678 51.0894 370.758 49.6261C371.827 48.1629 373.294 47.0268 375.148 46.2179C377.011 45.4 379.114 45 381.456 45C383.836 45 385.92 45.4 387.719 46.2179C389.517 47.0268 390.929 48.1538 391.952 49.5897C392.976 51.0257 393.511 52.6707 393.539 54.5338H387.691Z" fill="var(--geist-foreground)"></path></svg></a></div></div><div class="navbar_mobileTopRight__p4VGF"><button class="navbar_search__dZT2b" data-variant="large" type="button">Search documentation...</button><button class="navbar_search__dZT2b" data-variant="medium" type="button">Search...<kbd>鈱楰</kbd></button><button aria-label="Search documentation" class="navbar_search__dZT2b" data-variant="small" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 6.5C1.5 3.73858 3.73858 1.5 6.5 1.5C9.26142 1.5 11.5 3.73858 11.5 6.5C11.5 9.26142 9.26142 11.5 6.5 11.5C3.73858 11.5 1.5 9.26142 1.5 6.5ZM6.5 0C2.91015 0 0 2.91015 0 6.5C0 10.0899 2.91015 13 6.5 13C8.02469 13 9.42677 12.475 10.5353 11.596L13.9697 15.0303L14.5 15.5607L15.5607 14.5L15.0303 13.9697L11.596 10.5353C12.475 9.42677 13 8.02469 13 6.5C13 2.91015 10.0899 0 6.5 0Z" fill="currentColor"/></svg></button><button aria-label="open menu" class="navbar_menuButton__BJwt4" type="button"><div class="menu-toggle_wrap__qevaX "></div></button></div></div><div class="navbar_links__jysVN"><div class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:row;--stack-align:center;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:4px"><a rel="noopener noreferrer" target="_blank" data-testid="navbar/vercel-logo" href="https://vercel.com/home?utm_source=next-site&utm_medium=banner&utm_campaign=blog_layouts-rfc" aria-label="Go to Vercel homepage" title="Go to Vercel homepage"><svg aria-label="Vercel logomark" height="22" role="img" style="width:auto;overflow:visible" viewBox="0 0 74 64"><path d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z" fill="var(--geist-foreground)"></path></svg></a><svg height="32" viewBox="0 0 32 32" width="32"><path d="M22 5L9 28" stroke="var(--accents-2)" stroke-linecap="round" stroke-linejoin="round"></path></svg><div class="navbar_uwuDesktopLogoWrapper__VynOK uwu-flex"><a aria-label="Go to the homepage" class="navbar_uwuDesktopLogo__MHsxN" title="Go to the homepage" data-state="closed" style="-webkit-touch-callout:none" data-zone="same" href="/?uwu=true"><img alt="Next.js uwu logo by SAWARATSUKI" width="54" height="34" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=64&q=75 1x, /_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=128&q=75 2x" src="/_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=128&q=75"/></a></div><div class="uwu-hidden"><a aria-label="Go to the homepage" class="navbar_logo__wXwXy" title="Go to the homepage" data-state="closed" style="-webkit-touch-callout:none" data-zone="same" href="/"><svg aria-label="Next.js logotype" height="18" role="img" viewBox="0 0 394 79"><path d="M261.919 0.0330722H330.547V12.7H303.323V79.339H289.71V12.7H261.919V0.0330722Z" fill="var(--geist-foreground)"></path><path d="M149.052 0.0330722V12.7H94.0421V33.0772H138.281V45.7441H94.0421V66.6721H149.052V79.339H80.43V12.7H80.4243V0.0330722H149.052Z" fill="var(--geist-foreground)"></path><path d="M183.32 0.0661486H165.506L229.312 79.3721H247.178L215.271 39.7464L247.127 0.126654L229.312 0.154184L206.352 28.6697L183.32 0.0661486Z" fill="var(--geist-foreground)"></path><path d="M201.6 56.7148L192.679 45.6229L165.455 79.4326H183.32L201.6 56.7148Z" fill="var(--geist-foreground)"></path><path clip-rule="evenodd" d="M80.907 79.339L17.0151 0H0V79.3059H13.6121V16.9516L63.8067 79.339H80.907Z" fill="var(--geist-foreground)" fill-rule="evenodd"></path><path d="M333.607 78.8546C332.61 78.8546 331.762 78.5093 331.052 77.8186C330.342 77.1279 329.991 76.2917 330 75.3011C329.991 74.3377 330.342 73.5106 331.052 72.8199C331.762 72.1292 332.61 71.7838 333.607 71.7838C334.566 71.7838 335.405 72.1292 336.115 72.8199C336.835 73.5106 337.194 74.3377 337.204 75.3011C337.194 75.9554 337.028 76.5552 336.696 77.0914C336.355 77.6368 335.922 78.064 335.377 78.373C334.842 78.6911 334.252 78.8546 333.607 78.8546Z" fill="var(--geist-foreground)"></path><path d="M356.84 45.4453H362.872V68.6846C362.863 70.8204 362.401 72.6472 361.498 74.1832C360.585 75.7191 359.321 76.8914 357.698 77.7185C356.084 78.5364 354.193 78.9546 352.044 78.9546C350.079 78.9546 348.318 78.6001 346.75 77.9094C345.182 77.2187 343.937 76.1826 343.024 74.8193C342.101 73.456 341.649 71.7565 341.649 69.7207H347.691C347.7 70.6114 347.903 71.3838 348.29 72.0291C348.677 72.6744 349.212 73.1651 349.895 73.5105C350.586 73.8559 351.38 74.0286 352.274 74.0286C353.243 74.0286 354.073 73.8286 354.746 73.4196C355.419 73.0197 355.936 72.4199 356.296 71.6201C356.646 70.8295 356.831 69.8479 356.84 68.6846V45.4453Z" fill="var(--geist-foreground)"></path><path d="M387.691 54.5338C387.544 53.1251 386.898 52.0254 385.773 51.2438C384.638 50.4531 383.172 50.0623 381.373 50.0623C380.11 50.0623 379.022 50.2532 378.118 50.6258C377.214 51.0075 376.513 51.5164 376.033 52.1617C375.554 52.807 375.314 53.5432 375.295 54.3703C375.295 55.061 375.461 55.6608 375.784 56.1607C376.107 56.6696 376.54 57.0968 377.103 57.4422C377.656 57.7966 378.274 58.0874 378.948 58.3237C379.63 58.56 380.313 58.76 380.995 58.9236L384.14 59.6961C385.404 59.9869 386.631 60.3778 387.802 60.8776C388.973 61.3684 390.034 61.9955 390.965 62.7498C391.897 63.5042 392.635 64.413 393.179 65.4764C393.723 66.5397 394 67.7848 394 69.2208C394 71.1566 393.502 72.8562 392.496 74.3285C391.491 75.7917 390.043 76.9369 388.143 77.764C386.252 78.582 383.965 79 381.272 79C378.671 79 376.402 78.6002 374.493 77.8004C372.575 77.0097 371.08 75.8463 370.001 74.3194C368.922 72.7926 368.341 70.9294 368.258 68.7391H374.235C374.318 69.8842 374.687 70.8386 375.314 71.6111C375.95 72.3745 376.78 72.938 377.795 73.3197C378.819 73.6923 379.962 73.8832 381.226 73.8832C382.545 73.8832 383.707 73.6832 384.712 73.2924C385.708 72.9016 386.492 72.3564 387.055 71.6475C387.627 70.9476 387.913 70.1206 387.922 69.1754C387.913 68.312 387.654 67.5939 387.156 67.0304C386.649 66.467 385.948 65.9944 385.053 65.6127C384.15 65.231 383.098 64.8856 381.899 64.5857L378.081 63.6223C375.323 62.9225 373.137 61.8592 371.541 60.4323C369.937 59.0054 369.143 57.115 369.143 54.7429C369.143 52.798 369.678 51.0894 370.758 49.6261C371.827 48.1629 373.294 47.0268 375.148 46.2179C377.011 45.4 379.114 45 381.456 45C383.836 45 385.92 45.4 387.719 46.2179C389.517 47.0268 390.929 48.1538 391.952 49.5897C392.976 51.0257 393.511 52.6707 393.539 54.5338H387.691Z" fill="var(--geist-foreground)"></path></svg></a></div></div><a class="" data-zone="same" href="/showcase">Showcase</a><a class="" title="Documentation" data-zone="same" href="/docs">Docs</a><a class="navbar_selected__XbA4W" data-zone="same" href="/blog">Blog</a><a rel="noopener noreferrer" target="_blank" href="https://vercel.com/templates/next.js?utm_source=next-site&utm_medium=navbar&utm_campaign=next_site_nav_templates">Templates<svg aria-hidden="true" class="navbar_externalArrow___VWBd" height="7" viewBox="0 0 6 6" width="7"><path d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z" fill="var(--accents-3)"></path></svg></a><a rel="noopener noreferrer" target="_blank" href="https://vercel.com/contact/sales/nextjs?utm_source=next-site&utm_medium=navbar&utm_campaign=next_site_nav_enterprise">Enterprise<svg aria-hidden="true" class="navbar_externalArrow___VWBd" height="7" viewBox="0 0 6 6" width="7"><path d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z" fill="var(--accents-3)"></path></svg></a></div><div class="navbar_headerButtons__m6ZFa"><button class="navbar_search__dZT2b" data-variant="large" type="button">Search documentation...</button><button class="navbar_search__dZT2b" data-variant="medium" type="button">Search...<kbd>鈱楰</kbd></button><button aria-label="Search documentation" class="navbar_search__dZT2b" data-variant="small" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 6.5C1.5 3.73858 3.73858 1.5 6.5 1.5C9.26142 1.5 11.5 3.73858 11.5 6.5C11.5 9.26142 9.26142 11.5 6.5 11.5C3.73858 11.5 1.5 9.26142 1.5 6.5ZM6.5 0C2.91015 0 0 2.91015 0 6.5C0 10.0899 2.91015 13 6.5 13C8.02469 13 9.42677 12.475 10.5353 11.596L13.9697 15.0303L14.5 15.5607L15.5607 14.5L15.0303 13.9697L11.596 10.5353C12.475 9.42677 13 8.02469 13 6.5C13 2.91015 10.0899 0 6.5 0Z" fill="currentColor"/></svg></button><a role="link" tabindex="0" href="https://vercel.com/new/clone?utm_source=next-site&utm_medium=banner&b=main&s=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmain%2Fexamples%2Fnextjs&showOptionalTeamCreation=false&template=nextjs&teamCreateStatus=hidden&utm_campaign=blog_layouts-rfc" type="submit" class="button_base__BjwbK reset_reset__KRyvc button_button__81573 reset_reset__KRyvc navbar_deploy__IKZN3 button_secondary__kMMNc button_small__iQMBm button_invert__YNhnn" data-geist-button="" data-prefix="true" data-suffix="false" data-version="v1" style="--geist-icon-size:16px"><span class="button_prefix__2XlwH"><svg aria-label="Vercel logomark" height="13" role="img" style="width:auto;overflow:visible" viewBox="0 0 74 64"><path d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z" fill="var(--geist-foreground)"></path></svg></span><span class="button_content__1aE1_">Deploy</span></a><a role="link" tabindex="0" href="/learn" type="submit" class="button_base__BjwbK reset_reset__KRyvc button_button__81573 reset_reset__KRyvc geist-new-themed geist-new-default geist-new-default-fill button_small__iQMBm button_invert__YNhnn" data-geist-button="" data-prefix="false" data-suffix="false" data-version="v1" style="--geist-icon-size:16px"><span class="button_content__1aE1_">Learn</span></a></div></nav></header><script>((e,t,r,n,o,i,a,s)=>{let l=document.documentElement,u=["light","dark"];function c(t){var r;(Array.isArray(e)?e:[e]).forEach(e=>{let r="class"===e,n=r&&i?o.map(e=>i[e]||e):o;r?(l.classList.remove(...n),l.classList.add(i&&i[t]?i[t]:t)):l.setAttribute(e,t)}),r=t,s&&u.includes(r)&&(l.style.colorScheme=r)}if(n)c(n);else try{let e=localStorage.getItem(t)||r,n=a&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(n)}catch(e){}})("class","zeit-theme","system",null,["light","dark"],{"light":"light-theme","dark":"dark-theme"},true,true)</script><main><div class="relative mx-auto max-w-screen-xl gap-x-6 px-4 py-10 md:flex md:flex-row md:py-10"><div id="geist-skip-nav" style="grid-row:1 / 1" tabindex="-1"></div><article class="detail_root__DU4wZ pb-20"><a class="detail_back__6w4Dy" href="/blog"><svg class="text-current" data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.46966 13.7803L6.99999 14.3107L8.06065 13.25L7.53032 12.7197L3.56065 8.75001H14.25H15V7.25001H14.25H3.56065L7.53032 3.28034L8.06065 2.75001L6.99999 1.68935L6.46966 2.21968L1.39644 7.2929C1.00592 7.68342 1.00592 8.31659 1.39644 8.70711L6.46966 13.7803Z" fill="currentColor"/></svg>Back to Blog</a><p class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-900);--text-size:0.875rem;--text-line-height:1rem;--text-letter-spacing:initial;--text-weight:400">Monday, May 23rd 2022</p><h1 class="text_wrapper__i87JK font-semibold" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:3rem;--text-line-height:3.5rem;--text-letter-spacing:-0.066875rem;--text-weight:700">Layouts RFC</h1><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-900);--text-size:0.875rem;--text-line-height:1.25rem;--text-letter-spacing:initial;--text-weight:400">Posted by</span><div class="stack_stack__iZkUS stack detail_authors__59UPR mb-8 mt-3 pb-4" data-version="v1" style="--stack-flex:initial;--stack-direction:row;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:16px"><a class="detail_author__AvoLc" href="https://twitter.com/delba_oliveira" target="_blank" rel="noopener noreferrer"><img alt="Delba de Oliveira" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fteam%2Fdelba.jpg&w=48&q=75 1x, /_next/image?url=%2Fstatic%2Fteam%2Fdelba.jpg&w=64&q=75 2x" src="/_next/image?url=%2Fstatic%2Fteam%2Fdelba.jpg&w=64&q=75"/><div class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:column;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:0px"><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:0.875rem;--text-line-height:1.25rem;--text-letter-spacing:initial;--text-weight:500">Delba de Oliveira</span><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-900);--text-size:0.75rem;--text-line-height:1rem;--text-letter-spacing:initial;--text-weight:400">@delba_oliveira</span></div></a><a class="detail_author__AvoLc" href="https://twitter.com/leerob" target="_blank" rel="noopener noreferrer"><img alt="Lee Robinson" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fteam%2Flee.jpg&w=48&q=75 1x, /_next/image?url=%2Fstatic%2Fteam%2Flee.jpg&w=64&q=75 2x" src="/_next/image?url=%2Fstatic%2Fteam%2Flee.jpg&w=64&q=75"/><div class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:column;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:0px"><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:0.875rem;--text-line-height:1.25rem;--text-letter-spacing:initial;--text-weight:500">Lee Robinson</span><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-900);--text-size:0.75rem;--text-line-height:1rem;--text-letter-spacing:initial;--text-weight:400">@leerob</span></div></a><a class="detail_author__AvoLc" href="https://twitter.com/sebmarkbage" target="_blank" rel="noopener noreferrer"><img alt="Sebastian Markb氓ge" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fteam%2Fseb.jpg&w=48&q=75 1x, /_next/image?url=%2Fstatic%2Fteam%2Fseb.jpg&w=64&q=75 2x" src="/_next/image?url=%2Fstatic%2Fteam%2Fseb.jpg&w=64&q=75"/><div class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:column;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:0px"><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:0.875rem;--text-line-height:1.25rem;--text-letter-spacing:initial;--text-weight:500">Sebastian Markb氓ge</span><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-900);--text-size:0.75rem;--text-line-height:1rem;--text-letter-spacing:initial;--text-weight:400">@sebmarkbage</span></div></a><a class="detail_author__AvoLc" href="https://twitter.com/timneutkens" target="_blank" rel="noopener noreferrer"><img alt="Tim Neutkens" loading="lazy" width="32" height="32" decoding="async" data-nimg="1" class="rounded-full" style="color:transparent" srcSet="/_next/image?url=%2Fstatic%2Fteam%2Ftim.jpg&w=48&q=75 1x, /_next/image?url=%2Fstatic%2Fteam%2Ftim.jpg&w=64&q=75 2x" src="/_next/image?url=%2Fstatic%2Fteam%2Ftim.jpg&w=64&q=75"/><div class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:column;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:0px"><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:0.875rem;--text-line-height:1.25rem;--text-letter-spacing:initial;--text-weight:500">Tim Neutkens</span><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-900);--text-size:0.75rem;--text-line-height:1rem;--text-letter-spacing:initial;--text-weight:400">@timneutkens</span></div></a></div><div class="prose prose-vercel max-w-none"><p>This RFC (Request for Comment) outlines the biggest update to Next.js since it was introduced in 2016:</p> <ul> <li><strong>Nested Layouts:</strong> Build complex applications with nested routes.</li> <li><strong>Designed for Server Components:</strong> Optimized for subtree navigation.</li> <li><strong>Improved Data Fetching:</strong> Fetch in layouts while avoiding waterfalls.</li> <li><strong>Using React 18 Features:</strong> Streaming, Transitions, and Suspense.</li> <li><strong>Client and Server Routing:</strong> Server-centric routing with <em>SPA-like</em> behavior.</li> <li><strong>100% incrementally adoptable</strong>: No breaking changes so you can adopt gradually.</li> <li><strong>Advanced Routing Patterns</strong>: Parallel routes, intercepting routes, and more.</li> </ul> <p>The new Next.js router will be built on top of the <a href="https://reactjs.org/blog/2022/03/29/react-v18.html" rel="noopener noreferrer nofollow" target="_blank">recently released React 18<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a> features. We plan to introduce defaults and conventions that allow you to easily adopt these new features and take advantage of the benefits they unlock.</p> <blockquote class="p-3 text-sm"> <p>Work on this RFC is ongoing and we'll announce when the new features are available. To provide feedback, join the conversation on <a href="https://github.com/vercel/next.js/discussions/37136" rel="noopener noreferrer" target="_blank">Github Discussions<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a>.</p> </blockquote> <h2 id="table-of-contents" data-docs-heading=""><a href="#table-of-contents">Table of Contents<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <ul> <li><a href="#motivation">Motivation</a></li> <li><a href="#terminology">Terminology</a></li> <li><a href="#how-routing-currently-works">How Routing Currently Works</a></li> <li><a href="#introducing-the-app-router">The <code>app</code> Directory</a></li> <li><a href="#defining-routes">Defining Routes</a></li> <li><a href="#layouts">Layouts</a></li> <li><a href="#pages">Pages</a></li> <li><a href="#react-server-components">React Server Components</a></li> <li><a href="#data-fetching">Data Fetching</a></li> <li><a href="#route-groups">Route Groups (New)</a></li> <li><a href="#server-centric-routing">Server Centric Routing (New)</a></li> <li><a href="#instant-loading-states">Instant Loading States (New)</a></li> <li><a href="#error-handling">Error Handling (New)</a></li> <li><a href="#templates">Templates (New)</a></li> <li><a href="#advanced-routing-patterns">Advanced Routing Patterns (New)</a></li> <li><a href="#conclusion">Conclusion</a></li> </ul> <h2 id="motivation" data-docs-heading=""><a href="#motivation">Motivation<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>We've been gathering community feedback from GitHub, Discord, Reddit, and our developer survey about the current limitations of routing in Next.js. We've found that:</p> <ul> <li>The developer experience of creating layouts can be improved. It should be easy to create layouts that can be nested, shared across routes, and have their state preserved on navigation.</li> <li>Many Next.js applications are dashboards or consoles, which would benefit from more advanced routing solutions.</li> </ul> <p>While the current routing system has worked well since the beginning of Next.js, we want to make it easier for developers to build more performant and feature-rich web applications.</p> <p>As framework maintainers, we also want to build a routing system that is backwards compatible and aligns with the future of React.</p> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> Some routing conventions were inspired by the Relay-based router at Meta, where some features of Server Components were originally developed, as well as client-side routers like React Router and Ember.js. The <code>layout.js</code> file convention was inspired by the work done in SvelteKit. We'd also like to thank <a href="https://twitter.com/cassidoo" rel="noopener noreferrer nofollow" target="_blank">Cassidy<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a> for opening <a href="https://github.com/vercel/next.js/discussions/26389" rel="noopener noreferrer" target="_blank">an earlier RFC on layouts<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a>.</p> </blockquote> <h2 id="terminology" data-docs-heading=""><a href="#terminology">Terminology<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>This RFC introduces new routing conventions and syntax. The terminology is based on React and standard web platform terms. Throughout the RFC, you'll see these terms linked back to their definitions below.</p> <ul> <li><strong>Tree:</strong> A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.</li> <li><strong>Subtree</strong> Part of the tree, starting at the root (first) and ending at the leaves (last).</li> </ul> <figure><img alt="" loading="lazy" width="1798" height="615" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fterminology.png&w=1920&q=75 1x, /_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fterminology.png&w=3840&q=75 2x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fterminology.png&w=3840&q=75"/></figure> <ul> <li><strong>URL Path:</strong> Part of the URL that comes after the domain.</li> <li><strong>URL Segment:</strong> Part of the URL path delimited by slashes.</li> </ul> <figure><img alt="" loading="lazy" width="1798" height="407" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Furl-anatomy.png&w=1920&q=75 1x, /_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Furl-anatomy.png&w=3840&q=75 2x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Furl-anatomy.png&w=3840&q=75"/></figure> <h2 id="how-routing-currently-works" data-docs-heading=""><a href="#how-routing-currently-works">How Routing Currently Works<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>Today, Next.js uses the file system to map individual folders and files in the <a href="/docs/pages/building-your-application/routing/pages-and-layouts">Pages</a> directory to routes accessible through URLs. Each <strong>page</strong> file exports a React Component and has an associated <strong>route</strong> based on its file name. For example:</p> <figure><img alt="" loading="lazy" width="1798" height="605" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Frouting-today.png&w=1920&q=75 1x, /_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Frouting-today.png&w=3840&q=75 2x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Frouting-today.png&w=3840&q=75"/></figure> <ul> <li><strong>Dynamic Routes:</strong> Next.js supports <a href="/docs/pages/building-your-application/routing/dynamic-routes">Dynamic Routes</a> (including catch all variations) with the <code>[param].js</code>, <code>[...param].js</code> and <code>[[...param]].js</code> conventions.</li> <li><strong>Layouts:</strong> Next.js offers support for simple <a href="/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern">component-based</a> layouts, per-page layouts using a component <a href="/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts">property pattern</a>, and a single global layout using a <a href="/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#single-shared-layout-with-custom-app">custom app</a>.</li> <li><strong>Data Fetching:</strong> Next.js provides data fetching methods (<a href="/docs/pages/building-your-application/data-fetching/get-static-props"><code>getStaticProps</code></a>, <a href="/docs/pages/building-your-application/data-fetching/get-server-side-props"><code>getServerSideProps</code></a>) which can be used at the page (route) level. These methods are used to determine if a page should be Statically Generated (<a href="/docs/pages/building-your-application/data-fetching/get-static-props"><code>getStaticProps</code></a>) or Server-Side Rendered (<a href="/docs/pages/building-your-application/data-fetching/get-server-side-props"><code>getServerSideProps</code></a>). In addition, you can use <a href="/docs/pages/building-your-application/data-fetching/incremental-static-regeneration">Incremental Static Regeneration (ISR)</a> to create or update static pages after a site is built.</li> <li><strong>Rendering:</strong> Next.js provides three rendering options: <a href="https://nextjs.org/learn/foundations/how-nextjs-works/rendering" rel="noopener noreferrer" target="_blank">Static Generation<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a>, <a href="https://nextjs.org/learn/foundations/how-nextjs-works/rendering" rel="noopener noreferrer" target="_blank">Server-Side Rendering<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a>, and <a href="https://nextjs.org/learn/foundations/how-nextjs-works/rendering" rel="noopener noreferrer" target="_blank">Client-Side Rendering<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a>. By default, pages are statically generated unless they have a blocking data fetching requirement (<code>getServerSideProps</code>).</li> </ul> <h2 id="introducing-the-app-directory" data-docs-heading=""><a href="#introducing-the-app-directory">Introducing the <code>app</code> Directory<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>To ensure these new improvements can be incrementally adopted and avoid breaking changes, we are proposing a new directory called <code>app</code>.</p> <figure><img alt="" loading="lazy" width="3596" height="1534" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fapp-folder.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fapp-folder.png&w=3840&q=75"/></figure> <p>The <code>app</code> directory will work alongside the <code>pages</code> directory. You can incrementally move parts of your application to the new <code>app</code> directory to take advantage of the new features. For backwards compatibility, the behavior of the <code>pages</code> directory will remain the same and continue to be supported.</p> <h2 id="defining-routes" data-docs-heading=""><a href="#defining-routes">Defining Routes<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>You can use the <strong>folder</strong> hierarchy inside <code>app</code> to define routes. A <strong>route</strong> is a single path of nested folders, following the hierarchy from the <strong>root folder</strong> down to a final <strong>leaf folder.</strong></p> <figure><img alt="" loading="lazy" width="3596" height="1280" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froutes.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froutes.png&w=3840&q=75"/></figure> <p>For example, you can add a new <code>/dashboard/settings</code> route by nesting two new folders in the <code>app</code> directory.</p> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong></p> <ul> <li>With this system, you'll use folders to define routes, and files to define UI (with new file conventions such as <code>layout.js</code>, <code>page.js</code>, and in the second part of the RFC <code>loading.js</code>).</li> <li>This allows you to colocate your own project files (UI components, test files, stories, etc) inside the <code>app</code> directory. Currently this is only possible with the <a href="/docs/pages/api-reference/next-config-js/pageExtensions#including-non-page-files-in-the-pages-directory">pageExtensions config</a>.</li> </ul> </blockquote> <h3 id="route-segments" data-docs-heading=""><a href="#route-segments">Route Segments<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>Each folder in the <a href="#terminology">subtree</a> represents a <strong>route segment</strong>. Each route segment is mapped to a corresponding <strong>segment</strong> in a <strong><a href="#terminology">URL path</a></strong>.</p> <figure><img alt="" loading="lazy" width="3596" height="1512" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-segments.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-segments.png&w=3840&q=75"/></figure> <p>For example, the <code>/dashboard/settings</code> route is composed of 3 segments:</p> <ul> <li>The <code>/</code> root segment</li> <li>The <code>dashboard</code> segment</li> <li>The <code>settings</code> segment</li> </ul> <blockquote class="p-3 text-sm"> <p><strong>Note</strong>: The name <strong>route segment</strong> was chosen to match the existing terminology around <a href="#terminology">URL paths</a>.</p> </blockquote> <h2 id="layouts" data-docs-heading=""><a href="#layouts">Layouts<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p><strong>New file convention:</strong> <code>layout.js</code></p> <p>So far, we have used folders to define the routes of our application. But empty folders do not do anything by themselves. Let's discuss how you can define the UI that will render for these routes using new file conventions.</p> <p>A <strong>layout</strong> is UI that is shared between route segments in a <a href="#terminology">subtree</a>. Layouts do not affect <a href="#terminology">URL paths</a> and do not re-render (React state is preserved) when a user navigates between sibling segments.</p> <p>A layout can be defined by default exporting a React component from a <code>layout.js</code> file. The component should accept a <code>children</code> prop which will be populated with the segments the layout is wrapping.</p> <p>There are 2 types of layouts:</p> <ul> <li><strong>Root layout:</strong> Applies to all routes</li> <li><strong>Regular layout:</strong> Applies to specific routes</li> </ul> <p>You can nest two or more layouts together to form <strong>nested layouts</strong>.</p> <h3 id="root-layout" data-docs-heading=""><a href="#root-layout">Root Layout<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>You can create a root layout that will apply to all routes of your application by adding a <code>layout.js</code> file inside the <code>app</code> folder.</p> <figure><img alt="" loading="lazy" width="3596" height="1210" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froot-layout.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froot-layout.png&w=3840&q=75"/></figure> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong></p> <ul> <li>The root layout replaces the need for a <a href="/docs/pages/building-your-application/routing/custom-app">custom App (<code>_app.js</code>)</a> and <a href="/docs/pages/building-your-application/routing/custom-document">custom Document (<code>_document.js</code>)</a> since it applies to all routes.</li> <li>You'll be able to use the root layout to customize the initial document shell (e.g. <code><html></code> and <code><body></code> tags).</li> <li>You'll be able to fetch data inside the root layout (and other layouts).</li> </ul> </blockquote> <h3 id="regular-layouts" data-docs-heading=""><a href="#regular-layouts">Regular Layouts<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>You can also create a layout that only applies to a part of your application by adding a <code>layout.js</code> file inside a specific folder.</p> <figure><img alt="" loading="lazy" width="3596" height="1696" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fregular-layouts.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fregular-layouts.png&w=3840&q=75"/></figure> <p>For example, you can create a <code>layout.js</code> file inside the <code>dashboard</code> folder which will only apply to the route segments inside <code>dashboard</code>.</p> <h3 id="nesting-layouts" data-docs-heading=""><a href="#nesting-layouts">Nesting Layouts<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>Layouts are <strong>nested</strong> by default.</p> <figure><img alt="" loading="lazy" width="3596" height="1696" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fnested-layouts.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fnested-layouts.png&w=3840&q=75"/></figure> <p>For example, if we were to combine the two layouts above. The root layout (<code>app/layout.js</code>) would be applied to the <code>dashboard</code> layout, which would also apply to all route segments inside <code>dashboard/*</code>.</p> <figure><img alt="" loading="lazy" width="3596" height="1668" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fnested-layouts-example.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fnested-layouts-example.png&w=3840&q=75"/></figure> <h2 id="pages" data-docs-heading=""><a href="#pages">Pages<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p><strong>New file convention:</strong> <code>page.js</code></p> <p>A page is UI that is unique to a route segment. You can create a page by adding a <code>page.js</code> file inside a folder.</p> <figure><img alt="" loading="lazy" width="3596" height="1696" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage.png&w=3840&q=75"/></figure> <p>For example, to create pages for the <code>/dashboard/*</code> routes, you can add a <code>page.js</code> file inside each folder. When a user visits <code>/dashboard/settings</code>, Next.js will render the <code>page.js</code> file for the <code>settings</code> folder wrapped in any layouts that exist further up the <a href="#terminology">subtree</a>.</p> <figure><img alt="" loading="lazy" width="3596" height="1668" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage-example.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage-example.png&w=3840&q=75"/></figure> <p>You can create a <code>page.js</code> file directly inside the dashboard folder to match the <code>/dashboard</code> route. The dashboard layout will also apply to this page:</p> <figure><img alt="" loading="lazy" width="3596" height="1858" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage-nested.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage-nested.png&w=3840&q=75"/></figure> <p>This route is composed of 2 segments:</p> <ul> <li>The <code>/</code> root segment</li> <li>The <code>dashboard</code> segment</li> </ul> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong></p> <ul> <li>For a route to be valid, it needs to have a page in its leaf segment. If it doesn't, the route will throw an error.</li> </ul> </blockquote> <h3 id="layout-and-page-behavior" data-docs-heading=""><a href="#layout-and-page-behavior">Layout and Page Behavior<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <ul> <li>The file extensions <code>js|jsx|ts|tsx</code> can be used for Pages and Layouts.</li> <li>Page Components are the default export of <code>page.js</code>.</li> <li>Layout Components are the default export of <code>layout.js</code>.</li> <li>Layout Components <strong>must</strong> accept a <code>children</code> prop.</li> </ul> <p>When a layout component is rendered, the <code>children</code> prop will be populated with a child layout (if it exists further down the <a href="#terminology">subtree</a>) or a page.</p> <p>It may be easier to visualize it as a layout <a href="#terminology">tree</a> where the parent layout will pick the nearest child layout until it reaches a page.</p> <p><strong>Example:</strong></p> <figure><img alt="" loading="lazy" width="3596" height="1372" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fbasic-example.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fbasic-example.png&w=3840&q=75"/></figure> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">app/layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-comment)">// Root layout</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// - Applies to all routes</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">RootLayout</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">html</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">body</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Header</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {children}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Footer</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </</span><span style="color:var(--shiki-token-string-expression)">body</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </</span><span style="color:var(--shiki-token-string-expression)">html</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">app/dashboard/layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-comment)">// Regular layout</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// - Applies to route segments in app/</span><span style="color:var(--shiki-token-comment)" class="highlighted-word">dashboard</span><span style="color:var(--shiki-token-comment)">/*</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">DashboardLayout</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">DashboardSidebar</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {children}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">app/dashboard/analytics/page.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-comment)">// Page Component</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// - The UI for the `app/</span><span style="color:var(--shiki-token-comment)" class="highlighted-word">dashboard</span><span style="color:var(--shiki-token-comment)">/analytics` segment</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// - Matches the `acme.com/</span><span style="color:var(--shiki-token-comment)" class="highlighted-word">dashboard</span><span style="color:var(--shiki-token-comment)">/analytics` URL path</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">AnalyticsPage</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">main</span><span style="color:var(--shiki-color-text)">>...</</span><span style="color:var(--shiki-token-string-expression)">main</span><span style="color:var(--shiki-color-text)">>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>The above combination of layouts and pages would render the following component hierarchy:</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:16px;height:16px;color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 6.5V13.5C14.5 14.8807 13.3807 16 12 16H4C2.61929 16 1.5 14.8807 1.5 13.5V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5ZM13 6.5V13.5C13 14.0523 12.5523 14.5 12 14.5H4C3.44772 14.5 3 14.0523 3 13.5V1.5H8V5V6.5H9.5H13ZM9.5 2.12132V5H12.3787L9.5 2.12132Z" fill="currentColor"/></svg></div><span class="code-block_filenameP__02nok">Component hierarchy</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-color-text)"><</span><span style="color:var(--shiki-token-constant)">RootLayout</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Header</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">DashboardLayout</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">DashboardSidebar</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">AnalyticsPage</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">main</span><span style="color:var(--shiki-color-text)">>...</</span><span style="color:var(--shiki-token-string-expression)">main</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </</span><span style="color:var(--shiki-token-constant)">AnalyticsPage</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </</span><span style="color:var(--shiki-token-constant)">DashboardLayout</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Footer</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"></</span><span style="color:var(--shiki-token-constant)">RootLayout</span><span style="color:var(--shiki-color-text)">></span></span></code></pre></div> <h2 id="react-server-components" data-docs-heading=""><a href="#react-server-components">React Server Components<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong>聽React introduced new component types: Server, Client (traditional React components), and Shared. To learn more about these new types, we recommend reading the React <a href="https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html" rel="noopener noreferrer nofollow" target="_blank">Server Components RFC<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a>.</p> </blockquote> <p>With this RFC, you can start using React features and incrementally adopt React Server Components into your Next.js application.</p> <p>The internals of the new routing system will also leverage recently released React features such as Streaming, Suspense, and Transitions. These are the building blocks for React Server Components.</p> <h3 id="server-components-as-the-default" data-docs-heading=""><a href="#server-components-as-the-default">Server Components as the Default<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>One of the biggest changes between the <code>pages</code> and <code>app</code> directories is that, by default, <strong>files inside <code>app</code> will be rendered on the server as React Server Components.</strong></p> <p>This will allow you to automatically adopt React Server Components when migrating from <code>pages</code> to <code>app</code>.</p> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> Server components can be used in the <code>app</code> folder or your own folders, but cannot be used in the <code>pages</code> directory for backwards compatibility.</p> </blockquote> <h3 id="client-and-server-components-convention" data-docs-heading=""><a href="#client-and-server-components-convention">Client and Server Components Convention<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>The <code>app</code> folder will support server, client, and shared components, and you'll be able to <a href="#interleaving-client-and-server-components-in-a-route">interleave these components in a tree</a>.</p> <figure><img alt="" loading="lazy" width="3596" height="1230" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fserver-components.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fserver-components.png&w=3840&q=75"/></figure> <p>There is an <a href="https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278" rel="noopener noreferrer nofollow" target="_blank">ongoing discussion<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a> on what exactly the convention will be for defining Client Components and Server Components. We will follow the resolution of this discussion.</p> <ul> <li>For now, Server components can be defined by appending <code>.server.js</code> to the filename. E.g. <code>layout.server.js</code></li> <li>Client components can be defined by appending the <code>.client.js</code> to the filename. E.g. <code>page.client.js</code>.</li> <li><code>.js</code> files are considered shared components. Since they could be rendered on the Server and the Client, they need to respect the constraints of each context.</li> </ul> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong></p> <ul> <li>Client and Server components have聽<a href="https://github.com/josephsavona/rfcs/blob/server-components/text/0000-server-components.md#capabilities--constraints-of-server-and-client-components" rel="noopener noreferrer nofollow" target="_blank">constraints<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a> that need to be respected. When deciding to use a client or server component, we recommend using server components (default) until you need to use a client component.</li> </ul> </blockquote> <h3 id="hooks" data-docs-heading=""><a href="#hooks">Hooks<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>We'll be adding Client and Server component hooks that鈥檒l allow you to access the headers object, cookies, pathnames, search params, etc. In the future, we'll have documentation with more information.</p> <h3 id="rendering-environments" data-docs-heading=""><a href="#rendering-environments">Rendering Environments<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>You'll have granular control of what components will be in the client-side JavaScript bundle using the Client and Server Components convention.</p> <p>By default, routes in <code>app</code> will use Static Generation, and will switch to dynamic rendering when a route segment uses <a href="#hooks">server-side hooks</a> that require request context.</p> <h3 id="interleaving-client-and-server-components-in-a-route" data-docs-heading=""><a href="#interleaving-client-and-server-components-in-a-route">Interleaving Client and Server Components in a Route<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>In React, there's a restriction around importing Server Components inside Client Components because Server Components might have server-only code (e.g. database or filesystem utilities).</p> <p>For example, importing the Server Component would not work:</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">ClientComponent.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> ServerComponent </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'./ServerComponent.js'</span><span style="color:var(--shiki-color-text)">;</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">ClientComponent</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">ServerComponent</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>However, a Server Component can be passed as a child of a Client Component. You can do this by <strong>wrapping</strong> them in another Server Component. For example:</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">ClientComponent.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">ClientComponent</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">h1</span><span style="color:var(--shiki-color-text)">>Client Component</</span><span style="color:var(--shiki-token-string-expression)">h1</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {children}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// ServerComponent.js</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">ServerComponent</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">h1</span><span style="color:var(--shiki-color-text)">>Server Component</</span><span style="color:var(--shiki-token-string-expression)">h1</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// page.js</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// It's possible to import Client and Server components inside Server Components</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// because this component is rendered on the server</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> ClientComponent </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"./ClientComponent.js"</span><span style="color:var(--shiki-color-text)">;</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> ServerComponent </span><span style="color:var(--shiki-token-keyword)">from</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"./ServerComponent.js"</span><span style="color:var(--shiki-color-text)">;</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">ServerComponentPage</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">ClientComponent</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">ServerComponent</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </</span><span style="color:var(--shiki-token-constant)">ClientComponent</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>With this pattern, React will know it needs to render <code>ServerComponent</code> on the server before sending the result (which doesn't contain any server-only code) to the client. From the Client Component's perspective, its child will be already rendered.</p> <p>In layouts, this pattern is applied with the <code>children</code> prop so you don't have to create an additional wrapper component.</p> <p>For example, the <code>ClientLayout</code> component will accept the <code>ServerPage</code> component as its child:</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">app/dashboard/layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-comment)">// The Dashboard Layout is a Client Component</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">ClientLayout</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-comment)">// Can use useState / useEffect here</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">h1</span><span style="color:var(--shiki-color-text)">>Layout</</span><span style="color:var(--shiki-token-string-expression)">h1</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {children}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// The Page is a Server Component that will be passed to Dashboard Layout</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// app/</span><span style="color:var(--shiki-token-comment)" class="highlighted-word">dashboard</span><span style="color:var(--shiki-token-comment)">/settings/page.js</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">ServerPage</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">h1</span><span style="color:var(--shiki-color-text)">>Page</</span><span style="color:var(--shiki-token-string-expression)">h1</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> This style of composition is an important pattern for rendering Server Components inside Client Components. It sets the precedence of one pattern to learn, and is one of the reasons why we've decided to use the <code>children</code> prop.</p> </blockquote> <h2 id="data-fetching" data-docs-heading=""><a href="#data-fetching">Data fetching<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>It will be possible to fetch data inside multiple segments in a route. This is different from the <code>pages</code> directory, where data fetching was limited to the page-level.</p> <h3 id="data-fetching-in-layouts" data-docs-heading=""><a href="#data-fetching-in-layouts">Data fetching in Layouts<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>You can fetch data in a <code>layout.js</code> file by using the Next.js data fetching methods <code>getStaticProps</code> or <code>getServerSideProps</code>.</p> <p>For example, a blog layout could use <code>getStaticProps</code> to fetch categories from a CMS, which can be used to populate a sidebar component:</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">app/blog/layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">async</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getStaticProps</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">categories</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getCategoriesFromCMS</span><span style="color:var(--shiki-color-text)">();</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> props</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> { categories }</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> };</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">BlogLayout</span><span style="color:var(--shiki-color-text)">({ categories</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">BlogSidebar</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">categories</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)">{categories} /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {children}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="multiple-data-fetching-methods-in-a-route" data-docs-heading=""><a href="#multiple-data-fetching-methods-in-a-route">Multiple data fetching methods in a route<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>You can also fetch data in multiple segments of a route. For example, a <code>layout</code> that fetches data can also wrap a <code>page</code> that fetches its own data.</p> <p>Using the blog example above, a single post page can use <code>getStaticProps</code> and <code>getStaticPaths</code> to fetch post data from a CMS:</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">app/blog/[slug]/page.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">async</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getStaticPaths</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">posts</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getPostSlugsFromCMS</span><span style="color:var(--shiki-color-text)">();</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> paths</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">posts</span><span style="color:var(--shiki-token-function)">.map</span><span style="color:var(--shiki-color-text)">((post) </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-color-text)"> ({</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> params</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> { slug</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">post</span><span style="color:var(--shiki-color-text)">.slug }</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> }))</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> };</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">async</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getStaticProps</span><span style="color:var(--shiki-color-text)">({ params }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">post</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getPostFromCMS</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-color-text)">.slug);</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> props</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> { post }</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> };</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">BlogPostPage</span><span style="color:var(--shiki-color-text)">({ post }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Post</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">post</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)">{post} />;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>Since both <code>app/blog/layout.js</code> and <code>app/blog/[slug]/page.js</code> use <code>getStaticProps</code>, Next.js will statically generate the whole <code>/blog/[slug]</code> route as <strong>React Server Components</strong> at build time - resulting in less client-side JavaScript and faster hydration.</p> <p>Statically generated routes improve this further, as the client navigation reuses the cache (Server Components data) and doesn't recompute work, leading to less CPU time because you're rendering a snapshot of the Server Components.</p> <h3 id="behavior-and-priority" data-docs-heading=""><a href="#behavior-and-priority">Behavior and priority<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>Next.js Data Fetching Methods (<code>getServerSideProps</code> and <code>getStaticProps</code>) can only be used in Server Components in the <code>app</code> folder. Different data fetching methods in segments across a single route affect each other.</p> <p>Using <code>getServerSideProps</code> in one segment will affect <code>getStaticProps</code> in other segments. Since a request already has to go to a server for the <code>getServerSideProps</code> segment, the server will also render any <code>getStaticProps</code> segments. It will reuse the props fetched at build time so the data will still be static, the <strong>rendering</strong> happens on-demand on every request with the props generated during <code>next build</code>.</p> <p>Using <code>getStaticProps</code> with <strong>revalidate (ISR)</strong> in one segment will affect <code>getStaticProps</code> with <code>revalidate</code> in other segments. If there are two revalidate periods in one route, the shorter revalidation will take precedence.</p> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> In the future, this may be optimized to allow for full data fetching granularity in a route.</p> </blockquote> <h3 id="data-fetching-with-react-server-components" data-docs-heading=""><a href="#data-fetching-with-react-server-components">Data fetching with React Server Components<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>The combination of Server-Side Routing, React Server Components, Suspense and Streaming have a few implications for data fetching and rendering in Next.js:</p> <h3 id="parallel-data-fetching" data-docs-heading=""><a href="#parallel-data-fetching">Parallel data fetching<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>Next.js will eagerly initiate data fetches in parallel to minimize waterfalls. For example, if data fetching was <strong>sequential</strong>, each nested segment in the route couldn't start fetching data until the previous segment was completed. With <strong>parallel</strong> fetching, however, each segment can eagerly start data fetching at the same time.</p> <figure><img alt="" loading="lazy" width="3596" height="1386" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fparallel.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fparallel.png&w=3840&q=75"/></figure> <p>Since rendering may depend on Context, rendering for each segment will start once its data has been fetched and its parent has finished rendering.</p> <p>In the future, with Suspense, rendering could also start immediately - even if the data is not completely loaded. If the data is read before it's available, Suspense will be triggered. React will start rendering Server Components optimistically, before the requests have completed, and will slot in the result as the requests resolve.</p> <h3 id="partial-fetching-and-rendering" data-docs-heading=""><a href="#partial-fetching-and-rendering">Partial Fetching and Rendering<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>When navigating between sibling route segments, Next.js will only fetch and render from that segment down. It will not need to re-fetch or re-render anything above. This means in a page that shares a layout, the layout will be preserved when a user navigates between sibling pages, and Next.js will only fetch and render from that segment down.</p> <p>This is especially useful for React Server Components, as otherwise each navigation would cause the full page to re-render on the server instead of rendering only the changed part of the page on the server. This reduces the amount of data transfered and execution time, leading to improved performance.</p> <p>For example, if the user navigates between the <code>/analytics</code> and the <code>/settings</code> pages, React will re-render the page segments but preserve the layouts:</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fpartial-example.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fpartial-example.png&w=3840&q=75"/></figure> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> It will be possible to force a re-fetch of data higher up the <a href="#terminology">tree</a>. We are still discussing the details of how this will look and will update the RFC.</p> </blockquote> <h2 id="route-groups" data-docs-heading=""><a href="#route-groups">Route Groups<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>The hierarchy of the <code>app</code> folder maps directly to URL paths. But it鈥檚 possible to break out of this pattern by creating a route group. Route groups can be used to:</p> <ul> <li>Organize routes without affecting the URL structure.</li> <li>Opt a route segment out of a layout.</li> <li>Create multiple root layouts by splitting the application.</li> </ul> <h3 id="convention" data-docs-heading=""><a href="#convention">Convention<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>A route group can be created by wrapping a folder鈥檚 name in parenthesis: <code>(folderName)</code></p> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> The naming of route groups are only for organizational purposes since they do not affect the URL path.</p> </blockquote> <p><strong>Example: Opting a route out of a layout</strong></p> <p>To opt a route out of a layout, create a new route group (e.g. <code>(shop)</code>) and move the routes that share the same layout into the group (e.g. <code>account</code> and <code>cart</code>). The routes outside of the group will not share the layout (e.g. <code>checkout</code>).</p> <p>Before:</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-group-opt-out-before.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-group-opt-out-before.png&w=3840&q=75"/></figure> <p>After:</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-group-opt-out-after.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-group-opt-out-after.png&w=3840&q=75"/></figure> <p><strong>Example: Organizing routes without affecting the URL path</strong></p> <p>Similarly, to organize routes, create a group to keep related routes together. The folders in parenthesis will be omitted from the URL (e.g. <code>(marketing)</code> or <code>(shop)</code>).</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-group-organisation.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-group-organisation.png&w=3840&q=75"/></figure> <p><strong>Example: Creating multiple root layouts</strong></p> <p>To create multiple root layouts, create two or more route groups at the top level of the <code>app</code> directory. This is useful for partitioning an application into sections that have a completely different UI or experience. The <code><html></code>, <code><body></code> and <code><head></code> tags of each root layout can be customized separately.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-group-multiple-root.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Froute-group-multiple-root.png&w=3840&q=75"/></figure> <h2 id="server-centric-routing" data-docs-heading=""><a href="#server-centric-routing">Server-Centric Routing<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>Currently, Next.js uses client-side routing. After the initial load and on subsequent navigation, a request is made to the server for the resources of the new page. This includes the <strong>JavaScript for every component</strong> (including components only shown under certain conditions) and their props (JSON data from聽<code>getServerSideProps</code>聽or聽<code>getStaticProps</code>). Once both the JavaScript and data are loaded from the server, <strong>React renders the components client-side.</strong></p> <p>In this new model, Next.js will use server-centric routing while maintaining client-side transitions. This aligns with聽Server Components聽which are evaluated on the server.</p> <p>On navigation, data is fetched and React renders the components <strong>server-side</strong>. The output from the server are special instructions (not HTML or JSON) for React on the client to update the DOM. These instructions hold the <strong>result</strong> of the rendered Server Components meaning that no JavaScript for that component has to be loaded in the browser to render the result.</p> <p>This is in contrast to the current default of Client components, which the component JavaScript to the browser to be rendered client-side.</p> <p>Some benefits of server-centric routing with React Server Components include:</p> <ul> <li>Routing uses the same request used for Server Components (no additional server requests are made).</li> <li>Less work is done on the server because navigating between routes only fetches and renders the segments that change.</li> <li>No additional JavaScript is loaded in the browser when client-side navigating when no new client components are used.</li> <li>The router leverages a new streaming protocol so that rendering can start before all data is loaded.</li> </ul> <p>As users navigate around an app, the router will store the result of the React Server Component <em>payload</em> in an in-memory client-side cache. The cache is split by route segments which allows invalidation at any level and ensures consistency across concurrent renders. This means that for certain cases, the cache of a previously fetched segment can be re-used.</p> <blockquote class="p-3 text-sm"> <p><strong>Note</strong></p> <ul> <li>Static Generation and Server-side caching can be used to optimize data fetching.</li> <li>The information above describes the behavior of subsequent navigations. The initial load is a different process involving Server Side Rendering to generate HTML.</li> <li>While client-side routing has worked well for Next.js, it scales poorly when the number of potential routes is large because the client has to download a聽<strong>route map.</strong></li> <li>Overall, by using React Server Components, client-side navigation is faster because we load and render less components in the browser.</li> </ul> </blockquote> <h2 id="instant-loading-states" data-docs-heading=""><a href="#instant-loading-states">Instant Loading States<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>With server-side routing, navigation happens <strong>after</strong> data fetching and rendering so it鈥檚 important to show loading UI while the data is being fetched otherwise the application will seem unresponsive.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fserver-side-routing.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fserver-side-routing.png&w=3840&q=75"/></figure> <p>The new router will use <a href="https://reactjs.org/docs/react-api.html#reactsuspense" rel="noopener noreferrer nofollow" target="_blank">Suspense<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a> for instant loading states and default skeletons. This means loading UI can be shown immediately while the content for the new segment loads. The new content is then swapped in once rendering on the server is complete.</p> <p>While rendering is happening:</p> <ul> <li>Navigation to the new route will be immediate.</li> <li>Shared layouts will remain interactive while new route segments load.</li> <li>Navigation will be interruptible - meaning the user can navigate between routes while the content of one route is loading.</li> </ul> <h3 id="default-loading-skeletons" data-docs-heading=""><a href="#default-loading-skeletons">Default loading skeletons<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>Suspense boundaries will be automatically handled behind-the-scenes with a new file convention called <code>loading.js</code>.</p> <p><strong>Example:</strong></p> <p>You will be able to create a default loading skeleton by adding a <code>loading.js</code> file inside a folder.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Floading.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Floading.png&w=3840&q=75"/></figure> <p>The <code>loading.js</code> should export a React component:</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">loading.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Loading</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">YourSkeleton</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// layout.js</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Layout</span><span style="color:var(--shiki-color-text)">({children}) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Sidebar</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {children}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> )</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// Output</span></span> <span class="line"><span style="color:var(--shiki-color-text)"><></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Sidebar</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Suspense</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">fallback</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)">{<</span><span style="color:var(--shiki-token-constant)">Loading</span><span style="color:var(--shiki-color-text)"> />}>{children}</</span><span style="color:var(--shiki-token-constant)">Suspense</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"></></span></span></code></pre></div> <p>This will cause all segments in the folder to be wrapped in a suspense boundary. The default skeleton will be used when the layout is first loaded and when navigating between sibling pages.</p> <h2 id="error-handling" data-docs-heading=""><a href="#error-handling">Error Handling<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p><a href="https://reactjs.org/docs/error-boundaries.html" rel="noopener noreferrer nofollow" target="_blank">Error boundaries<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a>聽are React components that catch JavaScript errors anywhere in their child component tree.</p> <h3 id="convention-1" data-docs-heading=""><a href="#convention-1">Convention<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>You'll be able to create an Error Boundary that will catch errors within a subtree by adding a聽<code>error.js</code>聽file and default exporting a React Component.</p> <figure><img alt="" loading="lazy" width="3596" height="1230" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Ferror.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Ferror.png&w=3840&q=75"/></figure> <p>The Component will be shown as a fallback if an error is thrown within that subtree. This component can be used to log errors, display useful information about the error, and functionality to attempt to recover from the error.</p> <p>Due to the nested nature of segments and layouts, creating Error boundaries allows you to isolate errors to those parts of the UI. During an error, layouts above the boundary will remain interactive and their state will be preserved.</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">error.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Error</span><span style="color:var(--shiki-color-text)">({ error</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> reset }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> An error occurred: {</span><span style="color:var(--shiki-token-constant)">error</span><span style="color:var(--shiki-color-text)">.message}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">button</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">onClick</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)">{() </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">reset</span><span style="color:var(--shiki-color-text)">()}>Try again</</span><span style="color:var(--shiki-token-string-expression)">button</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// layout.js</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Layout</span><span style="color:var(--shiki-color-text)">({children}) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Sidebar</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {children}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> )</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// Output</span></span> <span class="line"><span style="color:var(--shiki-color-text)"><></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Sidebar</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">ErrorBoundary</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">fallback</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)">{<</span><span style="color:var(--shiki-token-constant)">Error</span><span style="color:var(--shiki-color-text)"> />}>{children}</</span><span style="color:var(--shiki-token-constant)">ErrorBoundary</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"></></span></span></code></pre></div> <blockquote class="p-3 text-sm"> <p>Note:</p> <ul> <li>Errors inside a聽<code>layout.js</code>聽file in the same segment as an聽<code>error.js</code>聽will not be caught as the automatic error boundary wraps the children of a layout and not the layout itself.</li> </ul> </blockquote> <h2 id="templates" data-docs-heading=""><a href="#templates">Templates<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>Templates are similar to Layouts in that they wrap each child Layout or Page.</p> <p>Unlike Layouts that persist across routes and maintain state, templates create a new instance for each of their children. This means that when a user navigates between route segments that share a template, a new instance of the component is mounted.</p> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> We recommend using Layouts unless you have a specific reason to use a Template.</p> </blockquote> <h3 id="convention-2" data-docs-heading=""><a href="#convention-2">Convention<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>A template can be defined by exporting a default React component from a聽<code>template.js</code>聽file. The component should accept a聽<code>children</code>聽prop which will be populated with nested segments.</p> <h3 id="example" data-docs-heading=""><a href="#example">Example<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <figure><img alt="" loading="lazy" width="3596" height="1230" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Ftemplate.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Ftemplate.png&w=3840&q=75"/></figure> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">template.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Template</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Container</span><span style="color:var(--shiki-color-text)">>{children}</</span><span style="color:var(--shiki-token-constant)">Container</span><span style="color:var(--shiki-color-text)">>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>The rendered output of a route segment with a Layout and a Template will be as such:</p> <div class="relative code-block_wrapper__t6FCO not-prose" data-geist-code-block=""><button aria-label="Copy code" class="code-block_copyButton__uo5Yu code-block_copyFloatingButton__PsMvB" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-color-text)"><</span><span style="color:var(--shiki-token-constant)">Layout</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {</span><span style="color:var(--shiki-token-comment)">/* Note that the template is given a unique key. */</span><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Template</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">key</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)">{routeParam}>{children}</</span><span style="color:var(--shiki-token-constant)">Template</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"></</span><span style="color:var(--shiki-token-constant)">Layout</span><span style="color:var(--shiki-color-text)">></span></span></code></pre></div> <h3 id="behavior" data-docs-heading=""><a href="#behavior">Behavior<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>There may be cases where you need to mount and unmount shared UI, and templates would be a more suitable option. For example:</p> <ul> <li>Enter/exit animations using CSS or animation libraries</li> <li>Features that rely on <code>useEffect</code> (e.g logging page views) and <code>useState</code> (e.g a per-page feedback form)</li> <li>To change the default framework behavior. E.g. suspense boundaries inside Layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.</li> </ul> <p>For example, consider the design of a nested layout with a bordered container that should be wrapped around every sub-page.</p> <p>You could put the container inside the parent layout (<code>shop/layout.js</code>):</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">shop/layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Layout</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">className</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"container"</span><span style="color:var(--shiki-color-text)">>{children}</</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// shop/page.js</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Page</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>...</</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// shop/categories/layout.js</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">CategoryLayout</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>{children}</</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>But any enter/exit animations wouldn鈥檛 play when switching pages because the shared parent layout doesn鈥檛 re-render.</p> <p>You could put the container in every nested layout or page:</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">shop/layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Layout</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>{children}</</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// shop/page.js</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Page</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">className</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"container"</span><span style="color:var(--shiki-color-text)">>...</</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-comment)">// shop/categories/layout.js</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">CategoryLayout</span><span style="color:var(--shiki-color-text)">({ children }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">className</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"container"</span><span style="color:var(--shiki-color-text)">>{children}</</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>But then you鈥檇 have to manually put it in every nested layout or page which can be tedious and error-prone in more complex apps.</p> <p>With this convention, you can share templates across routes that create a new instance on navigation. This means DOM elements will be recreated, state will not be preserved, and effects will be re-synchronized.</p> <h2 id="advanced-routing-patterns" data-docs-heading=""><a href="#advanced-routing-patterns">Advanced Routing Patterns<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>We plan to introduce conventions to cover edge cases and allow you to implement more advanced routing patterns. Below are some examples we have been actively thinking about:</p> <h3 id="intercepting-routes" data-docs-heading=""><a href="#intercepting-routes">Intercepting Routes<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>Sometimes, it may be useful to intercept route segments from within other routes. On navigation, the URL will be updated as normal, but the intercepted segment will be shown within the current route鈥檚 layout.</p> <h4 id="example-1" data-docs-heading=""><a href="#example-1">Example<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h4> <p><strong>Before:</strong> Clicking the image leads to a new route with its own layout.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fintercepted-routes-before.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fintercepted-routes-before.png&w=3840&q=75"/></figure> <p><strong>After:</strong> By intercepting the route, clicking the image now loads the segment within the current route鈥檚 layout. E.g. as a modal.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fintercepted-routes-after.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fintercepted-routes-after.png&w=3840&q=75"/></figure> <p>To intercept the <code>/photo/[id]</code> route from within <code>/[username]</code> segment, create a duplicate <code>/photo/[id]</code> folder inside the <code>/[username]</code> folder, and prefix it with the <code>(..)</code> convention.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fintercepted-route.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fintercepted-route.png&w=3840&q=75"/></figure> <h4 id="convention-3" data-docs-heading=""><a href="#convention-3">Convention<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h4> <ul> <li><code>(..)</code> - will match the route segment one level higher (sibling of the parent directory). Similar to <code>../</code> in relative paths.</li> <li><code>(..)(..)</code> - will match the route segment two levels higher. Similar to <code>../../</code> in relative paths.</li> <li><code>(...)</code> - will match the route segment in the root directory.</li> </ul> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> Refreshing or sharing the page would load the route with its default layout.</p> </blockquote> <h3 id="dynamic-parallel-routes" data-docs-heading=""><a href="#dynamic-parallel-routes">Dynamic Parallel Routes<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h3> <p>Sometimes it may be useful to show two or more leaf segments (<code>page.js</code>) in the same view that can be navigated independently.</p> <p>Take for instance two or more tab groups within the same dashboard. Navigating one tab group should not affect the other. The combinations of tabs should also be correctly restored when navigating backwards and forwards.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fparallel-routes.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fparallel-routes.png&w=3840&q=75"/></figure> <h4 id="convention-4" data-docs-heading=""><a href="#convention-4">Convention<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h4> <p>By default, layouts accept a prop called聽<code>children</code>聽which will contain a nested layout or a page. You can rename the prop by creating a named "slot" (a folder that includes the <code>@</code> prefix) and nesting segments inside it.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fparallel-routes-children.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fparallel-routes-children.png&w=3840&q=75"/></figure> <p>After this change, the layout will receive a prop called聽<code>customProp</code>聽instead of聽<code>children</code>.</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">analytics/layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Layout</span><span style="color:var(--shiki-color-text)">({ customProp }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <>{customProp}</>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>You can create parallel routes by adding more than one named slot at the same level. In the example below, both聽<code>@views</code>聽and聽<code>@audience</code>聽are passed as props to the analytics layout.</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fparallel-routes-complete.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fparallel-routes-complete.png&w=3840&q=75"/></figure> <p>You can use the named slots to display leaf segments simultaneously.</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">analytics/layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Layout</span><span style="color:var(--shiki-color-text)">({ views</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> audience }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">ViewsNav</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {views}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">AudienceNav</span><span style="color:var(--shiki-color-text)"> /></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {audience}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </</span><span style="color:var(--shiki-token-string-expression)">div</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>When the user first navigates to聽<code>/analytics</code>, the聽<code>page.js</code>聽segment in each folder (<code>@views</code>聽and聽<code>@audience</code>) are shown.</p> <p>On navigation to聽<code>/analytics/subscribers</code>, only聽<code>@audience</code>聽is updated. Similarly, only聽<code>@views</code>聽are updated when navigating to聽<code>/analytics/impressions</code>.</p> <p>Navigating backwards and forwards will reinstate the correct combination of parallel routes.</p> <h2 id="combining-intercepting-and-parallel-routes" data-docs-heading=""><a href="#combining-intercepting-and-parallel-routes">Combining Intercepting and Parallel Routes<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>You can combine intercepting and parallel routes to achieve specific routing behaviors in your application.</p> <p><strong>Example</strong></p> <p>For example, when creating a modal, you often need to be aware of some common challenges, such as:</p> <ul> <li>Modals not being accessible through an URL.</li> <li>Modals closing when the page is refreshed.</li> <li>Backwards navigation going to the previous route rather than the route behind the modal.</li> <li>Forwards navigation not reopening the modal.</li> </ul> <p>You may want the modal to update the URL when it opens, and backwards/fowards navigation to open and close the modal. Additionally, when sharing the URL, you may want the page to load with the modal open and context behind it or you may want the page to load the content without the modal.</p> <p>A good example of this are photos on social media sites. Usually, photos are accessible within a modal from the user's feed or profile. But when sharing the photo, they shown directly on their own page.</p> <p>By using conventions, we can make the modal behavior map to routing behavior by default.</p> <p>Consider this folder structure:</p> <figure><img alt="" loading="lazy" width="3596" height="1880" decoding="async" data-nimg="1" class="rounded-md border border-gray-200 bg-gray-100" style="color:transparent" srcSet="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fintercepted-route-modal.png&w=3840&q=75 1x" src="/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fstatic%2Fblog%2Flayouts-rfc%2Fintercepted-route-modal.png&w=3840&q=75"/></figure> <p>With this pattern:</p> <ul> <li>The content of <code>/photo/[id]</code> is accessible through an URL within its own context. It's also accessible within a modal from within the <code>/[username]</code> route.</li> <li>Navigating backwards and forwards using client-side navigation should close and reopen the modal.</li> <li>Refreshing the page (server-side navigation) should take the user to the original <code>/photo/id</code> route instead of showing the modal.</li> </ul> <p>In <code>/@modal/(..)photo/[id]/page.js</code>, you can return the content of the page wrapped in a modal component.</p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">/@modal/(..)photo/[id]/page.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">PhotoPage</span><span style="color:var(--shiki-color-text)">() {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">router</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">useRouter</span><span style="color:var(--shiki-color-text)">();</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> (</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-constant)">Modal</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-comment)">// the modal should always be shown on page load</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">isOpen</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)">{</span><span style="color:var(--shiki-token-constant)">true</span><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-comment)">// closing the modal should take user back to the previous page</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">onClose</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)">{() </span><span style="color:var(--shiki-token-keyword)">=></span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">router</span><span style="color:var(--shiki-token-function)">.back</span><span style="color:var(--shiki-color-text)">()}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> ></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> {</span><span style="color:var(--shiki-token-comment)">/* Page Content */</span><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </</span><span style="color:var(--shiki-token-constant)">Modal</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> );</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <blockquote class="p-3 text-sm"> <p><strong>Note:</strong> This solution isn't the only way to create a modal in Next.js, but aims to show how you can combine conventions to achieve more complex routing behavior.</p> </blockquote> <h2 id="conditional-routes" data-docs-heading=""><a href="#conditional-routes">Conditional Routes<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>Sometimes, you may need dynamic information like data or context to determine what route to show. You can use parallel routes to conditionally load one route or another.</p> <p><strong>Example</strong></p> <div class="relative code-block_wrapper__t6FCO code-block_hasFileName__ezlBD not-prose" data-geist-code-block=""><div class="code-block_header__t3NRd"><div class="code-block_fileName__HmSv1"><div aria-hidden="true" class="code-block_iconWrapper__TuHFk"><svg height="17" style="margin-left:-1.5px" viewBox="0 0 50 50" width="17" xmlns="http://www.w3.org/2000/svg"><path d="M 43.335938 4 L 6.667969 4 C 5.195313 4 4 5.195313 4 6.667969 L 4 43.332031 C 4 44.804688 5.195313 46 6.667969 46 L 43.332031 46 C 44.804688 46 46 44.804688 46 43.335938 L 46 6.667969 C 46 5.195313 44.804688 4 43.335938 4 Z M 27 36.183594 C 27 40.179688 24.65625 42 21.234375 42 C 18.140625 42 15.910156 39.925781 15 38 L 18.144531 36.097656 C 18.75 37.171875 19.671875 38 21 38 C 22.269531 38 23 37.503906 23 35.574219 L 23 23 L 27 23 Z M 35.675781 42 C 32.132813 42 30.121094 40.214844 29 38 L 32 36 C 32.816406 37.335938 33.707031 38.613281 35.589844 38.613281 C 37.171875 38.613281 38 37.824219 38 36.730469 C 38 35.425781 37.140625 34.960938 35.402344 34.199219 L 34.449219 33.789063 C 31.695313 32.617188 29.863281 31.148438 29.863281 28.039063 C 29.863281 25.179688 32.046875 23 35.453125 23 C 37.878906 23 39.621094 23.84375 40.878906 26.054688 L 37.910156 27.964844 C 37.253906 26.789063 36.550781 26.328125 35.453125 26.328125 C 34.335938 26.328125 33.628906 27.039063 33.628906 27.964844 C 33.628906 29.109375 34.335938 29.570313 35.972656 30.28125 L 36.925781 30.691406 C 40.171875 32.078125 42 33.496094 42 36.683594 C 42 40.117188 39.300781 42 35.675781 42 Z" fill="currentColor"></path></svg></div><span class="code-block_filenameP__02nok">layout.js</span></div><div class="code-block_actions__yphRf"><button aria-label="Copy code" class="code-block_copyButton__uo5Yu" type="button"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 0.5C1.7835 0.5 1 1.2835 1 2.25V9.75C1 10.7165 1.7835 11.5 2.75 11.5H3.75H4.5V10H3.75H2.75C2.61193 10 2.5 9.88807 2.5 9.75V2.25C2.5 2.11193 2.61193 2 2.75 2H8.25C8.38807 2 8.5 2.11193 8.5 2.25V3H10V2.25C10 1.2835 9.2165 0.5 8.25 0.5H2.75ZM7.75 4.5C6.7835 4.5 6 5.2835 6 6.25V13.75C6 14.7165 6.7835 15.5 7.75 15.5H13.25C14.2165 15.5 15 14.7165 15 13.75V6.25C15 5.2835 14.2165 4.5 13.25 4.5H7.75ZM7.5 6.25C7.5 6.11193 7.61193 6 7.75 6H13.25C13.3881 6 13.5 6.11193 13.5 6.25V13.75C13.5 13.8881 13.3881 14 13.25 14H7.75C7.61193 14 7.5 13.8881 7.5 13.75V6.25Z" fill="currentColor"/></svg><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5607 3.99999L15.0303 4.53032L6.23744 13.3232C5.55403 14.0066 4.44599 14.0066 3.76257 13.3232L4.2929 12.7929L3.76257 13.3232L0.969676 10.5303L0.439346 9.99999L1.50001 8.93933L2.03034 9.46966L4.82323 12.2626C4.92086 12.3602 5.07915 12.3602 5.17678 12.2626L13.9697 3.46966L14.5 2.93933L15.5607 3.99999Z" fill="currentColor"/></svg></button></div></div><pre class="code-block_pre___OLfy"><code class="code-block_code__isn_V"><span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">async</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getServerSideProps</span><span style="color:var(--shiki-color-text)">({ params }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-color-text)"> { </span><span style="color:var(--shiki-token-constant)">accountType</span><span style="color:var(--shiki-color-text)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">await</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">fetchAccount</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-color-text)">.slug);</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> { props</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> { isUser</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> accountType </span><span style="color:var(--shiki-token-keyword)">===</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'user'</span><span style="color:var(--shiki-color-text)"> } };</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">default</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">UserOrTeamLayout</span><span style="color:var(--shiki-color-text)">({ isUser</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> user</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> team }) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> <>{isUser </span><span style="color:var(--shiki-token-keyword)">?</span><span style="color:var(--shiki-color-text)"> user </span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> team}</>;</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>In the example above, you can return either the <code>user</code> or <code>team</code> route depending on the slug. This allows you to conditionally load the data and match the sub-routes against one option or the other.</p> <h2 id="conclusion" data-docs-heading=""><a href="#conclusion">Conclusion<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <p>We're excited about the future of layouts, routing, and React 18 in Next.js. Implementation work has begun and we'll announce the features once they are available.</p> <p>Leave comments and <a href="https://github.com/vercel/next.js/discussions/37136" rel="noopener noreferrer" target="_blank">join the conversation on GitHub Discussions<span class="inline-flex"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z" fill="currentColor"/></svg></span></a>.</p></div></article><template id="B:0"></template></div></main><template id="B:1"></template><script src="/_next/static/chunks/webpack-a62fb32779bc1725.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1" async=""></script><div hidden id="S:1"><div class="jsx-4008339588 footer_root__6F7g2"><div class="geist-wrapper"><footer class="footer_footer__mqdak"><div class="footer_grid__yp2LW"><div class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:row;--stack-align:stretch;--stack-justify:space-between;--stack-padding:0px;--stack-gap:0px" data-logo="true"><a class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:column;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:0px" aria-label="Vercel logo" data-logo-link="" href="https://vercel.com/home?utm_source=next-site&utm_medium=footer&utm_campaign=next-website" rel="noopener noreferrer" target="_blank" title="Go to the Vercel website"><svg fill="none" height="20" viewBox="0 0 283 64"><path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="var(--geist-foreground)"></path></svg></a><div class="stack_stack__iZkUS stack footer_socialsDesktop__XZ__G" data-version="v1" style="--stack-flex:initial;--stack-direction:row;--stack-align:center;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:12px"><a aria-label="GitHub" href="https://github.com/vercel/next.js" rel="noopener" target="_blank"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:16px;height:16px;color:currentColor" viewBox="0 0 16 16" width="16"><g clip-path="url(#clip0_872_3147)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z" fill="currentColor"/> </g> <defs> <clipPath id="clip0_872_3147"> <rect width="16" height="16" fill="white"/> </clipPath> </defs></svg></a><hr/><a aria-label="Twitter" href="https://twitter.com/nextjs" rel="noopener" target="_blank"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:16px;height:16px;color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z" fill="currentColor" /></svg></a><hr/><a aria-label="Bluesky" href="https://bsky.app/profile/nextjs.org" rel="noopener" target="_blank"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:16px;height:16px;color:currentColor" viewBox="0 0 16 16" width="16"><path color="currentColor" fill="currentColor" d="M3.47 1.95A19 19 0 0 1 8 7.62c.73-1.5 2.7-4.3 4.53-5.67C13.86.95 16 .19 16 2.63c0 .5-.28 4.1-.44 4.7-.58 2.03-2.66 2.55-4.5 2.24 3.23.55 4.05 2.38 2.27 4.2-3.37 3.46-4.85-.87-5.23-1.98q-.1-.32-.1-.22 0-.1-.1.22c-.38 1.11-1.86 5.44-5.23 1.98-1.78-1.82-.96-3.65 2.28-4.2C3.1 9.89 1 9.37.45 7.32A48 48 0 0 1 0 2.63C0 .2 2.15.96 3.47 1.95" /></svg></a></div></div><div><h4>Resources</h4><a href="/docs">Docs</a><a data-zone="same" href="/support-policy">Support Policy</a><a data-zone="same" href="/learn">Learn</a><a data-zone="same" href="/showcase">Showcase</a><a data-zone="same" href="/blog">Blog</a><a data-zone="same" href="/team">Team</a><a href="https://vercel.com/analytics?utm_source=next-site&utm_medium=footer&utm_campaign=blog_layouts-rfc" rel="noopener" target="_blank">Analytics</a><a href="/conf" data-zone="nextjs-conf">Next.js Conf</a><a href="https://vercel.com/products/previews?utm_source=next-site&utm_medium=footer&utm_campaign=blog_layouts-rfc" rel="noopener" target="_blank">Previews</a></div><div><h4>More</h4><a href="https://vercel.com/templates/next.js/nextjs-commerce?utm_source=next-site&utm_medium=footer&utm_campaign=blog_layouts-rfc" rel="noopener" target="_blank">Next.js Commerce</a><a href="https://vercel.com/contact/sales?utm_source=next-site&utm_medium=footer&utm_campaign=blog_layouts-rfc" rel="noopener" target="_blank">Contact Sales</a><a href="https://community.vercel.com" rel="noopener noreferrer" target="_blank">Community</a><a href="https://github.com/vercel/next.js" rel="noopener noreferrer" target="_blank">GitHub</a><a href="https://github.com/vercel/next.js/releases" rel="noopener noreferrer" target="_blank">Releases</a><a data-zone="same" href="/telemetry">Telemetry</a><a data-zone="same" href="/governance">Governance</a></div><div><h4>About Vercel</h4><a href="https://vercel.com/solutions/nextjs?utm_source=next-site&utm_medium=footer&utm_campaign=blog_layouts-rfc" rel="noopener" target="_blank">Next.js + Vercel</a><a href="https://vercel.com/oss?utm_source=next-site&utm_medium=footer&utm_campaign=blog_layouts-rfc" rel="noopener" target="_blank">Open Source Software</a><a href="https://github.com/vercel" rel="noopener noreferrer" target="_blank">GitHub</a><a href="https://bsky.app/profile/vercel.com" rel="noopener noreferrer" target="_blank">Bluesky</a><a href="https://twitter.com/vercel" rel="noopener noreferrer" target="_blank">X</a></div><div><h4>Legal</h4><a href="https://vercel.com/legal/privacy-policy" rel="noopener" target="_blank">Privacy Policy</a><button id="fides-modal-link" type="button">Cookie Preferences</button></div><div class="footer_newsletter__GlFxe"><h4>Subscribe to our newsletter</h4><p>Stay updated on new releases and features, guides, and case studies.</p><template id="P:2"></template></div></div><div class="stack_stack__iZkUS stack footer_copyright__z9dsS" data-version="v1" style="--stack-flex:initial;--stack-direction:row;--stack-align:center;--stack-justify:space-between;--stack-padding:0px;--stack-gap:0px"><div class="stack_stack__iZkUS stack" data-version="v1" style="--stack-flex:initial;--stack-direction:column;--stack-align:stretch;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:16px"><p>漏 2025 Vercel, Inc.</p><div class="stack_stack__iZkUS stack footer_socials__VfDh3" data-version="v1" style="--stack-flex:initial;--stack-direction:row;--stack-align:center;--stack-justify:flex-start;--stack-padding:0px;--stack-gap:12px"><a aria-label="GitHub" href="https://github.com/vercel/next.js" rel="noopener" target="_blank"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:16px;height:16px;color:currentColor" viewBox="0 0 16 16" width="16"><g clip-path="url(#clip0_872_3147)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z" fill="currentColor"/> </g> <defs> <clipPath id="clip0_872_3147"> <rect width="16" height="16" fill="white"/> </clipPath> </defs></svg></a><hr/><a aria-label="Twitter" href="https://x.com/nextjs" rel="noopener" target="_blank"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:16px;height:16px;color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z" fill="currentColor" /></svg></a><hr/><a aria-label="Bluesky" href="https://bsky.app/profile/nextjs.org" rel="noopener" target="_blank"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:16px;height:16px;color:currentColor" viewBox="0 0 16 16" width="16"><path color="currentColor" fill="currentColor" d="M3.47 1.95A19 19 0 0 1 8 7.62c.73-1.5 2.7-4.3 4.53-5.67C13.86.95 16 .19 16 2.63c0 .5-.28 4.1-.44 4.7-.58 2.03-2.66 2.55-4.5 2.24 3.23.55 4.05 2.38 2.27 4.2-3.37 3.46-4.85-.87-5.23-1.98q-.1-.32-.1-.22 0-.1-.1.22c-.38 1.11-1.86 5.44-5.23 1.98-1.78-1.82-.96-3.65 2.28-4.2C3.1 9.89 1 9.37.45 7.32A48 48 0 0 1 0 2.63C0 .2 2.15.96 3.47 1.95" /></svg></a></div></div></div></footer></div></div></div><div hidden id="S:0"></div><script>$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};$RC("B:0","S:0")</script><div hidden id="S:2"><form data-input-wrapper="true" action="" encType="multipart/form-data" method="POST"><input type="hidden" name="$ACTION_REF_1"/><input type="hidden" name="$ACTION_1:0" value="{"id":"6000bed9c6efe2ec2409f0677779d0e2f38028fe7f","bound":"$@1"}"/><input type="hidden" name="$ACTION_1:1" value="[{"success":false,"error":""}]"/><input type="hidden" name="$ACTION_KEY" value="k3705644071"/><input aria-label="Enter your email" data-1p-ignore="true" placeholder="you@domain.com" required="" type="email" name="email"/><button type="submit">Subscribe</button></form></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RC("B:1","S:1")</script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[59805,[],\"\"]\n3:I[37865,[],\"\"]\n4:I[58224,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"BotRenderCheck\"]\n5:I[26132,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8"])</script><script>self.__next_f.push([1,"MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"Analytics\"]\n6:I[46210,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?"])</script><script>self.__next_f.push([1,"dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"PrefetchCrossZoneLinksProvider\"]\n7:I[43258,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"Header\"]\n8:I[45903,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbf"])</script><script>self.__next_f.push([1,"b.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"Provider\"]\n9:I[63423,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static"])</script><script>self.__next_f.push([1,"/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"UserProviderClient\"]\nb:I[51127,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9876\",\"static/chunks/9876-7eca81061e69b0cf.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1885\",\"static/chunks/1885-dae94b1aa6713a47.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3289\",\"static/chunks/3289-6a5b209092e40f07.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"975\",\"static/chunks/app/(next-site)/page-d1c17161104eb782.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"HydrateMeLater\"]\nc:I[29805,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/"])</script><script>self.__next_f.push([1,"4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"default\"]\ne:I[46210,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue"])</script><script>self.__next_f.push([1,"1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"Link\"]\nf:\"$Sreact.suspense\"\n10:I[39258,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"ExternalFooterLink\"]"])</script><script>self.__next_f.push([1,"\n11:I[78355,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"NewsletterForm\"]\n13:I[15543,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458"])</script><script>self.__next_f.push([1,"cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"ThemeSwitcher\"]\n14:I[30640,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"s"])</script><script>self.__next_f.push([1,"tatic/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"Cmdk\"]\n15:I[12401,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"TrackPageView\"]\n16:I[46210,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks"])</script><script>self.__next_f.push([1,"/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4800\",\"static/chunks/4800-89110c217f01bb88.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8045\",\"static/chunks/8045-2364f72458cd49a3.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1002\",\"static/chunks/1002-ab9db17988d575f9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9495\",\"static/chunks/9495-26727c9e9887b788.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4525\",\"static/chunks/4525-b35fc848cacd3274.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9644\",\"static/chunks/9644-4a39e4967a42d4f2.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"2283\",\"static/chunks/2283-4ec494c0458af4db.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"3867\",\"static/chunks/3867-36bb9946061cb10f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"1080\",\"static/chunks/app/(next-site)/layout-6215d1a4b5494bd9.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"PrefetchCrossZoneLinks\"]\n18:I[69219,[],\"MetadataBoundary\"]\n1a:I[69219,[],\"OutletBoundary\"]\n1d:I[6777,[],\"AsyncMetadataOutlet\"]\n1f:I[69219,[],\"ViewportBoundary\"]\n21:I[99684,[],\"\"]\n22:I[6777,[],\"AsyncMetadata\"]\n24:I[57168,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_"])</script><script>self.__next_f.push([1,"FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"519\",\"static/chunks/519-d7ae7fd1f6ac920e.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"6532\",\"static/chunks/app/(next-site)/blog/%5Bslug%5D/page-cb8cc67f5c96492d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"\"]\n25:I[52665,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"519\",\"static/chunks/519-d7ae7fd1f6ac920e.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"6532\",\"static/chunks/app/(next-site)/blog/%5Bslug%5D/page-cb8cc67f5c96492d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"Image\"]\n26:I[34729,[\"1654\",\"static/chunks/1654-55ecd0c806f5ae4c.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"7168\",\"static/chunks/7168-3f978b959123fbfb.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"9537\",\"static/chunks/9537-b53698e77538dfa8.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"8119\",\"static/chunks/8119-623b26999b7e5f15.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4772\",\"static/chunks/4772-5f647956117a7d3f.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"462\",\"static/chunks/462-84e5bd5c85107f0d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"53\",\"static/chunks/53-fbc2f5ea7b100b39.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"4212\",\"static/chunks/4212-ce3a23a930539b76.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"519\",\"static/chunks/519-d7ae7fd1f6ac920e.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"6532\",\"static/chunks/app/(next-site)/blog/%5Bslug%5D/page-cb8c"])</script><script>self.__next_f.push([1,"c67f5c96492d.js?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\"],\"CodeBlock\"]\n:HL[\"/_next/static/media/569ce4b8f30dc480-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/9b86c142f8048a63.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/5841d5fe2bea84d3.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/93d6a97e20faf20d.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/7b0dc059936e156c.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/de848c1722f89916.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/935a0b934d2099ee.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/905e2617510d2adb.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/ca88c4ca37434c71.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/024d05917fd5421b.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/3f075e35768c0271.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\n:HL[\"/_next/static/css/a0d401486824442c.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"style\"]\nd:T4cd,\u003cg clip-path=\"url(#clip0_872_3147)\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816"])</script><script>self.__next_f.push([1,"C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z\" fill=\"currentColor\"/\u003e\n \u003c/g\u003e\n \u003cdefs\u003e\n \u003cclipPath id=\"clip0_872_3147\"\u003e\n \u003crect width=\"16\" height=\"16\" fill=\"white\"/\u003e\n \u003c/clipPath\u003e\n \u003c/defs\u003e12:T4cd,\u003cg clip-path=\"url(#clip0_872_3147)\"\u003e\n \u003cpath fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z\" fill=\"currentColor\"/\u003e\n \u003c/g\u003e\n \u003cdefs\u003e\n \u003cclipPath id=\"clip0_872_3147\"\u003e\n \u003crect width=\"16\" height=\"16\" fill=\"white\"/\u003e\n \u003c/clipPath\u003e\n \u003c/defs\u003e"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"wntmgWyvk3XmFXDczD0Ro\",\"p\":\"\",\"c\":[\"\",\"blog\",\"layouts-rfc\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(next-site)\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"layouts-rfc\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true]}],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"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.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"(next-site)\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/9b86c142f8048a63.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/5841d5fe2bea84d3.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/93d6a97e20faf20d.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7b0dc059936e156c.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/de848c1722f89916.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/935a0b934d2099ee.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"6\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/905e2617510d2adb.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"7\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ca88c4ca37434c71.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"8\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/024d05917fd5421b.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"9\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3f075e35768c0271.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"className\":\"__variable_0d0188 __variable_4d318d\",\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\".uwu-flex { display: none; } .uwu .uwu-flex { display: flex; } .uwu .uwu-hidden { display: none; }\"}}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"try { if (['', 'true', '1'].includes(new URLSearchParams(document.location.search).get('uwu'))) { document.documentElement.classList.add('uwu'); console.log('Next.js uwu logo by SAWARATSUKI: https://github.com/SAWARATSUKI'); } } catch (e) {}\"}}]],[\"$\",\"$L4\",null,{}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L5\",null,{}],[\"$\",\"$L6\",null,{\"children\":[[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$L9\",null,{\"userPromise\":\"$@a\",\"children\":[[\"$\",\"main\",null,{\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:0:1:props:style\",\"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\":\"$0:f:0:1:1:props:children:1:props:notFound:0:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:0:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:0:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$Lb\",null,{\"children\":[\"$\",\"$Lc\",null,{\"className\":\"footer_root__6F7g2\",\"wide\":true,\"children\":[\"$\",\"div\",null,{\"className\":\"geist-wrapper\",\"children\":[\"$\",\"footer\",null,{\"className\":\"footer_footer__mqdak\",\"children\":[[\"$\",\"div\",null,{\"className\":\"footer_grid__yp2LW\",\"children\":[[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"row\",\"--stack-align\":\"stretch\",\"--stack-justify\":\"space-between\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"0px\"},\"data-logo\":true,\"children\":[[\"$\",\"a\",null,{\"className\":\"stack_stack__iZkUS stack\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"column\",\"--stack-align\":\"stretch\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"0px\"},\"aria-label\":\"Vercel logo\",\"data-logo-link\":\"\",\"href\":\"https://vercel.com/home?utm_source=next-site\u0026utm_medium=footer\u0026utm_campaign=next-website\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"title\":\"Go to the Vercel website\",\"children\":[\"$\",\"svg\",null,{\"fill\":\"none\",\"height\":\"20\",\"viewBox\":\"0 0 283 64\",\"children\":[\"$\",\"path\",null,{\"d\":\"M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z\",\"fill\":\"var(--geist-foreground)\"}]}]}],[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack footer_socialsDesktop__XZ__G\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"row\",\"--stack-align\":\"center\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"12px\"},\"children\":[[\"$\",\"a\",null,{\"aria-label\":\"GitHub\",\"href\":\"https://github.com/vercel/next.js\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"$d\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":16,\"height\":16,\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}],[\"$\",\"hr\",null,{}],[\"$\",\"a\",null,{\"aria-label\":\"Twitter\",\"href\":\"https://twitter.com/nextjs\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z\\\" fill=\\\"currentColor\\\" /\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":16,\"height\":16,\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}],[\"$\",\"hr\",null,{}],[\"$\",\"a\",null,{\"aria-label\":\"Bluesky\",\"href\":\"https://bsky.app/profile/nextjs.org\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath color=\\\"currentColor\\\" fill=\\\"currentColor\\\" d=\\\"M3.47 1.95A19 19 0 0 1 8 7.62c.73-1.5 2.7-4.3 4.53-5.67C13.86.95 16 .19 16 2.63c0 .5-.28 4.1-.44 4.7-.58 2.03-2.66 2.55-4.5 2.24 3.23.55 4.05 2.38 2.27 4.2-3.37 3.46-4.85-.87-5.23-1.98q-.1-.32-.1-.22 0-.1-.1.22c-.38 1.11-1.86 5.44-5.23 1.98-1.78-1.82-.96-3.65 2.28-4.2C3.1 9.89 1 9.37.45 7.32A48 48 0 0 1 0 2.63C0 .2 2.15.96 3.47 1.95\\\" /\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":16,\"height\":16,\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"children\":\"Resources\"}],[\"$\",\"a\",null,{\"href\":\"/docs\",\"children\":\"Docs\"}],[\"$\",\"$Le\",null,{\"href\":\"/support-policy\",\"prefetch\":false,\"children\":\"Support Policy\"}],[\"$\",\"$Le\",null,{\"href\":\"/learn\",\"prefetch\":false,\"children\":\"Learn\"}],[\"$\",\"$Le\",null,{\"href\":\"/showcase\",\"prefetch\":false,\"children\":\"Showcase\"}],[\"$\",\"$Le\",null,{\"href\":\"/blog\",\"prefetch\":false,\"children\":\"Blog\"}],[\"$\",\"$Le\",null,{\"href\":\"/team\",\"prefetch\":false,\"children\":\"Team\"}],[\"$\",\"$f\",null,{\"fallback\":null,\"children\":[\"$\",\"$L10\",null,{\"path\":\"/analytics\",\"children\":\"Analytics\"}]}],[\"$\",\"$Le\",null,{\"href\":\"/conf\",\"prefetch\":false,\"children\":\"Next.js Conf\"}],[\"$\",\"$f\",null,{\"fallback\":null,\"children\":[\"$\",\"$L10\",null,{\"path\":\"/products/previews\",\"children\":\"Previews\"}]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"children\":\"More\"}],[\"$\",\"$f\",null,{\"fallback\":null,\"children\":[\"$\",\"$L10\",null,{\"path\":\"/templates/next.js/nextjs-commerce\",\"children\":\"Next.js Commerce\"}]}],[\"$\",\"$f\",null,{\"fallback\":null,\"children\":[\"$\",\"$L10\",null,{\"path\":\"/contact/sales\",\"children\":\"Contact Sales\"}]}],[\"$\",\"a\",null,{\"href\":\"https://community.vercel.com\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":\"Community\"}],[\"$\",\"a\",null,{\"href\":\"https://github.com/vercel/next.js\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":\"GitHub\"}],[\"$\",\"a\",null,{\"href\":\"https://github.com/vercel/next.js/releases\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":\"Releases\"}],[\"$\",\"$Le\",null,{\"href\":\"/telemetry\",\"prefetch\":false,\"children\":\"Telemetry\"}],[\"$\",\"$Le\",null,{\"href\":\"/governance\",\"prefetch\":false,\"children\":\"Governance\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"children\":\"About Vercel\"}],[\"$\",\"$f\",null,{\"fallback\":null,\"children\":[\"$\",\"$L10\",null,{\"path\":\"/solutions/nextjs\",\"children\":\"Next.js + Vercel\"}]}],[\"$\",\"$f\",null,{\"fallback\":null,\"children\":[\"$\",\"$L10\",null,{\"path\":\"/oss\",\"children\":\"Open Source Software\"}]}],[\"$\",\"a\",null,{\"href\":\"https://github.com/vercel\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":\"GitHub\"}],[\"$\",\"a\",null,{\"href\":\"https://bsky.app/profile/vercel.com\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":\"Bluesky\"}],[\"$\",\"a\",null,{\"href\":\"https://twitter.com/vercel\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":\"X\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"children\":\"Legal\"}],[\"$\",\"a\",null,{\"href\":\"https://vercel.com/legal/privacy-policy\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":\"Privacy Policy\"}],[\"$\",\"button\",null,{\"id\":\"fides-modal-link\",\"type\":\"button\",\"children\":\"Cookie Preferences\"}]]}],[\"$\",\"$L11\",null,{}]]}],[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack footer_copyright__z9dsS\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"row\",\"--stack-align\":\"center\",\"--stack-justify\":\"space-between\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"0px\"},\"children\":[[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"column\",\"--stack-align\":\"stretch\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"16px\"},\"children\":[[\"$\",\"p\",null,{\"children\":[\"漏 \",\"2025\",\" Vercel, Inc.\"]}],[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack footer_socials__VfDh3\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"row\",\"--stack-align\":\"center\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"12px\"},\"children\":[[\"$\",\"a\",null,{\"aria-label\":\"GitHub\",\"href\":\"https://github.com/vercel/next.js\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"$12\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":16,\"height\":16,\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}],[\"$\",\"hr\",null,{}],[\"$\",\"a\",null,{\"aria-label\":\"Twitter\",\"href\":\"https://x.com/nextjs\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z\\\" fill=\\\"currentColor\\\" /\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":16,\"height\":16,\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}],[\"$\",\"hr\",null,{}],[\"$\",\"a\",null,{\"aria-label\":\"Bluesky\",\"href\":\"https://bsky.app/profile/nextjs.org\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath color=\\\"currentColor\\\" fill=\\\"currentColor\\\" d=\\\"M3.47 1.95A19 19 0 0 1 8 7.62c.73-1.5 2.7-4.3 4.53-5.67C13.86.95 16 .19 16 2.63c0 .5-.28 4.1-.44 4.7-.58 2.03-2.66 2.55-4.5 2.24 3.23.55 4.05 2.38 2.27 4.2-3.37 3.46-4.85-.87-5.23-1.98q-.1-.32-.1-.22 0-.1-.1.22c-.38 1.11-1.86 5.44-5.23 1.98-1.78-1.82-.96-3.65 2.28-4.2C3.1 9.89 1 9.37.45 7.32A48 48 0 0 1 0 2.63C0 .2 2.15.96 3.47 1.95\\\" /\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":16,\"height\":16,\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}]]}],[\"$\",\"$f\",null,{\"fallback\":null,\"children\":[\"$\",\"$L13\",null,{}]}]]}]]}]}]}]}],[\"$\",\"$Lb\",null,{\"children\":[\"$\",\"$L14\",null,{}]}],[\"$\",\"$Lb\",null,{\"children\":[\"$\",\"$L15\",null,{}]}]]}]}]]}],[\"$\",\"$L16\",null,{}],null]}]]}]]}],{\"children\":[\"blog\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"div\",null,{\"className\":\"relative mx-auto max-w-screen-xl gap-x-6 px-4 py-10 md:flex md:flex-row md:py-10\",\"children\":[[\"$\",\"div\",null,{\"id\":\"geist-skip-nav\",\"ref\":\"$undefined\",\"style\":{\"gridRow\":\"1 / 1\"},\"tabIndex\":-1}],[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}],{\"children\":[[\"slug\",\"layouts-rfc\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L17\",[\"$\",\"$L18\",null,{\"children\":\"$L19\"}],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a0d401486824442c.css?dpl=dpl_FDMoXFjTNxLLNk8MiJgv33Qm8Ue1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$L1a\",null,{\"children\":[\"$L1b\",\"$L1c\",[\"$\",\"$L1d\",null,{\"promise\":\"$@1e\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"wDl1Ey_vOH7VyQtIrszDh\",{\"children\":[[\"$\",\"$L1f\",null,{\"children\":\"$L20\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$21\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"$f\",null,{\"fallback\":null,\"children\":[\"$\",\"$L22\",null,{\"promise\":\"$@23\"}]}]\n"])</script><script>self.__next_f.push([1,"17:[\"$\",\"article\",null,{\"className\":\"detail_root__DU4wZ pb-20\",\"children\":[[\"$\",\"$L24\",null,{\"className\":\"detail_back__6w4Dy\",\"href\":\"/blog\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"text-current\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.46966 13.7803L6.99999 14.3107L8.06065 13.25L7.53032 12.7197L3.56065 8.75001H14.25H15V7.25001H14.25H3.56065L7.53032 3.28034L8.06065 2.75001L6.99999 1.68935L6.46966 2.21968L1.39644 7.2929C1.00592 7.68342 1.00592 8.31659 1.39644 8.70711L6.46966 13.7803Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}],\"Back to Blog\"]}],[\"$\",\"p\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-900)\",\"--text-size\":\"0.875rem\",\"--text-line-height\":\"1rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":\"400\"},\"children\":\"Monday, May 23rd 2022\"}],[\"$\",\"h1\",null,{\"className\":\"text_wrapper__i87JK font-semibold\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"3rem\",\"--text-line-height\":\"3.5rem\",\"--text-letter-spacing\":\"-0.066875rem\",\"--text-weight\":\"700\"},\"children\":\"Layouts RFC\"}],[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-900)\",\"--text-size\":\"0.875rem\",\"--text-line-height\":\"1.25rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":\"400\"},\"children\":\"Posted by\"}],[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack detail_authors__59UPR mb-8 mt-3 pb-4\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"row\",\"--stack-align\":\"stretch\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"16px\"},\"children\":[[\"$\",\"a\",\"authors/delba-oliveira.md\",{\"className\":\"detail_author__AvoLc\",\"href\":\"https://twitter.com/delba_oliveira\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"$L25\",null,{\"alt\":\"Delba de Oliveira\",\"className\":\"rounded-full\",\"height\":32,\"src\":\"/static/team/delba.jpg\",\"width\":32}],[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"column\",\"--stack-align\":\"stretch\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"0px\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"0.875rem\",\"--text-line-height\":\"1.25rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":500},\"children\":\"Delba de Oliveira\"}],[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-900)\",\"--text-size\":\"0.75rem\",\"--text-line-height\":\"1rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":\"400\"},\"children\":[\"@\",\"delba_oliveira\"]}]]}]]}],[\"$\",\"a\",\"authors/lee-robinson.md\",{\"className\":\"detail_author__AvoLc\",\"href\":\"https://twitter.com/leerob\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"$L25\",null,{\"alt\":\"Lee Robinson\",\"className\":\"rounded-full\",\"height\":32,\"src\":\"/static/team/lee.jpg\",\"width\":32}],[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"column\",\"--stack-align\":\"stretch\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"0px\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"0.875rem\",\"--text-line-height\":\"1.25rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":500},\"children\":\"Lee Robinson\"}],[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-900)\",\"--text-size\":\"0.75rem\",\"--text-line-height\":\"1rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":\"400\"},\"children\":[\"@\",\"leerob\"]}]]}]]}],[\"$\",\"a\",\"authors/sebastian-markbage.md\",{\"className\":\"detail_author__AvoLc\",\"href\":\"https://twitter.com/sebmarkbage\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"$L25\",null,{\"alt\":\"Sebastian Markb氓ge\",\"className\":\"rounded-full\",\"height\":32,\"src\":\"/static/team/seb.jpg\",\"width\":32}],[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"column\",\"--stack-align\":\"stretch\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"0px\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"0.875rem\",\"--text-line-height\":\"1.25rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":500},\"children\":\"Sebastian Markb氓ge\"}],[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-900)\",\"--text-size\":\"0.75rem\",\"--text-line-height\":\"1rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":\"400\"},\"children\":[\"@\",\"sebmarkbage\"]}]]}]]}],[\"$\",\"a\",\"authors/tim-neutkens.md\",{\"className\":\"detail_author__AvoLc\",\"href\":\"https://twitter.com/timneutkens\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"$L25\",null,{\"alt\":\"Tim Neutkens\",\"className\":\"rounded-full\",\"height\":32,\"src\":\"/static/team/tim.jpg\",\"width\":32}],[\"$\",\"div\",null,{\"className\":\"stack_stack__iZkUS stack\",\"data-testid\":\"$undefined\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--stack-flex\":\"initial\",\"--stack-direction\":\"column\",\"--stack-align\":\"stretch\",\"--stack-justify\":\"flex-start\",\"--stack-padding\":\"0px\",\"--stack-gap\":\"0px\"},\"children\":[[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"0.875rem\",\"--text-line-height\":\"1.25rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":500},\"children\":\"Tim Neutkens\"}],[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-900)\",\"--text-size\":\"0.75rem\",\"--text-line-height\":\"1rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":\"400\"},\"children\":[\"@\",\"timneutkens\"]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"prose prose-vercel max-w-none\",\"children\":[[\"$\",\"p\",null,{\"children\":\"This RFC (Request for Comment) outlines the biggest update to Next.js since it was introduced in 2016:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Nested Layouts:\"}],\" Build complex applications with nested routes.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Designed for Server Components:\"}],\" Optimized for subtree navigation.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Improved Data Fetching:\"}],\" Fetch in layouts while avoiding waterfalls.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Using React 18 Features:\"}],\" Streaming, Transitions, and Suspense.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Client and Server Routing:\"}],\" Server-centric routing with \",[\"$\",\"em\",null,{\"children\":\"SPA-like\"}],\" behavior.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"100% incrementally adoptable\"}],\": No breaking changes so you can adopt gradually.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Advanced Routing Patterns\"}],\": Parallel routes, intercepting routes, and more.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"The new Next.js router will be built on top of the \",[\"$\",\"a\",null,{\"href\":\"https://reactjs.org/blog/2022/03/29/react-v18.html\",\"rel\":\"noopener noreferrer nofollow\",\"target\":\"_blank\",\"children\":[\"recently released React 18\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\" features. We plan to introduce defaults and conventions that allow you to easily adopt these new features and take advantage of the benefits they unlock.\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Work on this RFC is ongoing and we'll announce when the new features are available. To provide feedback, join the conversation on \",[\"$\",\"a\",null,{\"href\":\"https://github.com/vercel/next.js/discussions/37136\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"Github Discussions\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\".\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"table-of-contents\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#table-of-contents\",\"children\":[\"Table of Contents\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#motivation\",\"children\":\"Motivation\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"Terminology\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#how-routing-currently-works\",\"children\":\"How Routing Currently Works\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#introducing-the-app-router\",\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" Directory\"]}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#defining-routes\",\"children\":\"Defining Routes\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#layouts\",\"children\":\"Layouts\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#pages\",\"children\":\"Pages\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#react-server-components\",\"children\":\"React Server Components\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#data-fetching\",\"children\":\"Data Fetching\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#route-groups\",\"children\":\"Route Groups (New)\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#server-centric-routing\",\"children\":\"Server Centric Routing (New)\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#instant-loading-states\",\"children\":\"Instant Loading States (New)\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#error-handling\",\"children\":\"Error Handling (New)\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#templates\",\"children\":\"Templates (New)\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#advanced-routing-patterns\",\"children\":\"Advanced Routing Patterns (New)\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#conclusion\",\"children\":\"Conclusion\"}]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"motivation\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#motivation\",\"children\":[\"Motivation\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"We've been gathering community feedback from GitHub, Discord, Reddit, and our developer survey about the current limitations of routing in Next.js. We've found that:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":\"The developer experience of creating layouts can be improved. It should be easy to create layouts that can be nested, shared across routes, and have their state preserved on navigation.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Many Next.js applications are dashboards or consoles, which would benefit from more advanced routing solutions.\"}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"While the current routing system has worked well since the beginning of Next.js, we want to make it easier for developers to build more performant and feature-rich web applications.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"As framework maintainers, we also want to build a routing system that is backwards compatible and aligns with the future of React.\"}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\" Some routing conventions were inspired by the Relay-based router at Meta, where some features of Server Components were originally developed, as well as client-side routers like React Router and Ember.js. The \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\" file convention was inspired by the work done in SvelteKit. We'd also like to thank \",[\"$\",\"a\",null,{\"href\":\"https://twitter.com/cassidoo\",\"rel\":\"noopener noreferrer nofollow\",\"target\":\"_blank\",\"children\":[\"Cassidy\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\" for opening \",[\"$\",\"a\",null,{\"href\":\"https://github.com/vercel/next.js/discussions/26389\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"an earlier RFC on layouts\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\".\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"terminology\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":[\"Terminology\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"This RFC introduces new routing conventions and syntax. The terminology is based on React and standard web platform terms. Throughout the RFC, you'll see these terms linked back to their definitions below.\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Tree:\"}],\" A convention for visualizing a hierarchical structure. For example, a component\\ntree with parent and children components, a folder structure, etc.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Subtree\"}],\" Part of the tree, starting at the root (first) and ending at the leaves (last).\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":1798,\"height\":615,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/terminology.png\"}],null]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"URL Path:\"}],\" Part of the URL that comes after the domain.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"URL Segment:\"}],\" Part of the URL path delimited by slashes.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":1798,\"height\":407,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/url-anatomy.png\"}],null]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"how-routing-currently-works\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#how-routing-currently-works\",\"children\":[\"How Routing Currently Works\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Today, Next.js uses the file system to map individual folders and files in the \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/routing/pages-and-layouts\",\"children\":\"Pages\"}],\" directory to routes accessible through URLs. Each \",[\"$\",\"strong\",null,{\"children\":\"page\"}],\" file exports a React Component and has an associated \",[\"$\",\"strong\",null,{\"children\":\"route\"}],\" based on its file name. For example:\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":1798,\"height\":605,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/routing-today.png\"}],null]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Dynamic Routes:\"}],\" Next.js supports \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/routing/dynamic-routes\",\"children\":\"Dynamic Routes\"}],\" (including catch all variations) with the \",[\"$\",\"code\",null,{\"children\":\"[param].js\"}],\", \",[\"$\",\"code\",null,{\"children\":\"[...param].js\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"[[...param]].js\"}],\" conventions.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Layouts:\"}],\" Next.js offers support for simple \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern\",\"children\":\"component-based\"}],\" layouts, per-page layouts using a component \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#per-page-layouts\",\"children\":\"property pattern\"}],\", and a single global layout using a \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern#single-shared-layout-with-custom-app\",\"children\":\"custom app\"}],\".\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Data Fetching:\"}],\" Next.js provides data fetching methods (\",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/data-fetching/get-static-props\",\"children\":[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}]}],\", \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/data-fetching/get-server-side-props\",\"children\":[\"$\",\"code\",null,{\"children\":\"getServerSideProps\"}]}],\") which can be used at the page (route) level. These methods are used to determine if a page should be Statically Generated (\",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/data-fetching/get-static-props\",\"children\":[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}]}],\") or Server-Side Rendered (\",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/data-fetching/get-server-side-props\",\"children\":[\"$\",\"code\",null,{\"children\":\"getServerSideProps\"}]}],\"). In addition, you can use \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/data-fetching/incremental-static-regeneration\",\"children\":\"Incremental Static Regeneration (ISR)\"}],\" to create or update static pages after a site is built.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Rendering:\"}],\" Next.js provides three rendering options: \",[\"$\",\"a\",null,{\"href\":\"https://nextjs.org/learn/foundations/how-nextjs-works/rendering\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"Static Generation\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\", \",[\"$\",\"a\",null,{\"href\":\"https://nextjs.org/learn/foundations/how-nextjs-works/rendering\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"Server-Side Rendering\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\", and \",[\"$\",\"a\",null,{\"href\":\"https://nextjs.org/learn/foundations/how-nextjs-works/rendering\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"Client-Side Rendering\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\". By default, pages are statically generated unless they have a blocking data fetching requirement (\",[\"$\",\"code\",null,{\"children\":\"getServerSideProps\"}],\").\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"introducing-the-app-directory\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#introducing-the-app-directory\",\"children\":[\"Introducing the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" Directory\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"To ensure these new improvements can be incrementally adopted and avoid breaking changes, we are proposing a new directory called \",[\"$\",\"code\",null,{\"children\":\"app\"}],\".\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1534,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/app-folder.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" directory will work alongside the \",[\"$\",\"code\",null,{\"children\":\"pages\"}],\" directory. You can incrementally move parts of your application to the new \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" directory to take advantage of the new features. For backwards compatibility, the behavior of the \",[\"$\",\"code\",null,{\"children\":\"pages\"}],\" directory will remain the same and continue to be supported.\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"defining-routes\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#defining-routes\",\"children\":[\"Defining Routes\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You can use the \",[\"$\",\"strong\",null,{\"children\":\"folder\"}],\" hierarchy inside \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" to define routes. A \",[\"$\",\"strong\",null,{\"children\":\"route\"}],\" is a single path of nested folders, following the hierarchy from the \",[\"$\",\"strong\",null,{\"children\":\"root folder\"}],\" down to a final \",[\"$\",\"strong\",null,{\"children\":\"leaf folder.\"}]]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1280,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/routes.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, you can add a new \",[\"$\",\"code\",null,{\"children\":\"/dashboard/settings\"}],\" route by nesting two new folders in the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" directory.\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Note:\"}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"With this system, you'll use folders to define routes, and files to define UI (with new file conventions such as \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\", \",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\", and in the second part of the RFC \",[\"$\",\"code\",null,{\"children\":\"loading.js\"}],\").\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"This allows you to colocate your own project files (UI components, test files, stories, etc) inside the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" directory. Currently this is only possible with the \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/api-reference/next-config-js/pageExtensions#including-non-page-files-in-the-pages-directory\",\"children\":\"pageExtensions config\"}],\".\"]}],\"\\n\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"route-segments\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#route-segments\",\"children\":[\"Route Segments\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Each folder in the \",[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"subtree\"}],\" represents a \",[\"$\",\"strong\",null,{\"children\":\"route segment\"}],\". Each route segment is mapped to a corresponding \",[\"$\",\"strong\",null,{\"children\":\"segment\"}],\" in a \",[\"$\",\"strong\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"URL path\"}]}],\".\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1512,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/route-segments.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, the \",[\"$\",\"code\",null,{\"children\":\"/dashboard/settings\"}],\" route is composed of 3 segments:\"]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"/\"}],\" root segment\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"dashboard\"}],\" segment\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"settings\"}],\" segment\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note\"}],\": The name \",[\"$\",\"strong\",null,{\"children\":\"route segment\"}],\" was chosen to match the existing terminology around \",[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"URL paths\"}],\".\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"layouts\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#layouts\",\"children\":[\"Layouts\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"New file convention:\"}],\" \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"So far, we have used folders to define the routes of our application. But empty folders do not do anything by themselves. Let's discuss how you can define the UI that will render for these routes using new file conventions.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"A \",[\"$\",\"strong\",null,{\"children\":\"layout\"}],\" is UI that is shared between route segments in a \",[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"subtree\"}],\". Layouts do not affect \",[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"URL paths\"}],\" and do not re-render (React state is preserved) when a user navigates between sibling segments.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"A layout can be defined by default exporting a React component from a \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\" file. The component should accept a \",[\"$\",\"code\",null,{\"children\":\"children\"}],\" prop which will be populated with the segments the layout is wrapping.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"There are 2 types of layouts:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Root layout:\"}],\" Applies to all routes\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Regular layout:\"}],\" Applies to specific routes\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You can nest two or more layouts together to form \",[\"$\",\"strong\",null,{\"children\":\"nested layouts\"}],\".\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"root-layout\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#root-layout\",\"children\":[\"Root Layout\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You can create a root layout that will apply to all routes of your application by adding a \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\" file inside the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" folder.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1210,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/root-layout.png\"}],null]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Note:\"}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"The root layout replaces the need for a \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/routing/custom-app\",\"children\":[\"custom App (\",[\"$\",\"code\",null,{\"children\":\"_app.js\"}],\")\"]}],\" and \",[\"$\",\"$L24\",null,{\"href\":\"/docs/pages/building-your-application/routing/custom-document\",\"children\":[\"custom Document (\",[\"$\",\"code\",null,{\"children\":\"_document.js\"}],\")\"]}],\" since it applies to all routes.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"You'll be able to use the root layout to customize the initial document shell (e.g. \",[\"$\",\"code\",null,{\"children\":\"\u003chtml\u003e\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"\u003cbody\u003e\"}],\" tags).\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"You'll be able to fetch data inside the root layout (and other layouts).\"}],\"\\n\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"regular-layouts\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#regular-layouts\",\"children\":[\"Regular Layouts\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You can also create a layout that only applies to a part of your application by adding a \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\" file inside a specific folder.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1696,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/regular-layouts.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, you can create a \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\" file inside the \",[\"$\",\"code\",null,{\"children\":\"dashboard\"}],\" folder which will only apply to the route segments inside \",[\"$\",\"code\",null,{\"children\":\"dashboard\"}],\".\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"nesting-layouts\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#nesting-layouts\",\"children\":[\"Nesting Layouts\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Layouts are \",[\"$\",\"strong\",null,{\"children\":\"nested\"}],\" by default.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1696,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/nested-layouts.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, if we were to combine the two layouts above. The root layout (\",[\"$\",\"code\",null,{\"children\":\"app/layout.js\"}],\") would be applied to the \",[\"$\",\"code\",null,{\"children\":\"dashboard\"}],\" layout, which would also apply to all route segments inside \",[\"$\",\"code\",null,{\"children\":\"dashboard/*\"}],\".\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1668,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/nested-layouts-example.png\"}],null]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"pages\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#pages\",\"children\":[\"Pages\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"New file convention:\"}],\" \",[\"$\",\"code\",null,{\"children\":\"page.js\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"A page is UI that is unique to a route segment. You can create a page by adding a \",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\" file inside a folder.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1696,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, to create pages for the \",[\"$\",\"code\",null,{\"children\":\"/dashboard/*\"}],\" routes, you can add a \",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\" file inside each folder. When a user visits \",[\"$\",\"code\",null,{\"children\":\"/dashboard/settings\"}],\", Next.js will render the \",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\" file for the \",[\"$\",\"code\",null,{\"children\":\"settings\"}],\" folder wrapped in any layouts that exist further up the \",[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"subtree\"}],\".\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1668,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page-example.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You can create a \",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\" file directly inside the dashboard folder to match the \",[\"$\",\"code\",null,{\"children\":\"/dashboard\"}],\" route. The dashboard layout will also apply to this page:\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1858,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/page-nested.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"This route is composed of 2 segments:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"/\"}],\" root segment\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"dashboard\"}],\" segment\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Note:\"}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":\"For a route to be valid, it needs to have a page in its leaf segment. If it doesn't, the route will throw an error.\"}],\"\\n\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"layout-and-page-behavior\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#layout-and-page-behavior\",\"children\":[\"Layout and Page Behavior\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"The file extensions \",[\"$\",\"code\",null,{\"children\":\"js|jsx|ts|tsx\"}],\" can be used for Pages and Layouts.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Page Components are the default export of \",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\".\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Layout Components are the default export of \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\".\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Layout Components \",[\"$\",\"strong\",null,{\"children\":\"must\"}],\" accept a \",[\"$\",\"code\",null,{\"children\":\"children\"}],\" prop.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"When a layout component is rendered, the \",[\"$\",\"code\",null,{\"children\":\"children\"}],\" prop will be populated with a child layout (if it exists further down the \",[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"subtree\"}],\") or a page.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"It may be easier to visualize it as a layout \",[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"tree\"}],\" where the parent layout will pick the nearest child layout until it reaches a page.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Example:\"}]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1372,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/basic-example.png\"}],null]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"app/layout.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Root layout\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// - Applies to all routes\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"RootLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"html\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"body\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Header\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {children}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Footer\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"body\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"html\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"app/dashboard/layout.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Regular layout\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// - Applies to route segments in app/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"className\":\"highlighted-word\",\"children\":\"dashboard\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"/*\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"DashboardLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"DashboardSidebar\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {children}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"app/dashboard/analytics/page.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Page Component\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// - The UI for the `app/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"className\":\"highlighted-word\",\"children\":\"dashboard\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"/analytics` segment\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// - Matches the `acme.com/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"className\":\"highlighted-word\",\"children\":\"dashboard\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"/analytics` URL path\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"AnalyticsPage\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"main\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e...\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"main\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"The above combination of layouts and pages would render the following component hierarchy:\"}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"Component hierarchy\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"RootLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Header\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"DashboardLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"DashboardSidebar\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"AnalyticsPage\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"main\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e...\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"main\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"AnalyticsPage\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"DashboardLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Footer\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"RootLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}]]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"react-server-components\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#react-server-components\",\"children\":[\"React Server Components\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\"聽React introduced new component types: Server, Client (traditional React components), and Shared. To learn more about these new types, we recommend reading the React \",[\"$\",\"a\",null,{\"href\":\"https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html\",\"rel\":\"noopener noreferrer nofollow\",\"target\":\"_blank\",\"children\":[\"Server Components RFC\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\".\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"With this RFC, you can start using React features and incrementally adopt React Server Components into your Next.js application.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"The internals of the new routing system will also leverage recently released React features such as Streaming, Suspense, and Transitions. These are the building blocks for React Server Components.\"}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"server-components-as-the-default\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#server-components-as-the-default\",\"children\":[\"Server Components as the Default\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"One of the biggest changes between the \",[\"$\",\"code\",null,{\"children\":\"pages\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" directories is that, by default, \",[\"$\",\"strong\",null,{\"children\":[\"files inside \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" will be rendered on the server as React Server Components.\"]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This will allow you to automatically adopt React Server Components when migrating from \",[\"$\",\"code\",null,{\"children\":\"pages\"}],\" to \",[\"$\",\"code\",null,{\"children\":\"app\"}],\".\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\"\\nServer components can be used in the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" folder or your own folders, but cannot be used in the \",[\"$\",\"code\",null,{\"children\":\"pages\"}],\" directory for backwards compatibility.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"client-and-server-components-convention\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#client-and-server-components-convention\",\"children\":[\"Client and Server Components Convention\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" folder will support server, client, and shared components, and you'll be able to \",[\"$\",\"a\",null,{\"href\":\"#interleaving-client-and-server-components-in-a-route\",\"children\":\"interleave these components in a tree\"}],\".\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1230,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/server-components.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"There is an \",[\"$\",\"a\",null,{\"href\":\"https://github.com/reactjs/rfcs/pull/189#issuecomment-1116482278\",\"rel\":\"noopener noreferrer nofollow\",\"target\":\"_blank\",\"children\":[\"ongoing discussion\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\" on what exactly the convention will be for defining Client Components and Server Components. We will follow the resolution of this discussion.\"]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"For now, Server components can be defined by appending \",[\"$\",\"code\",null,{\"children\":\".server.js\"}],\" to the filename. E.g. \",[\"$\",\"code\",null,{\"children\":\"layout.server.js\"}]]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Client components can be defined by appending the \",[\"$\",\"code\",null,{\"children\":\".client.js\"}],\" to the filename. E.g. \",[\"$\",\"code\",null,{\"children\":\"page.client.js\"}],\".\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\".js\"}],\" files are considered shared components. Since they could be rendered on the Server and the Client, they need to respect the constraints of each context.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Note:\"}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Client and Server components have聽\",[\"$\",\"a\",null,{\"href\":\"https://github.com/josephsavona/rfcs/blob/server-components/text/0000-server-components.md#capabilities--constraints-of-server-and-client-components\",\"rel\":\"noopener noreferrer nofollow\",\"target\":\"_blank\",\"children\":[\"constraints\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\" that need to be respected. When deciding to use a client or server component, we recommend using server components (default) until you need to use a client component.\"]}],\"\\n\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"hooks\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#hooks\",\"children\":[\"Hooks\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"We'll be adding Client and Server component hooks that鈥檒l allow you to access the headers object, cookies, pathnames, search params, etc. In the future, we'll have documentation with more information.\"}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"rendering-environments\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#rendering-environments\",\"children\":[\"Rendering Environments\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"You'll have granular control of what components will be in the client-side JavaScript bundle using the Client and Server Components convention.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"By default, routes in \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" will use Static Generation, and will switch to dynamic rendering when a route segment uses \",[\"$\",\"a\",null,{\"href\":\"#hooks\",\"children\":\"server-side hooks\"}],\" that require request context.\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"interleaving-client-and-server-components-in-a-route\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#interleaving-client-and-server-components-in-a-route\",\"children\":[\"Interleaving Client and Server Components in a Route\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"In React, there's a restriction around importing Server Components inside Client Components because Server Components might have server-only code (e.g. database or filesystem utilities).\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example, importing the Server Component would not work:\"}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"ClientComponent.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" ServerComponent \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'./ServerComponent.js'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"ClientComponent\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"ServerComponent\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"However, a Server Component can be passed as a child of a Client Component. You can do this by \",[\"$\",\"strong\",null,{\"children\":\"wrapping\"}],\" them in another Server Component. For example:\"]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"ClientComponent.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"ClientComponent\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003eClient Component\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {children}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// ServerComponent.js\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"ServerComponent\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003eServer Component\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// page.js\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// It's possible to import Client and Server components inside Server Components\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// because this component is rendered on the server\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" ClientComponent \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"./ClientComponent.js\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" ServerComponent \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"from\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"./ServerComponent.js\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\";\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"ServerComponentPage\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"ClientComponent\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"ServerComponent\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"ClientComponent\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"With this pattern, React will know it needs to render \",[\"$\",\"code\",null,{\"children\":\"ServerComponent\"}],\" on the server before sending the result (which doesn't contain any server-only code) to the client. From the Client Component's perspective, its child will be already rendered.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"In layouts, this pattern is applied with the \",[\"$\",\"code\",null,{\"children\":\"children\"}],\" prop so you don't have to create an additional wrapper component.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, the \",[\"$\",\"code\",null,{\"children\":\"ClientLayout\"}],\" component will accept the \",[\"$\",\"code\",null,{\"children\":\"ServerPage\"}],\" component as its child:\"]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"app/dashboard/layout.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// The Dashboard Layout is a Client Component\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"ClientLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Can use useState / useEffect here\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003eLayout\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {children}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// The Page is a Server Component that will be passed to Dashboard Layout\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// app/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"className\":\"highlighted-word\",\"children\":\"dashboard\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"/settings/page.js\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"ServerPage\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003ePage\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\" This style of composition is an important pattern for rendering Server Components inside Client Components. It sets the precedence of one pattern to learn, and is one of the reasons why we've decided to use the \",[\"$\",\"code\",null,{\"children\":\"children\"}],\" prop.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"data-fetching\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#data-fetching\",\"children\":[\"Data fetching\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"It will be possible to fetch data inside multiple segments in a route. This is different from the \",[\"$\",\"code\",null,{\"children\":\"pages\"}],\" directory, where data fetching was limited to the page-level.\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"data-fetching-in-layouts\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#data-fetching-in-layouts\",\"children\":[\"Data fetching in Layouts\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You can fetch data in a \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\" file by using the Next.js data fetching methods \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"getServerSideProps\"}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, a blog layout could use \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\" to fetch categories from a CMS, which can be used to populate a sidebar component:\"]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"app/blog/layout.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"async\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getStaticProps\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"categories\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"await\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getCategoriesFromCMS\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"();\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" props\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { categories }\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" };\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"BlogLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ categories\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"BlogSidebar\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"categories\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"{categories} /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {children}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"multiple-data-fetching-methods-in-a-route\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#multiple-data-fetching-methods-in-a-route\",\"children\":[\"Multiple data fetching methods in a route\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You can also fetch data in multiple segments of a route. For example, a \",[\"$\",\"code\",null,{\"children\":\"layout\"}],\" that fetches data can also wrap a \",[\"$\",\"code\",null,{\"children\":\"page\"}],\" that fetches its own data.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Using the blog example above, a single post page can use \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"getStaticPaths\"}],\" to fetch post data from a CMS:\"]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"app/blog/[slug]/page.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"async\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getStaticPaths\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"posts\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"await\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getPostSlugsFromCMS\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"();\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" paths\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"posts\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".map\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"((post) \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" ({\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { slug\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"post\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".slug }\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" }))\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" };\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"async\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getStaticProps\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ params }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"post\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"await\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getPostFromCMS\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".slug);\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" props\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { post }\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" };\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"BlogPostPage\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ post }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Post\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"post\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"{post} /\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Since both \",[\"$\",\"code\",null,{\"children\":\"app/blog/layout.js\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"app/blog/[slug]/page.js\"}],\" use \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\", Next.js will statically generate the whole \",[\"$\",\"code\",null,{\"children\":\"/blog/[slug]\"}],\" route as \",[\"$\",\"strong\",null,{\"children\":\"React Server Components\"}],\" at build time - resulting in less client-side JavaScript and faster hydration.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Statically generated routes improve this further, as the client navigation reuses the cache (Server Components data) and doesn't recompute work, leading to less CPU time because you're rendering a snapshot of the Server Components.\"}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"behavior-and-priority\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#behavior-and-priority\",\"children\":[\"Behavior and priority\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Next.js Data Fetching Methods (\",[\"$\",\"code\",null,{\"children\":\"getServerSideProps\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\") can only be used in Server Components in the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" folder. Different data fetching methods in segments across a single route affect each other.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Using \",[\"$\",\"code\",null,{\"children\":\"getServerSideProps\"}],\" in one segment will affect \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\" in other segments. Since a request already has to go to a server for the \",[\"$\",\"code\",null,{\"children\":\"getServerSideProps\"}],\" segment, the server will also render any \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\" segments. It will reuse the props fetched at build time so the data will still be static, the \",[\"$\",\"strong\",null,{\"children\":\"rendering\"}],\" happens on-demand on every request with the props generated during \",[\"$\",\"code\",null,{\"children\":\"next build\"}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Using \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\" with \",[\"$\",\"strong\",null,{\"children\":\"revalidate (ISR)\"}],\" in one segment will affect \",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\" with \",[\"$\",\"code\",null,{\"children\":\"revalidate\"}],\" in other segments. If there are two revalidate periods in one route, the shorter revalidation will take precedence.\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\" In the future, this may be optimized to allow for full data fetching granularity in a route.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"data-fetching-with-react-server-components\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#data-fetching-with-react-server-components\",\"children\":[\"Data fetching with React Server Components\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"The combination of Server-Side Routing, React Server Components, Suspense and Streaming have a few implications for data fetching and rendering in Next.js:\"}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"parallel-data-fetching\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#parallel-data-fetching\",\"children\":[\"Parallel data fetching\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Next.js will eagerly initiate data fetches in parallel to minimize waterfalls. For example, if data fetching was \",[\"$\",\"strong\",null,{\"children\":\"sequential\"}],\", each nested segment in the route couldn't start fetching data until the previous segment was completed. With \",[\"$\",\"strong\",null,{\"children\":\"parallel\"}],\" fetching, however, each segment can eagerly start data fetching at the same time.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1386,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/parallel.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Since rendering may depend on Context, rendering for each segment will start once its data has been fetched and its parent has finished rendering.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"In the future, with Suspense, rendering could also start immediately - even if the data is not completely loaded. If the data is read before it's available, Suspense will be triggered. React will start rendering Server Components optimistically, before the requests have completed, and will slot in the result as the requests resolve.\"}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"partial-fetching-and-rendering\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#partial-fetching-and-rendering\",\"children\":[\"Partial Fetching and Rendering\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"When navigating between sibling route segments, Next.js will only fetch and render from that segment down. It will not need to re-fetch or re-render anything above. This means in a page that shares a layout, the layout will be preserved when a user navigates between sibling pages, and Next.js will only fetch and render from that segment down.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"This is especially useful for React Server Components, as otherwise each navigation would cause the full page to re-render on the server instead of rendering only the changed part of the page on the server. This reduces the amount of data transfered and execution time, leading to improved performance.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"For example, if the user navigates between the \",[\"$\",\"code\",null,{\"children\":\"/analytics\"}],\" and the \",[\"$\",\"code\",null,{\"children\":\"/settings\"}],\" pages, React will re-render the page segments but preserve the layouts:\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/partial-example.png\"}],null]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\" It will be possible to force a re-fetch of data higher up the \",[\"$\",\"a\",null,{\"href\":\"#terminology\",\"children\":\"tree\"}],\". We are still discussing the details of how this will look and will update the RFC.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"route-groups\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#route-groups\",\"children\":[\"Route Groups\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"The hierarchy of the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" folder maps directly to URL paths. But it鈥檚 possible to break out of this pattern by creating a route group. Route groups can be used to:\"]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":\"Organize routes without affecting the URL structure.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Opt a route segment out of a layout.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Create multiple root layouts by splitting the application.\"}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"convention\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#convention\",\"children\":[\"Convention\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"A route group can be created by wrapping a folder鈥檚 name in parenthesis: \",[\"$\",\"code\",null,{\"children\":\"(folderName)\"}]]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\" The naming of route groups are only for organizational purposes since they do not affect the URL path.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Example: Opting a route out of a layout\"}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"To opt a route out of a layout, create a new route group (e.g. \",[\"$\",\"code\",null,{\"children\":\"(shop)\"}],\") and move the routes that share the same layout into the group (e.g. \",[\"$\",\"code\",null,{\"children\":\"account\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"cart\"}],\"). The routes outside of the group will not share the layout (e.g. \",[\"$\",\"code\",null,{\"children\":\"checkout\"}],\").\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Before:\"}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/route-group-opt-out-before.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"After:\"}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/route-group-opt-out-after.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Example: Organizing routes without affecting the URL path\"}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Similarly, to organize routes, create a group to keep related routes together. The folders in parenthesis will be omitted from the URL (e.g. \",[\"$\",\"code\",null,{\"children\":\"(marketing)\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"(shop)\"}],\").\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/route-group-organisation.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Example: Creating multiple root layouts\"}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"To create multiple root layouts, create two or more route groups at the top level of the \",[\"$\",\"code\",null,{\"children\":\"app\"}],\" directory. This is useful for partitioning an application into sections that have a completely different UI or experience. The \",[\"$\",\"code\",null,{\"children\":\"\u003chtml\u003e\"}],\", \",[\"$\",\"code\",null,{\"children\":\"\u003cbody\u003e\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"\u003chead\u003e\"}],\" tags of each root layout can be customized separately.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/route-group-multiple-root.png\"}],null]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"server-centric-routing\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#server-centric-routing\",\"children\":[\"Server-Centric Routing\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Currently, Next.js uses client-side routing. After the initial load and on subsequent navigation, a request is made to the server for the resources of the new page. This includes the \",[\"$\",\"strong\",null,{\"children\":\"JavaScript for every component\"}],\" (including components only shown under certain conditions) and their props (JSON data from聽\",[\"$\",\"code\",null,{\"children\":\"getServerSideProps\"}],\"聽or聽\",[\"$\",\"code\",null,{\"children\":\"getStaticProps\"}],\"). Once both the JavaScript and data are loaded from the server, \",[\"$\",\"strong\",null,{\"children\":\"React renders the components client-side.\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"In this new model, Next.js will use server-centric routing while maintaining client-side transitions. This aligns with聽Server Components聽which are evaluated on the server.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"On navigation, data is fetched and React renders the components \",[\"$\",\"strong\",null,{\"children\":\"server-side\"}],\". The output from the server are special instructions (not HTML or JSON) for React on the client to update the DOM. These instructions hold the \",[\"$\",\"strong\",null,{\"children\":\"result\"}],\" of the rendered Server Components meaning that no JavaScript for that component has to be loaded in the browser to render the result.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"This is in contrast to the current default of Client components, which the component JavaScript to the browser to be rendered client-side.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Some benefits of server-centric routing with React Server Components include:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":\"Routing uses the same request used for Server Components (no additional server requests are made).\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Less work is done on the server because navigating between routes only fetches and renders the segments that change.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"No additional JavaScript is loaded in the browser when client-side navigating when no new client components are used.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"The router leverages a new streaming protocol so that rendering can start before all data is loaded.\"}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"As users navigate around an app, the router will store the result of the React Server Component \",[\"$\",\"em\",null,{\"children\":\"payload\"}],\" in an in-memory client-side cache. The cache is split by route segments which allows invalidation at any level and ensures consistency across concurrent renders. This means that for certain cases, the cache of a previously fetched segment can be re-used.\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Note\"}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":\"Static Generation and Server-side caching can be used to optimize data fetching.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"The information above describes the behavior of subsequent navigations. The initial load is a different process involving Server Side Rendering to generate HTML.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"While client-side routing has worked well for Next.js, it scales poorly when the number of potential routes is large because the client has to download a聽\",[\"$\",\"strong\",null,{\"children\":\"route map.\"}]]}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Overall, by using React Server Components, client-side navigation is faster because we load and render less components in the browser.\"}],\"\\n\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"instant-loading-states\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#instant-loading-states\",\"children\":[\"Instant Loading States\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"With server-side routing, navigation happens \",[\"$\",\"strong\",null,{\"children\":\"after\"}],\" data fetching and rendering so it鈥檚 important to show loading UI while the data is being fetched otherwise the application will seem unresponsive.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/server-side-routing.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"The new router will use \",[\"$\",\"a\",null,{\"href\":\"https://reactjs.org/docs/react-api.html#reactsuspense\",\"rel\":\"noopener noreferrer nofollow\",\"target\":\"_blank\",\"children\":[\"Suspense\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\" for instant loading states and default skeletons. This means loading UI can be shown immediately while the content for the new segment loads. The new content is then swapped in once rendering on the server is complete.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"While rendering is happening:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":\"Navigation to the new route will be immediate.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Shared layouts will remain interactive while new route segments load.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Navigation will be interruptible - meaning the user can navigate between routes while the content of one route is loading.\"}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"default-loading-skeletons\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#default-loading-skeletons\",\"children\":[\"Default loading skeletons\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Suspense boundaries will be automatically handled behind-the-scenes with a new file convention called \",[\"$\",\"code\",null,{\"children\":\"loading.js\"}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Example:\"}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You will be able to create a default loading skeleton by adding a \",[\"$\",\"code\",null,{\"children\":\"loading.js\"}],\" file inside a folder.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/loading.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"The \",[\"$\",\"code\",null,{\"children\":\"loading.js\"}],\" should export a React component:\"]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"loading.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Loading\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"YourSkeleton\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// layout.js\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Layout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({children}) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Sidebar\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {children}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" )\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Output\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Sidebar\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Suspense\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"fallback\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"{\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Loading\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e}\u003e{children}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Suspense\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003c/\u003e\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"This will cause all segments in the folder to be wrapped in a suspense boundary. The default skeleton will be used when the layout is first loaded and when navigating between sibling pages.\"}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"error-handling\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#error-handling\",\"children\":[\"Error Handling\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://reactjs.org/docs/error-boundaries.html\",\"rel\":\"noopener noreferrer nofollow\",\"target\":\"_blank\",\"children\":[\"Error boundaries\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\"聽are React components that catch JavaScript errors anywhere in their child component tree.\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"convention-1\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#convention-1\",\"children\":[\"Convention\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You'll be able to create an Error Boundary that will catch errors within a subtree by adding a聽\",[\"$\",\"code\",null,{\"children\":\"error.js\"}],\"聽file and default exporting a React Component.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1230,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/error.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"The Component will be shown as a fallback if an error is thrown within that subtree. This component can be used to log errors, display useful information about the error, and functionality to attempt to recover from the error.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Due to the nested nature of segments and layouts, creating Error boundaries allows you to isolate errors to those parts of the UI. During an error, layouts above the boundary will remain interactive and their state will be preserved.\"}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"error.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Error\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ error\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" reset }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" An error occurred: {\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"error\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".message}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"button\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"onClick\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"{() \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"reset\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"()}\u003eTry again\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"button\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// layout.js\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Layout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({children}) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Sidebar\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {children}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" )\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Output\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Sidebar\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"ErrorBoundary\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"fallback\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"{\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Error\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e}\u003e{children}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"ErrorBoundary\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003c/\u003e\"}]}]]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":\"Note:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Errors inside a聽\",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\"聽file in the same segment as an聽\",[\"$\",\"code\",null,{\"children\":\"error.js\"}],\"聽will not be caught as the automatic error boundary wraps the children of a layout and not the layout itself.\"]}],\"\\n\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"templates\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#templates\",\"children\":[\"Templates\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Templates are similar to Layouts in that they wrap each child Layout or Page.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Unlike Layouts that persist across routes and maintain state, templates create a new instance for each of their children. This means that when a user navigates between route segments that share a template, a new instance of the component is mounted.\"}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\" We recommend using Layouts unless you have a specific reason to use a Template.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"convention-2\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#convention-2\",\"children\":[\"Convention\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"A template can be defined by exporting a default React component from a聽\",[\"$\",\"code\",null,{\"children\":\"template.js\"}],\"聽file. The component should accept a聽\",[\"$\",\"code\",null,{\"children\":\"children\"}],\"聽prop which will be populated with nested segments.\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"example\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#example\",\"children\":[\"Example\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1230,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/template.png\"}],null]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"template.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Template\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Container\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e{children}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Container\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"The rendered output of a route segment with a Layout and a Template will be as such:\"}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"$undefined\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Layout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"/* Note that the template is given a unique key. */\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Template\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"key\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"{routeParam}\u003e{children}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Template\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Layout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"behavior\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#behavior\",\"children\":[\"Behavior\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"There may be cases where you need to mount and unmount shared UI, and templates would be a more suitable option. For example:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":\"Enter/exit animations using CSS or animation libraries\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Features that rely on \",[\"$\",\"code\",null,{\"children\":\"useEffect\"}],\" (e.g logging page views) and \",[\"$\",\"code\",null,{\"children\":\"useState\"}],\" (e.g a per-page feedback form)\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"To change the default framework behavior. E.g. suspense boundaries inside Layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.\"}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example, consider the design of a nested layout with a bordered container that should be wrapped around every sub-page.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You could put the container inside the parent layout (\",[\"$\",\"code\",null,{\"children\":\"shop/layout.js\"}],\"):\"]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"shop/layout.js\",\"language\":\"tsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Layout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"container\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e{children}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// shop/page.js\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Page\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e...\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// shop/categories/layout.js\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"CategoryLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e{children}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"But any enter/exit animations wouldn鈥檛 play when switching pages because the shared parent layout doesn鈥檛 re-render.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"You could put the container in every nested layout or page:\"}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"shop/layout.js\",\"language\":\"tsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Layout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e{children}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// shop/page.js\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Page\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"container\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e...\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// shop/categories/layout.js\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"CategoryLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ children }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"className\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"container\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e{children}\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"But then you鈥檇 have to manually put it in every nested layout or page which can be tedious and error-prone in more complex apps.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"With this convention, you can share templates across routes that create a new instance on navigation. This means DOM elements will be recreated, state will not be preserved, and effects will be re-synchronized.\"}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"advanced-routing-patterns\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#advanced-routing-patterns\",\"children\":[\"Advanced Routing Patterns\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"We plan to introduce conventions to cover edge cases and allow you to implement more advanced routing patterns. Below are some examples we have been actively thinking about:\"}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"intercepting-routes\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#intercepting-routes\",\"children\":[\"Intercepting Routes\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Sometimes, it may be useful to intercept route segments from within other routes. On navigation, the URL will be updated as normal, but the intercepted segment will be shown within the current route鈥檚 layout.\"}],\"\\n\",[\"$\",\"h4\",null,{\"id\":\"example-1\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#example-1\",\"children\":[\"Example\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Before:\"}],\" Clicking the image leads to a new route with its own layout.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/intercepted-routes-before.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"After:\"}],\" By intercepting the route, clicking the image now loads the segment within the current route鈥檚 layout. E.g. as a modal.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/intercepted-routes-after.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"To intercept the \",[\"$\",\"code\",null,{\"children\":\"/photo/[id]\"}],\" route from within \",[\"$\",\"code\",null,{\"children\":\"/[username]\"}],\" segment, create a duplicate \",[\"$\",\"code\",null,{\"children\":\"/photo/[id]\"}],\" folder inside the \",[\"$\",\"code\",null,{\"children\":\"/[username]\"}],\" folder, and prefix it with the \",[\"$\",\"code\",null,{\"children\":\"(..)\"}],\" convention.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/intercepted-route.png\"}],null]}],\"\\n\",[\"$\",\"h4\",null,{\"id\":\"convention-3\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#convention-3\",\"children\":[\"Convention\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"(..)\"}],\" - will match the route segment one level higher (sibling of the parent directory). Similar to \",[\"$\",\"code\",null,{\"children\":\"../\"}],\" in relative paths.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"(..)(..)\"}],\" - will match the route segment two levels higher. Similar to \",[\"$\",\"code\",null,{\"children\":\"../../\"}],\" in relative paths.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"(...)\"}],\" - will match the route segment in the root directory.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\" Refreshing or sharing the page would load the route with its default layout.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"dynamic-parallel-routes\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#dynamic-parallel-routes\",\"children\":[\"Dynamic Parallel Routes\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Sometimes it may be useful to show two or more leaf segments (\",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\") in the same view that can be navigated independently.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Take for instance two or more tab groups within the same dashboard. Navigating one tab group should not affect the other. The combinations of tabs should also be correctly restored when navigating backwards and forwards.\"}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/parallel-routes.png\"}],null]}],\"\\n\",[\"$\",\"h4\",null,{\"id\":\"convention-4\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#convention-4\",\"children\":[\"Convention\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"By default, layouts accept a prop called聽\",[\"$\",\"code\",null,{\"children\":\"children\"}],\"聽which will contain a nested layout or a page. You can rename the prop by creating a named \\\"slot\\\" (a folder that includes the \",[\"$\",\"code\",null,{\"children\":\"@\"}],\" prefix) and nesting segments inside it.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/parallel-routes-children.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"After this change, the layout will receive a prop called聽\",[\"$\",\"code\",null,{\"children\":\"customProp\"}],\"聽instead of聽\",[\"$\",\"code\",null,{\"children\":\"children\"}],\".\"]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"analytics/layout.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Layout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ customProp }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e{customProp}\u003c/\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"You can create parallel routes by adding more than one named slot at the same level. In the example below, both聽\",[\"$\",\"code\",null,{\"children\":\"@views\"}],\"聽and聽\",[\"$\",\"code\",null,{\"children\":\"@audience\"}],\"聽are passed as props to the analytics layout.\"]}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/parallel-routes-complete.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"You can use the named slots to display leaf segments simultaneously.\"}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"analytics/layout.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Layout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ views\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" audience }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"ViewsNav\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {views}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"AudienceNav\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" /\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {audience}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"div\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"When the user first navigates to聽\",[\"$\",\"code\",null,{\"children\":\"/analytics\"}],\", the聽\",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\"聽segment in each folder (\",[\"$\",\"code\",null,{\"children\":\"@views\"}],\"聽and聽\",[\"$\",\"code\",null,{\"children\":\"@audience\"}],\") are shown.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"On navigation to聽\",[\"$\",\"code\",null,{\"children\":\"/analytics/subscribers\"}],\", only聽\",[\"$\",\"code\",null,{\"children\":\"@audience\"}],\"聽is updated. Similarly, only聽\",[\"$\",\"code\",null,{\"children\":\"@views\"}],\"聽are updated when navigating to聽\",[\"$\",\"code\",null,{\"children\":\"/analytics/impressions\"}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Navigating backwards and forwards will reinstate the correct combination of parallel routes.\"}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"combining-intercepting-and-parallel-routes\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#combining-intercepting-and-parallel-routes\",\"children\":[\"Combining Intercepting and Parallel Routes\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"You can combine intercepting and parallel routes to achieve specific routing behaviors in your application.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Example\"}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example, when creating a modal, you often need to be aware of some common challenges, such as:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":\"Modals not being accessible through an URL.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Modals closing when the page is refreshed.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Backwards navigation going to the previous route rather than the route behind the modal.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Forwards navigation not reopening the modal.\"}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"You may want the modal to update the URL when it opens, and backwards/fowards navigation to open and close the modal. Additionally, when sharing the URL, you may want the page to load with the modal open and context behind it or you may want the page to load the content without the modal.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"A good example of this are photos on social media sites. Usually, photos are accessible within a modal from the user's feed or profile. But when sharing the photo, they shown directly on their own page.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"By using conventions, we can make the modal behavior map to routing behavior by default.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Consider this folder structure:\"}],\"\\n\",[\"$\",\"figure\",null,{\"children\":[[\"$\",\"$L25\",null,{\"className\":\"rounded-md border border-gray-200 bg-gray-100\",\"width\":3596,\"height\":1880,\"alt\":\"\",\"src\":\"https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/intercepted-route-modal.png\"}],null]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"With this pattern:\"}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"The content of \",[\"$\",\"code\",null,{\"children\":\"/photo/[id]\"}],\" is accessible through an URL within its own context. It's also accessible within a modal from within the \",[\"$\",\"code\",null,{\"children\":\"/[username]\"}],\" route.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":\"Navigating backwards and forwards using client-side navigation should close and reopen the modal.\"}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Refreshing the page (server-side navigation) should take the user to the original \",[\"$\",\"code\",null,{\"children\":\"/photo/id\"}],\" route instead of showing the modal.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"In \",[\"$\",\"code\",null,{\"children\":\"/@modal/(..)photo/[id]/page.js\"}],\", you can return the content of the page wrapped in a modal component.\"]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"/@modal/(..)photo/[id]/page.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"PhotoPage\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"router\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"useRouter\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"();\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Modal\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// the modal should always be shown on page load\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"isOpen\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"{\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"true\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// closing the modal should take user back to the previous page\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"onClose\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"{() \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"router\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".back\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"()}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003e\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" {\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"/* Page Content */\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"Modal\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" );\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Note:\"}],\" This solution isn't the only way to create a modal in Next.js, but aims to show how you can combine conventions to achieve more complex routing behavior.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"conditional-routes\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#conditional-routes\",\"children\":[\"Conditional Routes\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Sometimes, you may need dynamic information like data or context to determine what route to show. You can use parallel routes to conditionally load one route or another.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Example\"}]}],\"\\n\",[\"$\",\"$L26\",null,{\"filename\":\"layout.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"async\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getServerSideProps\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ params }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"accountType\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" } \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"await\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"fetchAccount\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".slug);\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { props\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { isUser\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" accountType \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"===\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'user'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" } };\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"default\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"UserOrTeamLayout\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ isUser\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" user\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" team }) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\u003e{isUser \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"?\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" user \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" team}\u003c/\u003e;\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"In the example above, you can return either the \",[\"$\",\"code\",null,{\"children\":\"user\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"team\"}],\" route depending on the slug. This allows you to conditionally load the data and match the sub-routes against one option or the other.\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"conclusion\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#conclusion\",\"children\":[\"Conclusion\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"We're excited about the future of layouts, routing, and React 18 in Next.js. Implementation work has begun and we'll announce the features once they are available.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Leave comments and \",[\"$\",\"a\",null,{\"href\":\"https://github.com/vercel/next.js/discussions/37136\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"join the conversation on GitHub Discussions\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M6.75011 4H6.00011V5.5H6.75011H9.43945L5.46978 9.46967L4.93945 10L6.00011 11.0607L6.53044 10.5303L10.499 6.56182V9.25V10H11.999V9.25V5C11.999 4.44772 11.5512 4 10.999 4H6.75011Z\\\" fill=\\\"currentColor\\\"/\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":\"$undefined\",\"height\":\"$undefined\",\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}],\".\"]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"1c:null\na:\"$undefined\"\n20:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n1b:null\n23:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Layouts RFC | Next.js\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Nested routes and layouts, client and server routing, React 18 features, and designed for Server Components.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"canonical\",\"href\":\"https://nextjs.org/blog/layouts-rfc\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Layouts RFC\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"Nested routes and layouts, client and server routing, React 18 features, and designed for Server Components.\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:url\",\"content\":\"https://nextjs.org/blog/layouts-rfc\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/twitter-card.png\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2022-05-23T20:30:00.507Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"Delba de Oliveira\"}],[\"$\",\"meta\",\"10\",{\"property\":\"article:author\",\"content\":\"Lee Robinson\"}],[\"$\",\"meta\",\"11\",{\"property\":\"article:author\",\"content\":\"Sebastian Markb氓ge\"}],[\"$\",\"meta\",\"12\",{\"property\":\"article:author\",\"content\":\"Tim Neutkens\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:title\",\"content\":\"Layouts RFC\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:description\",\"content\":\"Nested routes and layouts, client and server routing, React 18 features, and designed for Server Components.\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:image\",\"content\":\"https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/static/blog/layouts-rfc/twitter-card.png\"}],[\"$\",\"link\",\"17\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]],\"error\":null,\"digest\":\"$undefined\"}\n1e:{\"metadata\":\"$23:metadata\",\"error\":null,\"digest\":\"$unde"])</script><script>self.__next_f.push([1,"fined\"}\n"])</script></body></html>