CINXE.COM

<!DOCTYPE html><html class="__variable_b4bd81 __variable_4d318d" lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/569ce4b8f30dc480-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><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&dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46 1x, /_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=128&q=75&dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46 2x"/><link rel="stylesheet" href="/_next/static/css/94930d6f827b22e1.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/3a4b7cc0153d49b4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/58f50fdfd3cd38b6.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/bf98005f04f1b7f7.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/bfc235d8dfd01529.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/824202e71e79374d.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/83fe6bc36ad4703d.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/4ad309783bf416a2.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/baf446a5c20b5fd4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/f4addedd731adba4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-3b5fb535e17daa62.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46"/><script src="/_next/static/chunks/e5dc07e9-59a9079c2bd129a5.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/5824-2bce50dd6c89a1c1.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/main-app-0a9b49c7e8c6b249.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/998-3736ead338b1bdc0.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/app/(next-site)/page-a7260316c620665e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/9154-d8589c631b8eeed0.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script src="/_next/static/chunks/app/(next-site)/docs/layout-87fdb4272bb087bf.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><meta name="next-size-adjust" content=""/><title>Upgrading: Codemods | Next.js</title><meta name="description" content="Use codemods to upgrade your Next.js codebase when new features are released."/><link rel="canonical" href="https://nextjs.org/docs/app/building-your-application/upgrading/codemods"/><meta property="og:title" content="Upgrading: Codemods | Next.js"/><meta property="og:description" content="Use codemods to upgrade your Next.js codebase when new features are released."/><meta property="og:image" content="https://nextjs.org/api/docs-og?title=Upgrading:%20Codemods"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Upgrading: Codemods"/><meta name="twitter:description" content="Use codemods to upgrade your Next.js codebase when new features are released."/><meta name="twitter:image" content="https://nextjs.org/api/docs-og?title=Upgrading:%20Codemods"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="48x48"/><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><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" noModule=""></script></head><body><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><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=docs_app_building-your-application_upgrading_codemods" 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&dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46 1x, /_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=128&q=75&dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46 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&dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46"/></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>⌘K</kbd></button><button aria-label="Search documentation" class="navbar_search__dZT2b" data-variant="small" type="button"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor"><path d="M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z"/><path d="M16 16l4.5 4.5"/></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=docs_app_building-your-application_upgrading_codemods" 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&dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46 1x, /_next/image?url=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Fv1714730590%2Ffront%2Fnextjs%2Fuwu%2Fnext-uwu-logo.png&w=128&q=75&dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46 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&dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46"/></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="navbar_selected__XbA4W" title="Documentation" data-zone="same" href="/docs">Docs</a><a class="" 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>⌘K</kbd></button><button aria-label="Search documentation" class="navbar_search__dZT2b" data-variant="small" type="button"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor"><path d="M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z"/><path d="M16 16l4.5 4.5"/></svg></button><button type="submit" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:R1eilfb:" style="width:var(--navbar-secondary-button-width);--geist-icon-size:16px" data-state="closed" class="button_base__BjwbK reset_reset__KRyvc button_button__81573 reset_reset__KRyvc hover:!text-gray-1000 !font-normal !text-gray-900 button_secondary__kMMNc button_small__iQMBm button_invert__YNhnn" data-geist-button="" data-prefix="false" data-suffix="false" data-version="v1"><span class="button_content__1aE1_">Feedback</span></button><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>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light-theme','dark-theme');var e=localStorage.getItem('zeit-theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark-theme')}else{d.style.colorScheme = 'light';c.add('light-theme')}}else if(e){var x={"light":"light-theme","dark":"dark-theme"};c.add(x[e]|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><main><div class="sticky top-[64px] z-10 border-b border-gray-200 bg-white/80 px-4 py-3 backdrop-blur-sm backdrop-saturate-200 dark:bg-black/50 md:hidden"><div class="flex flex-col justify-between"><button class="flex items-center gap-1" type="button"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg> <span>Menu</span></button></div></div><div class="relative mx-auto max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10"><div class="sticky top-[121px] hidden h-[calc(100vh-121px)] w-[284px] md:flex md:shrink-0 md:flex-col md:justify-between"><div class="pb-[1px]"><button type="button" role="combobox" aria-controls="radix-:Raqsmklfb:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" aria-label="Open directory select" class="hover:bg-vercel-200 data-[state=open]:bg-vercel-100 !pointer-events-auto h-[60px] w-full rounded-md p-2 dark:hover:bg-gray-200"><span style="pointer-events:none"><div class="grid grid-cols-[auto,1fr,auto] items-center gap-2"><div class="w-8 h-8 rounded-md border flex items-center justify-center border-blue-400 bg-blue-100 text-blue-700"><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="M8 0.154663L8.34601 0.334591L14.596 3.58459L15 3.79466V4.25V11.75V12.2053L14.596 12.4154L8.34601 15.6654L8 15.8453L7.65399 15.6654L1.40399 12.4154L1 12.2053V11.75V4.25V3.79466L1.40399 3.58459L7.65399 0.334591L8 0.154663ZM2.5 11.2947V5.44058L7.25 7.81559V13.7647L2.5 11.2947ZM8.75 13.7647L13.5 11.2947V5.44056L8.75 7.81556V13.7647ZM8 1.84534L12.5766 4.22519L7.99998 6.51352L3.42335 4.2252L8 1.84534Z" fill="currentColor"/></svg></div><div class="text-left"><p 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">Using App Router</p><p 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">Features available in /app</p></div><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" aria-hidden="true" style="color:currentColor;width:20px;height:20px"><path d="M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517"/></svg></div></span></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select><button type="button" role="combobox" aria-controls="radix-:Riqsmklfb:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" aria-label="Open version select" class="hover:bg-vercel-200 data-[state=open]:bg-vercel-100 !pointer-events-auto h-[60px] w-full rounded-md p-2 dark:hover:bg-gray-200"><span style="pointer-events:none"><div class="grid grid-cols-[auto,1fr,auto] items-center gap-2"><div class="w-8 h-8 rounded-md border flex items-center justify-center bg-background-200 border-gray-400 text-gray-900"><svg class="translate-x-px translate-y-px" 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="M1.5 1.5H6.34315C7.00619 1.5 7.64207 1.76339 8.11091 2.23223L13.8787 8L8 13.8787L2.23223 8.11091C1.76339 7.64207 1.5 7.00619 1.5 6.34315V1.5ZM16 8L14.9393 6.93934L9.17157 1.17157C8.42143 0.421427 7.40401 0 6.34315 0H1.5H0V1.5V6.34315C0 7.40401 0.421426 8.42143 1.17157 9.17157L6.93934 14.9393L8 16L9.06066 14.9393L14.9393 9.06066L16 8ZM4.5 5.25C4.91421 5.25 5.25 4.91421 5.25 4.5C5.25 4.08579 4.91421 3.75 4.5 3.75C4.08579 3.75 3.75 4.08579 3.75 4.5C3.75 4.91421 4.08579 5.25 4.5 5.25Z" fill="currentColor"/></svg></div><div class="text-left"><p 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">Using Stable Version</p><p 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">v15.0.3</p></div><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" aria-hidden="true" style="color:currentColor;width:20px;height:20px"><path d="M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517"/></svg></div></span></button><select aria-hidden="true" tabindex="-1" style="position:absolute;border:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;word-wrap:normal"></select></div><div class="overflow-hidden relative"><nav class="styled-scrollbar flex h-[calc(100vh-260px)] flex-col overflow-y-scroll pb-4 pr-2 dark:text-white"><div aria-hidden="true" class="absolute top-0 left-0 z-10 w-full h-3 bg-gradient-to-b pointer-events-none from-gray-0"></div><div aria-hidden="true" class="absolute bottom-0 left-0 z-10 w-full h-3 bg-gradient-to-t pointer-events-none from-gray-0"></div><ul class="last-of-type:pb-3"><li class="my-1.5 ml-[3px]" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-1000 font-medium" href="/docs/app/getting-started">Getting Started</a><div data-is-collapsed="false" style="height:auto;opacity:1;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mb-8"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/getting-started/installation">Installation</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/getting-started/project-structure">Project Structure</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><ul class="last-of-type:pb-3"><li class="my-1.5 ml-[3px]" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-1000 font-medium" href="/docs/app/building-your-application">Building Your Application</a><div data-is-collapsed="false" style="height:auto;opacity:1;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mb-8"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing">Routing<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/defining-routes">Defining Routes</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/pages">Pages</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/layouts-and-templates">Layouts and Templates</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/linking-and-navigating">Linking and Navigating</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/error-handling">Error Handling</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/loading-ui-and-streaming">Loading UI and Streaming</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/redirecting">Redirecting</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/route-groups">Route Groups</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/dynamic-routes">Dynamic Routes</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/parallel-routes">Parallel Routes</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/intercepting-routes">Intercepting Routes</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/route-handlers">Route Handlers</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/middleware">Middleware</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/routing/internationalization">Internationalization</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/data-fetching">Data Fetching<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/data-fetching/fetching">Data Fetching and Caching</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/data-fetching/server-actions-and-mutations">Server Actions and Mutations</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/data-fetching/incremental-static-regeneration">Incremental Static Regeneration (ISR)</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/rendering">Rendering<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/rendering/server-components">Server Components</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/rendering/client-components">Client Components</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/rendering/composition-patterns">Composition Patterns</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/rendering/partial-prerendering">Partial Prerendering</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes">Runtimes</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/caching">Caching</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/styling">Styling<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/styling/css">CSS</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/styling/tailwind-css">Tailwind CSS</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/styling/sass">Sass</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/styling/css-in-js">CSS-in-JS</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing">Optimizing<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/images">Images</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/videos">Videos</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/fonts">Fonts</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/metadata">Metadata</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/scripts">Scripts</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/package-bundling">Package Bundling</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/lazy-loading">Lazy Loading</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/analytics">Analytics</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/instrumentation">Instrumentation</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/open-telemetry">OpenTelemetry</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/static-assets">Static Assets</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/third-party-libraries">Third Party Libraries</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/optimizing/memory-usage">Memory Usage</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring">Configuring<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring/environment-variables">Environment Variables</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring/mdx">MDX</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring/src-directory">src Directory</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring/custom-server">Custom Server</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring/draft-mode">Draft Mode</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring/content-security-policy">Content Security Policy</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring/debugging">Debugging</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/configuring/progressive-web-apps">Progressive Web Applications (PWA)</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/testing">Testing<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/testing/vitest">Vitest</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/testing/jest">Jest</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/testing/playwright">Playwright</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/testing/cypress">Cypress</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/authentication">Authentication</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/deploying">Deploying<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/deploying/production-checklist">Production Checklist</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/deploying/static-exports">Static Exports</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/deploying/multi-zones">Multi-Zones</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/upgrading">Upgrading<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M6 9l6 6 6-6"/></svg></a><div data-is-collapsed="false" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="true"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-geist-link font-medium" href="/docs/app/building-your-application/upgrading/codemods"><div aria-hidden="true" class="absolute -left-[13px] bottom-0 top-0 w-[1px] bg-blue-600"></div>Codemods</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/upgrading/version-15">Version 15</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/upgrading/version-14">Version 14</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/upgrading/app-router-migration">App Router Migration</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/upgrading/from-create-react-app">Migrating from Create React App</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/upgrading/from-vite">Migrating from Vite</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/building-your-application/examples">Examples</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><ul class="last-of-type:pb-3"><li class="my-1.5 ml-[3px]" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-1000 font-medium" href="/docs/app/api-reference">API Reference</a><div data-is-collapsed="false" style="height:auto;opacity:1;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mb-8"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/directives">Directives<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/directives/use-client">use client</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/directives/use-server">use server</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/components">Components<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/components/font">Font</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/components/form"><Form></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/components/image"><Image></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/components/link"><Link></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/components/script"><Script></a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions">File Conventions<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/default">default.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/error">error.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/instrumentation">instrumentation.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/layout">layout.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/loading">loading.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/mdx-components">mdx-components.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/middleware">middleware.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/not-found">not-found.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/page">page.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/route">route.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/route-segment-config">Route Segment Config</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/template">template.js</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/metadata">Metadata Files<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-6"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/metadata/app-icons">favicon, icon, and apple-icon</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/metadata/manifest">manifest.json</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/metadata/opengraph-image">opengraph-image and twitter-image</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/metadata/robots">robots.txt</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/file-conventions/metadata/sitemap">sitemap.xml</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions">Functions<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/connection">connection</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/cookies">cookies</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/draft-mode">draftMode</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/fetch">fetch</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/generate-image-metadata">generateImageMetadata</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/generate-metadata">generateMetadata</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/generate-sitemaps">generateSitemaps</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/generate-static-params">generateStaticParams</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/generate-viewport">generateViewport</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/headers">headers</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/image-response">ImageResponse</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/next-request">NextRequest</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/next-response">NextResponse</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/not-found">notFound</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/permanentRedirect">permanentRedirect</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/redirect">redirect</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/revalidatePath">revalidatePath</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/revalidateTag">revalidateTag</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/unstable_after"><div class="flex items-center gap-2">unstable_after<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/unstable_cache"><div class="flex items-center gap-2">unstable_cache<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 3.5H14.5V5.5H13.5H2.5H1.5V3.5ZM1 7H0V5.5V3.5V2H1.5H14.5H16V3.5V5.5V7H15V12.5C15 13.8807 13.8807 15 12.5 15H3.5C2.11929 15 1 13.8807 1 12.5V7ZM2.5 7V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V7H2.5ZM6 9.5H6.75H9.25H10V11H9.25H6.75H6V9.5Z" fill="currentColor"/></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/unstable_noStore"><div class="flex items-center gap-2">unstable_noStore<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 3.5H14.5V5.5H13.5H2.5H1.5V3.5ZM1 7H0V5.5V3.5V2H1.5H14.5H16V3.5V5.5V7H15V12.5C15 13.8807 13.8807 15 12.5 15H3.5C2.11929 15 1 13.8807 1 12.5V7ZM2.5 7V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V7H2.5ZM6 9.5H6.75H9.25H10V11H9.25H6.75H6V9.5Z" fill="currentColor"/></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/unstable_rethrow"><div class="flex items-center gap-2">unstable_rethrow<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/use-params">useParams</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/use-pathname">usePathname</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/use-report-web-vitals">useReportWebVitals</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/use-router">useRouter</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/use-search-params">useSearchParams</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/use-selected-layout-segment">useSelectedLayoutSegment</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/use-selected-layout-segments">useSelectedLayoutSegments</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/functions/userAgent">userAgent</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js">next.config.js Options<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/appDir">appDir</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/assetPrefix">assetPrefix</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/basePath">basePath</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/compress">compress</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/crossOrigin">crossOrigin</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/cssChunking"><div class="flex items-center gap-2">cssChunking<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/devIndicators">devIndicators</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/distDir">distDir</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/env">env</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/eslint">eslint</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/expireTime">expireTime</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/exportPathMap"><div class="flex items-center gap-2">exportPathMap<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 3.5H14.5V5.5H13.5H2.5H1.5V3.5ZM1 7H0V5.5V3.5V2H1.5H14.5H16V3.5V5.5V7H15V12.5C15 13.8807 13.8807 15 12.5 15H3.5C2.11929 15 1 13.8807 1 12.5V7ZM2.5 7V12.5C2.5 13.0523 2.94772 13.5 3.5 13.5H12.5C13.0523 13.5 13.5 13.0523 13.5 12.5V7H2.5ZM6 9.5H6.75H9.25H10V11H9.25H6.75H6V9.5Z" fill="currentColor"/></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/generateBuildId">generateBuildId</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/generateEtags">generateEtags</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/headers">headers</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/httpAgentOptions">httpAgentOptions</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/images">images</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/incrementalCacheHandlerPath">cacheHandler</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/logging">logging</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/mdxRs"><div class="flex items-center gap-2">mdxRs</div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/onDemandEntries">onDemandEntries</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/optimizePackageImports">optimizePackageImports</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/output">output</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/pageExtensions">pageExtensions</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/poweredByHeader">poweredByHeader</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/ppr"><div class="flex items-center gap-2">ppr<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/productionBrowserSourceMaps">productionBrowserSourceMaps</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/reactCompiler"><div class="flex items-center gap-2">reactCompiler<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/reactMaxHeadersLength">reactMaxHeadersLength</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/reactStrictMode">reactStrictMode</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/redirects">redirects</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/rewrites">rewrites</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/sassOptions">sassOptions</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/serverActions">serverActions</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/serverComponentsHmrCache"><div class="flex items-center gap-2">serverComponentsHmrCache<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/serverExternalPackages">serverExternalPackages</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/staleTimes"><div class="flex items-center gap-2">staleTimes<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/staticGeneration"><div class="flex items-center gap-2">staticGeneration*<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/trailingSlash">trailingSlash</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/transpilePackages">transpilePackages</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/turbo"><div class="flex items-center gap-2">turbo<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/typedRoutes"><div class="flex items-center gap-2">typedRoutes<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/typescript">typescript</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/urlImports"><div class="flex items-center gap-2">urlImports<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/useLightningcss"><div class="flex items-center gap-2">useLightningcss<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/webpack">webpack</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/next-config-js/webVitalsAttribution"><div class="flex items-center gap-2">webVitalsAttribution<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/cli">CLI<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/cli/create-next-app">create-next-app</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/cli/next">next CLI</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/app/api-reference/edge">Edge Runtime</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><ul class="last-of-type:pb-3 hidden"><li class="my-1.5 ml-[3px]" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-1000 font-medium" href="/docs/pages/getting-started">Getting Started</a><div data-is-collapsed="false" style="height:auto;opacity:1;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mb-8"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/getting-started/installation">Installation</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/getting-started/project-structure">Project Structure</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><ul class="last-of-type:pb-3 hidden"><li class="my-1.5 ml-[3px]" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-1000 font-medium" href="/docs/pages/building-your-application">Building Your Application</a><div data-is-collapsed="false" style="height:auto;opacity:1;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mb-8"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing">Routing<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/pages-and-layouts">Pages and Layouts</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/dynamic-routes">Dynamic Routes</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/linking-and-navigating">Linking and Navigating</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/redirecting">Redirecting</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/custom-app">Custom App</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/custom-document">Custom Document</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/api-routes">API Routes</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/custom-error">Custom Errors</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/internationalization">Internationalization</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/routing/middleware">Middleware</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/rendering">Rendering<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/rendering/server-side-rendering">Server-side Rendering (SSR)</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/rendering/static-site-generation">Static Site Generation (SSG)</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/rendering/automatic-static-optimization">Automatic Static Optimization</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/rendering/client-side-rendering">Client-side Rendering (CSR)</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/rendering/edge-and-nodejs-runtimes">Edge and Node.js Runtimes</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/data-fetching">Data Fetching<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/data-fetching/get-static-props">getStaticProps</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/data-fetching/get-static-paths">getStaticPaths</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/data-fetching/forms-and-mutations">Forms and Mutations</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/data-fetching/get-server-side-props">getServerSideProps</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/data-fetching/incremental-static-regeneration">Incremental Static Regeneration (ISR)</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/data-fetching/client-side">Client-side Fetching</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/styling">Styling<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/styling/css">CSS</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/styling/tailwind-css">Tailwind CSS</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/styling/css-in-js">CSS-in-JS</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/styling/sass">Sass</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing">Optimizing<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/images">Images</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/fonts">Fonts</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/scripts">Scripts</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/static-assets">Static Assets</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/package-bundling">Bundling</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/analytics">Analytics</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/lazy-loading">Lazy Loading</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/instrumentation">Instrumentation</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/open-telemetry">OpenTelemetry</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/optimizing/third-party-libraries">Third Party Libraries</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring">Configuring<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/environment-variables">Environment Variables</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/src-directory">src Directory</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/mdx">MDX</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/amp">AMP</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/babel">Babel</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/post-css">PostCSS</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/custom-server">Custom Server</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/draft-mode">Draft Mode</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/error-handling">Error Handling</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/preview-mode">Preview Mode</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/content-security-policy">Content Security Policy</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/configuring/debugging">Debugging</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/testing">Testing<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/testing/vitest">Vitest</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/testing/jest">Jest</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/testing/playwright">Playwright</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/testing/cypress">Cypress</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/authentication">Authentication</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/deploying">Deploying<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/deploying/production-checklist">Production Checklist</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/deploying/static-exports">Static Exports</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/deploying/multi-zones">Multi-Zones</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/deploying/ci-build-caching">Continuous Integration (CI) Build Caching</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading">Upgrading<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/codemods">Codemods</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/app-router-migration">From Pages to App</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/from-vite">Migrating from Vite</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/from-create-react-app">Migrating from Create React App</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/version-14">Version 14</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/version-13">Version 13</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/version-12">Version 12</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/version-11">Version 11</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/version-10">Version 10</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/building-your-application/upgrading/version-9">Version 9</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><ul class="last-of-type:pb-3 hidden"><li class="my-1.5 ml-[3px]" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-1000 font-medium" href="/docs/pages/api-reference">API Reference</a><div data-is-collapsed="false" style="height:auto;opacity:1;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mb-8"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/components">Components<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/components/font">Font</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/components/form"><Form></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/components/head"><Head></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/components/image"><Image></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/components/image-legacy"><Image> (Legacy)</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/components/link"><Link></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/components/script"><Script></a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions">Functions<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/get-initial-props">getInitialProps</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/get-server-side-props">getServerSideProps</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/get-static-paths">getStaticPaths</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/get-static-props">getStaticProps</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/next-request">NextRequest</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/next-response">NextResponse</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/use-amp">useAmp</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/use-report-web-vitals">useReportWebVitals</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/use-router">useRouter</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/functions/userAgent">userAgent</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js">next.config.js Options<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/assetPrefix">assetPrefix</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/basePath">basePath</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/bundlePagesRouterDependencies">bundlePagesRouterDependencies</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/compress">compress</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/crossOrigin">crossOrigin</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/devIndicators">devIndicators</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/distDir">distDir</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/env">env</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/eslint">eslint</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/exportPathMap">exportPathMap</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/generateBuildId">generateBuildId</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/generateEtags">generateEtags</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/headers">headers</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/httpAgentOptions">httpAgentOptions</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/images">images</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/onDemandEntries">onDemandEntries</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/optimizePackageImports">optimizePackageImports</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/output">output</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/pageExtensions">pageExtensions</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/poweredByHeader">poweredByHeader</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/productionBrowserSourceMaps">productionBrowserSourceMaps</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/reactStrictMode">reactStrictMode</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/redirects">redirects</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/rewrites">rewrites</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/runtime-configuration">Runtime Config</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/serverExternalPackages">serverExternalPackages</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/trailingSlash">trailingSlash</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/transpilePackages">transpilePackages</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/turbo"><div class="flex items-center gap-2">turbo<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/typescript">typescript</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/urlImports"><div class="flex items-center gap-2">urlImports<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/useLightningcss"><div class="flex items-center gap-2">useLightningcss<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="M9 7.6736V7V2.5H7V7V7.6736L6.49655 8.12111L4.38279 10L11.6172 10L9.50345 8.12111L9 7.6736ZM5.5 2.5H4V1H5.5H7H9H10.5H12V2.5H10.5V7L14.0735 10.1765C14.6628 10.7003 15 11.4511 15 12.2396C15 13.7641 13.7641 15 12.2396 15H3.7604C2.23587 15 1 13.7641 1 12.2396C1 11.4511 1.33718 10.7003 1.92649 10.1765L5.5 7V2.5ZM2.5 12.2396C2.5 11.9717 2.58527 11.7133 2.7398 11.5L13.2602 11.5C13.4147 11.7133 13.5 11.9717 13.5 12.2396C13.5 12.9357 12.9357 13.5 12.2396 13.5H3.7604C3.0643 13.5 2.5 12.9357 2.5 12.2396Z" fill="currentColor" /></svg></div></a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/webpack">webpack</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/next-config-js/webVitalsAttribution">webVitalsAttribution</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/edge">Edge Runtime</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/cli">CLI<svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:16px;height:16px"><path d="M9 18l6-6-6-6"/></svg></a><div data-is-collapsed="true" style="height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mr-6 border-l border-gray-200 pl-3 dark:border-gray-300 ml-4"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/cli/create-next-app">CLI</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/pages/api-reference/cli/next">next CLI</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><ul class="last-of-type:pb-3"><li class="my-1.5 ml-[3px]" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-1000 font-medium" href="/docs/architecture">Architecture</a><div data-is-collapsed="false" style="height:auto;opacity:1;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mb-8"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/architecture/accessibility">Accessibility</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/architecture/fast-refresh">Fast Refresh</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/architecture/nextjs-compiler">Next.js Compiler</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/architecture/supported-browsers">Supported Browsers</a></li><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/architecture/turbopack">Turbopack</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul><ul class="last-of-type:pb-3"><li class="my-1.5 ml-[3px]" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-1000 font-medium" href="/docs/community">Community</a><div data-is-collapsed="false" style="height:auto;opacity:1;overflow:hidden;display:flex;flex-direction:column"><div class="relative"><ul class="px-0.5 last-of-type:mb-0 mb-8"><li class="my-1.5" data-active="false"><a class="hover:text-gray-1000 relative flex w-full cursor-pointer items-center justify-between rounded-md py-1 pl-2 text-left text-sm text-gray-900" href="/docs/community/contribution-guide">Contribution Guide</a></li></ul><div aria-hidden="true" class="from-gray-0 pointer-events-none absolute bottom-0 left-0 z-10 h-[6px] w-full bg-gradient-to-t"></div></div></div></li></ul></nav></div></div><div id="geist-skip-nav" tabindex="-1"></div><nav class="order-last hidden w-56 shrink-0 lg:block"><div class="sticky top-[126px] h-[calc(100vh-121px)]"><div class="text-gray-1000 mb-1 mt-[7px] text-sm font-medium">On this page</div><div class="relative" data-docs-table-of-contents=""><div aria-hidden="true" class="from-gray-0 z-1 absolute left-0 top-0 h-3 w-full bg-gradient-to-b"></div><div aria-hidden="true" class="from-gray-0 absolute bottom-0 left-0 z-10 h-3 w-full bg-gradient-to-t"></div><ul class="styled-scrollbar max-h-[70vh] space-y-2.5 overflow-y-auto py-2 text-sm"><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900" href="#usage">Usage</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900" href="#codemods">Codemods</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#150">15.0</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge">Transform App Router Route Segment Config runtime value from experimental-edge to edge</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#app-dir-runtime-config-experimental-edge">app-dir-runtime-config-experimental-edge</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#migrate-to-async-dynamic-apis">Migrate to async Dynamic APIs</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#next-async-request-api">next-async-request-api</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#replace-geo-and-ip-properties-of-nextrequest-with-vercelfunctions">Replace geo and ip properties of NextRequest with @vercel/functions</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#next-request-geo-ip">next-request-geo-ip</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#140">14.0</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#migrate-imageresponse-imports">Migrate ImageResponse imports</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#next-og-import">next-og-import</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#use-viewport-export">Use viewport export</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#metadata-to-viewport-export">metadata-to-viewport-export</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#132">13.2</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#use-built-in-font">Use Built-in Font</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#built-in-next-font">built-in-next-font</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#130">13.0</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#rename-next-image-imports">Rename Next Image Imports</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#next-image-to-legacy-image">next-image-to-legacy-image</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#migrate-to-the-new-image-component">Migrate to the New Image Component</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#next-image-experimental">next-image-experimental</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#remove-a-tags-from-link-components">Remove <a> Tags From Link Components</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#new-link">new-link</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#11">11</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#migrate-from-cra">Migrate from CRA</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#cra-to-next">cra-to-next</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#10">10</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#add-react-imports">Add React imports</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#add-missing-react-import">add-missing-react-import</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#9">9</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#transform-anonymous-components-into-named-components">Transform Anonymous Components into Named Components</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#name-default-component">name-default-component</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#8">8</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#transform-amp-hoc-into-page-config">Transform AMP HOC into page config</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#withamp-to-config">withamp-to-config</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#6">6</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-6" href="#use-withrouter">Use withRouter</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-9" href="#url-to-withrouter">url-to-withrouter</a></li></ul></div><div class="mt-3 space-y-2 border-t border-gray-200 pt-5 text-sm text-gray-900 dark:border-gray-300"></div><a class="hover:text-gray-1000 mb-3 flex items-center gap-x-1.5 text-sm text-gray-900 transition-opacity" href="https://vercel.com/solutions/nextjs?utm_source=next-site&utm_medium=web&utm_campaign=managed_nextjs_solutions_page">Managed Next.js (Vercel) <svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:14px;height:14px"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg></a><button class="hover:text-gray-1000 flex items-center gap-x-1.5 text-sm text-gray-900 transition-opacity opacity-0" type="button">Scroll to top <svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:14px;height:14px"><circle cx="12" cy="12" r="10"/><path d="M16 12l-4-4-4 4"/><path d="M12 16V8"/></svg></button></div></nav><article class="mt-4 w-full min-w-0 max-w-6xl px-1 md:px-6" style="min-height:calc(100vh - 103px)" data-docs-container=""><div class="-mt-4 mb-7 md:mb-10 md:mt-2"><div class="flex flex-wrap items-center gap-2 text-sm"><a class="text-gray-700 hover:text-gray-600" href="/docs/app/building-your-application">Building Your Application</a><span class="text-gray-700"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:18px;height:18px"><path d="M9 18l6-6-6-6"/></svg></span><a class="text-gray-700 hover:text-gray-600" href="/docs/app/building-your-application/upgrading">Upgrading</a><span class="text-gray-700"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:18px;height:18px"><path d="M9 18l6-6-6-6"/></svg></span><span class="text-gray-1000 shrink-0">Codemods</span></div></div><div class="prose prose-vercel max-w-none" data-docs="true"><h1 class="break-words">Codemods</h1><p>Codemods are transformations that run on your codebase programmatically. This allows a large number of changes to be programmatically applied without having to manually go through every file.</p> <p>Next.js provides Codemod transformations to help upgrade your Next.js codebase when an API is updated or deprecated.</p> <h2 id="usage" data-docs-heading=""><a href="#usage">Usage<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>In your terminal, navigate (<code>cd</code>) into your project's folder, then run:</p> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)"><</span><span style="color:var(--shiki-token-string)">transfor</span><span style="color:var(--shiki-color-text)">m</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-token-string)">pat</span><span style="color:var(--shiki-color-text)">h</span><span style="color:var(--shiki-token-keyword)">></span></span></code></pre></div> <p>Replacing <code><transform></code> and <code><path></code> with appropriate values.</p> <ul> <li><code>transform</code> - name of transform</li> <li><code>path</code> - files or directory to transform</li> <li><code>--dry</code> Do a dry-run, no code will be edited</li> <li><code>--print</code> Prints the changed output for comparison</li> </ul> <h2 id="codemods" data-docs-heading=""><a href="#codemods">Codemods<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> <h3 id="150" data-docs-heading=""><a href="#150">15.0<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> <h4 id="transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge" data-docs-heading=""><a href="#transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge">Transform App Router Route Segment Config <code>runtime</code> value from <code>experimental-edge</code> to <code>edge</code><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> <h5 id="app-dir-runtime-config-experimental-edge" data-docs-heading=""><a href="#app-dir-runtime-config-experimental-edge"><code>app-dir-runtime-config-experimental-edge</code><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></h5> <blockquote class="p-3 text-sm"> <p><strong>Note</strong>: This codemod is App Router specific.</p> </blockquote> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">app-dir-runtime-config-experimental-edge</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>This codemod transforms <a href="https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#runtime" rel="noopener noreferrer" target="_blank">Route Segment Config <code>runtime</code><span class="inline-flex"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:14px;height:14px"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg></span></a> value <code>experimental-edge</code> to <code>edge</code>.</p> <p>For example:</p> <div class="code-block_wrapper__t6FCO code-block_hideLineNumbers__52YKH 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-token-keyword)">export</span><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)">runtime</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-string-expression)">'experimental-edge'</span></span></code></pre></div> <p>Transforms into:</p> <div class="code-block_wrapper__t6FCO code-block_hideLineNumbers__52YKH 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-token-keyword)">export</span><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)">runtime</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-string-expression)">'edge'</span></span></code></pre></div> <h4 id="migrate-to-async-dynamic-apis" data-docs-heading=""><a href="#migrate-to-async-dynamic-apis">Migrate to async Dynamic APIs<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>APIs that opted into dynamic rendering that previously supported synchronous access are now asynchronous. You can read more about this breaking change in the <a href="/docs/app/building-your-application/upgrading/version-15">upgrade guide</a>.</p> <h5 id="next-async-request-api" data-docs-heading=""><a href="#next-async-request-api"><code>next-async-request-api</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">next-async-request-api</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>This codemod will transform dynamic APIs (<code>cookies()</code>, <code>headers()</code> and <code>draftMode()</code> from <code>next/headers</code>) that are now asynchronous to be properly awaited or wrapped with <code>React.use()</code> if applicable. When an automatic migration isn't possible, the codemod will either add a typecast (if a TypeScript file) or a comment to inform the user that it needs to be manually reviewed & updated.</p> <p>For example:</p> <div class="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-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { cookies</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> headers } </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)">'next/headers'</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">token</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)">cookies</span><span style="color:var(--shiki-color-text)">()</span><span style="color:var(--shiki-token-function)">.get</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'token'</span><span style="color:var(--shiki-color-text)">)</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">useToken</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)">token</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)">cookies</span><span style="color:var(--shiki-color-text)">()</span><span style="color:var(--shiki-token-function)">.get</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'token'</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)"> token</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)">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)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">name</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)">cookies</span><span style="color:var(--shiki-color-text)">()</span><span style="color:var(--shiki-token-function)">.get</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'name'</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)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getHeader</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-function)">headers</span><span style="color:var(--shiki-color-text)">()</span><span style="color:var(--shiki-token-function)">.get</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'x-foo'</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>Transforms into:</p> <div class="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-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { use } </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)">'react'</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { cookies</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> headers</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">type</span><span style="color:var(--shiki-color-text)"> UnsafeUnwrappedCookies } </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)">'next/headers'</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">token</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)">cookies</span><span style="color:var(--shiki-color-text)">())</span><span style="color:var(--shiki-token-function)">.get</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'token'</span><span style="color:var(--shiki-color-text)">)</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">useToken</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)">token</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)">use</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-function)">cookies</span><span style="color:var(--shiki-color-text)">())</span><span style="color:var(--shiki-token-function)">.get</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'token'</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)"> token</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)">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)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">name</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)">cookies</span><span style="color:var(--shiki-color-text)">())</span><span style="color:var(--shiki-token-function)">.get</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'name'</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)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">getHeader</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-function)">headers</span><span style="color:var(--shiki-color-text)">() </span><span style="color:var(--shiki-token-keyword)">as</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">UnsafeUnwrappedCookies</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.get</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'x-foo'</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>When we detect property access on the <code>params</code> or <code>searchParams</code> props in the page / route entries (<code>page.js</code>, <code>layout.js</code>, <code>route.js</code>, or <code>default.js</code>) or the <code>generateMetadata</code> / <code>generateViewport</code> APIs, it will attempt to transform the callsite from a sync to an async function, and await the property access. If it can't be made async (such as with a client component), it will use <code>React.use</code> to unwrap the promise .</p> <p>For example:</p> <div class="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-token-comment)">// page.tsx</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)"> params</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> searchParams</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-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)">string</span><span style="color:var(--shiki-color-text)"> }</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> searchParams</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> { [key</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">string</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)">string</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)">string</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)">undefined</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-keyword)">const</span><span style="color:var(--shiki-color-text)"> { </span><span style="color:var(--shiki-token-constant)">value</span><span style="color:var(--shiki-color-text)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)"> searchParams</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">if</span><span style="color:var(--shiki-color-text)"> (value </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)">'foo'</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)">// ...</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)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">generateMetadata</span><span style="color:var(--shiki-color-text)">({ params }</span><span style="color:var(--shiki-token-keyword)">:</span><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)">string</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)"> title</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)">`My Page - </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-token-string-expression)">`</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></code></pre></div> <p>Transforms into:</p> <div class="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-token-comment)">// page.tsx</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)">(props</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)">string</span><span style="color:var(--shiki-color-text)"> }</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> searchParams</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> { [key</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">string</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)">string</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)">string</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)">undefined</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-keyword)">const</span><span style="color:var(--shiki-color-text)"> { </span><span style="color:var(--shiki-token-constant)">value</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-constant)">props</span><span style="color:var(--shiki-color-text)">.searchParams</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">if</span><span style="color:var(--shiki-color-text)"> (value </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)">'foo'</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)">// ...</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)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">generateMetadata</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)"> { 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)">string</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)">slug</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-constant)">props</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)">return</span><span style="color:var(--shiki-color-text)"> {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> title</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)">`My Page - </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-token-string-expression)">`</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></code></pre></div> <blockquote class="p-3 text-sm"> <p><strong>Good to know:</strong> When this codemod identifies a spot that might require manual intervention, but we aren't able to determine the exact fix, it will add a comment or typecast to the code to inform the user that it needs to be manually updated. These comments are prefixed with <strong>@next/codemod</strong>, and typecasts are prefixed with <code>UnsafeUnwrapped</code>. Your build will error until these comments are explicitly removed. <a href="/docs/messages/sync-dynamic-apis">Read more</a>.</p> </blockquote> <h4 id="replace-geo-and-ip-properties-of-nextrequest-with-vercelfunctions" data-docs-heading=""><a href="#replace-geo-and-ip-properties-of-nextrequest-with-vercelfunctions">Replace <code>geo</code> and <code>ip</code> properties of <code>NextRequest</code> with <code>@vercel/functions</code><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> <h5 id="next-request-geo-ip" data-docs-heading=""><a href="#next-request-geo-ip"><code>next-request-geo-ip</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">next-request-geo-ip</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>This codemod installs <code>@vercel/functions</code> and transforms <code>geo</code> and <code>ip</code> properties of <code>NextRequest</code> with corresponding <code>@vercel/functions</code> features.</p> <p>For example:</p> <div class="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-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">type</span><span style="color:var(--shiki-color-text)"> { NextRequest } </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)">'next/server'</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)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">GET</span><span style="color:var(--shiki-color-text)">(req</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">NextRequest</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)">geo</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">ip</span><span style="color:var(--shiki-color-text)"> } </span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-color-text)"> req</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>Transforms into:</p> <div class="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-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">type</span><span style="color:var(--shiki-color-text)"> { NextRequest } </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)">'next/server'</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { geolocation</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> ipAddress } </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)">'@vercel/functions'</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)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">GET</span><span style="color:var(--shiki-color-text)">(req</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">NextRequest</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)">geo</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)">geolocation</span><span style="color:var(--shiki-color-text)">(req)</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)">ip</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)">ipAddress</span><span style="color:var(--shiki-color-text)">(req)</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="140" data-docs-heading=""><a href="#140">14.0<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> <h4 id="migrate-imageresponse-imports" data-docs-heading=""><a href="#migrate-imageresponse-imports">Migrate <code>ImageResponse</code> imports<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> <h5 id="next-og-import" data-docs-heading=""><a href="#next-og-import"><code>next-og-import</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">next-og-import</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>This codemod moves transforms imports from <code>next/server</code> to <code>next/og</code> for usage of <a href="/docs/app/building-your-application/optimizing/metadata#dynamic-image-generation">Dynamic OG Image Generation</a>.</p> <p>For example:</p> <div class="code-block_wrapper__t6FCO code-block_hideLineNumbers__52YKH 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-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { ImageResponse } </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)">'next/server'</span></span></code></pre></div> <p>Transforms into:</p> <div class="code-block_wrapper__t6FCO code-block_hideLineNumbers__52YKH 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-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { ImageResponse } </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)">'next/og'</span></span></code></pre></div> <h4 id="use-viewport-export" data-docs-heading=""><a href="#use-viewport-export">Use <code>viewport</code> export<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> <h5 id="metadata-to-viewport-export" data-docs-heading=""><a href="#metadata-to-viewport-export"><code>metadata-to-viewport-export</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">metadata-to-viewport-export</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>This codemod migrates certain viewport metadata to <code>viewport</code> export.</p> <p>For example:</p> <div class="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-token-keyword)">export</span><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)">metadata</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> <span class="line"><span style="color:var(--shiki-color-text)"> title</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)">'My App'</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> themeColor</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)">'dark'</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> viewport</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)"> width</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">1</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></code></pre></div> <p>Transforms into:</p> <div class="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-token-keyword)">export</span><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)">metadata</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> <span class="line"><span style="color:var(--shiki-color-text)"> title</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)">'My App'</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> <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)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">viewport</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> <span class="line"><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">1</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> themeColor</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)">'dark'</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="132" data-docs-heading=""><a href="#132">13.2<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> <h4 id="use-built-in-font" data-docs-heading=""><a href="#use-built-in-font">Use Built-in Font<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> <h5 id="built-in-next-font" data-docs-heading=""><a href="#built-in-next-font"><code>built-in-next-font</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">built-in-next-font</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>This codemod uninstalls the <code>@next/font</code> package and transforms <code>@next/font</code> imports into the built-in <code>next/font</code>.</p> <p>For example:</p> <div class="code-block_wrapper__t6FCO code-block_hideLineNumbers__52YKH 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-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { Inter } </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)">'@next/font/google'</span></span></code></pre></div> <p>Transforms into:</p> <div class="code-block_wrapper__t6FCO code-block_hideLineNumbers__52YKH 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-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { Inter } </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)">'next/font/google'</span></span></code></pre></div> <h3 id="130" data-docs-heading=""><a href="#130">13.0<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> <h4 id="rename-next-image-imports" data-docs-heading=""><a href="#rename-next-image-imports">Rename Next Image Imports<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> <h5 id="next-image-to-legacy-image" data-docs-heading=""><a href="#next-image-to-legacy-image"><code>next-image-to-legacy-image</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">next-image-to-legacy-image</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>Safely renames <code>next/image</code> imports in existing Next.js 10, 11, or 12 applications to <code>next/legacy/image</code> in Next.js 13. Also renames <code>next/future/image</code> to <code>next/image</code>.</p> <p>For example:</p> <div class="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">pages/index.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)"> Image1 </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)">'next/image'</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> Image2 </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)">'next/future/image'</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)">Home</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 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)">Image1</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">src</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/test.jpg"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">width</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"200"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">height</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"300"</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)">Image2</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">src</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/test.png"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">width</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"500"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">height</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"400"</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> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <p>Transforms into:</p> <div class="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">pages/index.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)">// 'next/image' becomes 'next/legacy/image'</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> Image1 </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)">'next/legacy/image'</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// 'next/future/image' becomes 'next/image'</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> Image2 </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)">'next/image'</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)">Home</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 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)">Image1</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">src</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/test.jpg"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">width</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"200"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">height</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"300"</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)">Image2</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">src</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/test.png"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">width</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"500"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">height</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"400"</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> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h4 id="migrate-to-the-new-image-component" data-docs-heading=""><a href="#migrate-to-the-new-image-component">Migrate to the New Image Component<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> <h5 id="next-image-experimental" data-docs-heading=""><a href="#next-image-experimental"><code>next-image-experimental</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">next-image-experimental</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>Dangerously migrates from <code>next/legacy/image</code> to the new <code>next/image</code> by adding inline styles and removing unused props.</p> <ul> <li>Removes <code>layout</code> prop and adds <code>style</code>.</li> <li>Removes <code>objectFit</code> prop and adds <code>style</code>.</li> <li>Removes <code>objectPosition</code> prop and adds <code>style</code>.</li> <li>Removes <code>lazyBoundary</code> prop.</li> <li>Removes <code>lazyRoot</code> prop.</li> </ul> <h4 id="remove-a-tags-from-link-components" data-docs-heading=""><a href="#remove-a-tags-from-link-components">Remove <code><a></code> Tags From Link 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></h4> <h5 id="new-link" data-docs-heading=""><a href="#new-link"><code>new-link</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod@latest</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">new-link</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">.</span></span></code></pre></div> <p>Remove <code><a></code> tags inside <a href="/docs/app/api-reference/components/link">Link Components</a>, or add a <code>legacyBehavior</code> prop to Links that cannot be auto-fixed.</p>  <p>For example:</p> <div class="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)">Link</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">href</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/about"</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)">a</span><span style="color:var(--shiki-color-text)">>About</</span><span style="color:var(--shiki-token-string-expression)">a</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)">Link</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// transforms into</span></span> <span class="line"><span style="color:var(--shiki-color-text)"><</span><span style="color:var(--shiki-token-constant)">Link</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">href</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/about"</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> About</span></span> <span class="line"><span style="color:var(--shiki-color-text)"></</span><span style="color:var(--shiki-token-constant)">Link</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-constant)">Link</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">href</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/about"</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)">a</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-constant)">console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'clicked'</span><span style="color:var(--shiki-color-text)">)}>About</</span><span style="color:var(--shiki-token-string-expression)">a</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)">Link</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// transforms into</span></span> <span class="line"><span style="color:var(--shiki-color-text)"><</span><span style="color:var(--shiki-token-constant)">Link</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">href</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/about"</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-constant)">console</span><span style="color:var(--shiki-token-function)">.log</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'clicked'</span><span style="color:var(--shiki-color-text)">)}></span></span> <span class="line"><span style="color:var(--shiki-color-text)"> About</span></span> <span class="line"><span style="color:var(--shiki-color-text)"></</span><span style="color:var(--shiki-token-constant)">Link</span><span style="color:var(--shiki-color-text)">></span></span></code></pre></div> <p>In cases where auto-fixing can't be applied, the <code>legacyBehavior</code> prop is added. This allows your app to keep functioning using the old behavior for that particular link.</p> <div class="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-token-keyword)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Component</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)">=></span><span style="color:var(--shiki-color-text)"> <</span><span style="color:var(--shiki-token-string-expression)">a</span><span style="color:var(--shiki-color-text)">>About</</span><span style="color:var(--shiki-token-string-expression)">a</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-constant)">Link</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">href</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/about"</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)">Component</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)">Link</span><span style="color:var(--shiki-color-text)">></span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// becomes</span></span> <span class="line"><span style="color:var(--shiki-color-text)"><</span><span style="color:var(--shiki-token-constant)">Link</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">href</span><span style="color:var(--shiki-token-keyword)">=</span><span style="color:var(--shiki-token-string-expression)">"/about"</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">legacyBehavior</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)">Component</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)">Link</span><span style="color:var(--shiki-color-text)">></span></span></code></pre></div> <h3 id="11" data-docs-heading=""><a href="#11">11<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> <h4 id="migrate-from-cra" data-docs-heading=""><a href="#migrate-from-cra">Migrate from CRA<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> <h5 id="cra-to-next" data-docs-heading=""><a href="#cra-to-next"><code>cra-to-next</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">cra-to-next</span></span></code></pre></div> <p>Migrates a Create React App project to Next.js; creating a Pages Router and necessary config to match behavior. Client-side only rendering is leveraged initially to prevent breaking compatibility due to <code>window</code> usage during SSR and can be enabled seamlessly to allow the gradual adoption of Next.js specific features.</p> <p>Please share any feedback related to this transform <a href="https://github.com/vercel/next.js/discussions/25858" rel="noopener noreferrer" target="_blank">in this discussion<span class="inline-flex"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:14px;height:14px"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg></span></a>.</p> <h3 id="10" data-docs-heading=""><a href="#10">10<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> <h4 id="add-react-imports" data-docs-heading=""><a href="#add-react-imports">Add React imports<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> <h5 id="add-missing-react-import" data-docs-heading=""><a href="#add-missing-react-import"><code>add-missing-react-import</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">add-missing-react-import</span></span></code></pre></div> <p>Transforms files that do not import <code>React</code> to include the import in order for the new <a href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html" rel="noopener noreferrer nofollow" target="_blank">React JSX transform<span class="inline-flex"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:14px;height:14px"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg></span></a> to work.</p> <p>For example:</p> <div class="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">my-component.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)">class</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Home</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">extends</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">React</span><span style="color:var(--shiki-color-text)">.</span><span style="color:var(--shiki-token-function)">Component</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-function)">render</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)">>Hello World</</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></code></pre></div> <p>Transforms into:</p> <div class="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">my-component.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)"> React </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)">'react'</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)">class</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Home</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">extends</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">React</span><span style="color:var(--shiki-color-text)">.</span><span style="color:var(--shiki-token-function)">Component</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-function)">render</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)">>Hello World</</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></code></pre></div> <h3 id="9" data-docs-heading=""><a href="#9">9<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> <h4 id="transform-anonymous-components-into-named-components" data-docs-heading=""><a href="#transform-anonymous-components-into-named-components">Transform Anonymous Components into Named 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></h4> <h5 id="name-default-component" data-docs-heading=""><a href="#name-default-component"><code>name-default-component</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">name-default-component</span></span></code></pre></div> <p><strong>Versions 9 and above.</strong></p> <p>Transforms anonymous components into named components to make sure they work with <a href="https://nextjs.org/blog/next-9-4#fast-refresh" rel="noopener noreferrer" target="_blank">Fast Refresh<span class="inline-flex"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:14px;height:14px"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg></span></a>.</p> <p>For example:</p> <div class="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">my-component.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> <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)">>Hello World</</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>Transforms into:</p> <div class="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">my-component.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)">MyComponent</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)">>Hello World</</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>The component will have a camel-cased name based on the name of the file, and it also works with arrow functions.</p> <h3 id="8" data-docs-heading=""><a href="#8">8<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> <h4 id="transform-amp-hoc-into-page-config" data-docs-heading=""><a href="#transform-amp-hoc-into-page-config">Transform AMP HOC into page config<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> <h5 id="withamp-to-config" data-docs-heading=""><a href="#withamp-to-config"><code>withamp-to-config</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">withamp-to-config</span></span></code></pre></div> <p>Transforms the <code>withAmp</code> HOC into Next.js 9 page configuration.</p> <p>For example:</p> <div class="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-token-comment)">// Before</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { withAmp } </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)">'next/amp'</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-token-keyword)">function</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">Home</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)">h1</span><span style="color:var(--shiki-color-text)">>My AMP 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> <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-function)">withAmp</span><span style="color:var(--shiki-color-text)">(Home)</span></span></code></pre></div> <div class="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-token-comment)">// After</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)">Home</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)">h1</span><span style="color:var(--shiki-color-text)">>My AMP 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> <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)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">config</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> <span class="line"><span style="color:var(--shiki-color-text)"> amp</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-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="6" data-docs-heading=""><a href="#6">6<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> <h4 id="use-withrouter" data-docs-heading=""><a href="#use-withrouter">Use <code>withRouter</code><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> <h5 id="url-to-withrouter" data-docs-heading=""><a href="#url-to-withrouter"><code>url-to-withrouter</code><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></h5> <div class="code-block_wrapper__t6FCO code-block_hasFileName__ezlBD code-block_hideLineNumbers__52YKH 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="M1.53035 12.7804L1.00002 13.3108L-0.0606384 12.2501L0.469692 11.7198L4.18936 8.00011L0.469692 4.28044L-0.0606384 3.75011L1.00002 2.68945L1.53035 3.21978L5.60358 7.29301C5.9941 7.68353 5.9941 8.3167 5.60357 8.70722L1.53035 12.7804ZM8.75002 12.5001H8.00002V14.0001H8.75002H15.25H16V12.5001H15.25H8.75002Z" fill="currentColor" /></svg></div><span class="code-block_filenameP__02nok">Terminal</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)">npx </span><span style="color:var(--shiki-token-string)">@next/codemod</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">url-to-withrouter</span></span></code></pre></div> <p>Transforms the deprecated automatically injected <code>url</code> property on top level pages to using <code>withRouter</code> and the <code>router</code> property it injects. Read more here: <a href="/docs/messages/url-deprecated">https://nextjs.org/docs/messages/url-deprecated</a></p> <p>For example:</p> <div class="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">From</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)"> React </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)">'react'</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)">class</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">extends</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">React</span><span style="color:var(--shiki-color-text)">.</span><span style="color:var(--shiki-token-function)">Component</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-function)">render</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)">pathname</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)">this</span><span style="color:var(--shiki-color-text)">.</span><span style="color:var(--shiki-token-constant)">props</span><span style="color:var(--shiki-color-text)">.url</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)">>Current pathname: {pathname}</</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></code></pre></div> <div class="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">To</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)"> React </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)">'react'</span></span> <span class="line"><span style="color:var(--shiki-token-keyword)">import</span><span style="color:var(--shiki-color-text)"> { withRouter } </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)">'next/router'</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-function)">withRouter</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)">class</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">extends</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">React</span><span style="color:var(--shiki-color-text)">.</span><span style="color:var(--shiki-token-function)">Component</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-function)">render</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)">pathname</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)">this</span><span style="color:var(--shiki-color-text)">.</span><span style="color:var(--shiki-token-constant)">props</span><span style="color:var(--shiki-color-text)">.router</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)">>Current pathname: {pathname}</</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>This is one case. All the cases that are transformed (and tested) can be found in the <a href="https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter" rel="noopener noreferrer" target="_blank"><code>__testfixtures__</code> directory<span class="inline-flex"><svg class="with-icon_icon__MHUeb" data-testid="geist-icon" fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24" style="color:currentColor;width:14px;height:14px"><path d="M7 17L17 7"/><path d="M7 7h10v10"/></svg></span></a>.</p></div><nav aria-label="pagination" class="pagination_pagination__aeiwF my-12 border-t border-gray-200 pt-8"><a aria-label="Go to previous page: Upgrading" class="pagination_item__pRz03" href="/docs/app/building-your-application/upgrading"><span class="text_wrapper__i87JK pagination_label__GgUO7" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:0.8125rem;--text-line-height:1.125rem;--text-letter-spacing:initial;--text-weight:400">Previous</span><div class="pagination_title__uxdAV"><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:1rem;--text-line-height:1.5rem;--text-letter-spacing:initial;--text-weight:500">Upgrading</span><span class="pagination_icon__3ocd0"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:20px;height:20px;color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 14.0607L9.96966 13.5303L5.14644 8.7071C4.75592 8.31658 4.75592 7.68341 5.14644 7.29289L9.96966 2.46966L10.5 1.93933L11.5607 2.99999L11.0303 3.53032L6.56065 7.99999L11.0303 12.4697L11.5607 13L10.5 14.0607Z" fill="currentColor" /></svg></span></div></a><div class="pagination_children__HLQ17"></div><a aria-label="Go to next page: Version 15" class="pagination_item__pRz03 pagination_align-right__0nLuq" href="/docs/app/building-your-application/upgrading/version-15"><span class="text_wrapper__i87JK pagination_label__GgUO7" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:0.8125rem;--text-line-height:1.125rem;--text-letter-spacing:initial;--text-weight:400">Next</span><div class="pagination_title__uxdAV"><span class="text_wrapper__i87JK" data-version="v1" style="--text-color:var(--ds-gray-1000);--text-size:1rem;--text-line-height:1.5rem;--text-letter-spacing:initial;--text-weight:500">Version 15</span><span class="pagination_icon__3ocd0"><svg data-testid="geist-icon" height="16" stroke-linejoin="round" style="width:20px;height:20px;color:currentColor" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.50001 1.93933L6.03034 2.46966L10.8536 7.29288C11.2441 7.68341 11.2441 8.31657 10.8536 8.7071L6.03034 13.5303L5.50001 14.0607L4.43935 13L4.96968 12.4697L9.43935 7.99999L4.96968 3.53032L4.43935 2.99999L5.50001 1.93933Z" fill="currentColor" /></svg></span></div></a></nav><div class="feedback_inlineWrapper__DQQFm feedback_inlineWrapperClosed__v8oY3" data-feedback-inline=""><div class="feedback_inlineTriggerWrapper__o7yUx" style="height:48px;border-radius:30px"><div class="feedback_trigger__0zjFw"><p 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">Was this helpful?</p><span class="feedback_emojisWrapper__iwjKS"><button aria-checked="false" aria-label="Select Love it! emoji" class="feedback_emoji__VX_rC" role="radio" 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="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM4.5 8.97498H3.875V9.59998C3.875 11.4747 5.81046 12.8637 7.99817 12.8637C10.1879 12.8637 12.125 11.4832 12.125 9.59998V8.97498H11.5H4.5ZM7.99817 11.6137C6.59406 11.6137 5.63842 10.9482 5.28118 10.225H10.7202C10.3641 10.9504 9.40797 11.6137 7.99817 11.6137Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.15295 4.92093L5.375 3.5L4.59705 4.92093L3 5.21885L4.11625 6.39495L3.90717 8L5.375 7.30593L6.84283 8L6.63375 6.39495L7.75 5.21885L6.15295 4.92093ZM11.403 4.92093L10.625 3.5L9.84705 4.92093L8.25 5.21885L9.36625 6.39495L9.15717 8L10.625 7.30593L12.0928 8L11.8837 6.39495L13 5.21885L11.403 4.92093Z" fill="var(--ds-amber-800)"/></svg></button><button aria-checked="false" aria-label="Select It’s okay emoji" class="feedback_emoji__VX_rC" role="radio" 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="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM11.5249 10.8478L11.8727 10.3286L10.8342 9.6329L10.4863 10.1522C9.94904 10.9543 9.0363 11.4802 8.00098 11.4802C6.96759 11.4802 6.05634 10.9563 5.51863 10.1567L5.16986 9.63804L4.13259 10.3356L4.48137 10.8542C5.2414 11.9844 6.53398 12.7302 8.00098 12.7302C9.47073 12.7302 10.7654 11.9816 11.5249 10.8478ZM6.75 6.75C6.75 7.30228 6.30228 7.75 5.75 7.75C5.19772 7.75 4.75 7.30228 4.75 6.75C4.75 6.19772 5.19772 5.75 5.75 5.75C6.30228 5.75 6.75 6.19772 6.75 6.75ZM10.25 7.75C10.8023 7.75 11.25 7.30228 11.25 6.75C11.25 6.19772 10.8023 5.75 10.25 5.75C9.69771 5.75 9.25 6.19772 9.25 6.75C9.25 7.30228 9.69771 7.75 10.25 7.75Z" fill="currentColor"/></svg></button><button aria-checked="false" aria-label="Select Not great emoji" class="feedback_emoji__VX_rC" role="radio" 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="M14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM5.75 7.75C6.30228 7.75 6.75 7.30228 6.75 6.75C6.75 6.19772 6.30228 5.75 5.75 5.75C5.19772 5.75 4.75 6.19772 4.75 6.75C4.75 7.30228 5.19772 7.75 5.75 7.75ZM11.25 6.75C11.25 7.30228 10.8023 7.75 10.25 7.75C9.69771 7.75 9.25 7.30228 9.25 6.75C9.25 6.19772 9.69771 5.75 10.25 5.75C10.8023 5.75 11.25 6.19772 11.25 6.75ZM11.5249 11.2622L11.8727 11.7814L10.8342 12.4771L10.4863 11.9578C9.94904 11.1557 9.0363 10.6298 8.00098 10.6298C6.96759 10.6298 6.05634 11.1537 5.51863 11.9533L5.16986 12.4719L4.13259 11.7744L4.48137 11.2558C5.2414 10.1256 6.53398 9.37982 8.00098 9.37982C9.47073 9.37982 10.7654 10.1284 11.5249 11.2622Z" fill="currentColor"/></svg></button><button aria-checked="false" aria-label="Select Hate it emoji" class="feedback_emoji__VX_rC" role="radio" 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="M4 9V16H5.5V9H4ZM12 9V16H10.5V9H12Z" fill="var(--ds-blue-700)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 9.57941 13.9367 11.0273 13 12.1536V14.2454C14.8289 12.7793 16 10.5264 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 10.5264 1.17107 12.7793 3 14.2454V12.1536C2.06332 11.0273 1.5 9.57941 1.5 8ZM8 14.5C8.51627 14.5 9.01848 14.4398 9.5 14.3261V15.8596C9.01412 15.9518 8.51269 16 8 16C7.48731 16 6.98588 15.9518 6.5 15.8596V14.3261C6.98152 14.4398 7.48373 14.5 8 14.5ZM3.78568 8.36533C4.15863 7.98474 4.67623 7.75 5.25 7.75C5.82377 7.75 6.34137 7.98474 6.71432 8.36533L7.78568 7.31548C7.14222 6.65884 6.24318 6.25 5.25 6.25C4.25682 6.25 3.35778 6.65884 2.71432 7.31548L3.78568 8.36533ZM10.75 7.75C10.1762 7.75 9.65863 7.98474 9.28568 8.36533L8.21432 7.31548C8.85778 6.65884 9.75682 6.25 10.75 6.25C11.7432 6.25 12.6422 6.65884 13.2857 7.31548L12.2143 8.36533C11.8414 7.98474 11.3238 7.75 10.75 7.75ZM6.25 12H9.75C9.75 11.0335 8.9665 10.25 8 10.25C7.0335 10.25 6.25 11.0335 6.25 12Z" fill="currentColor"/> </svg></button></span></div><div><form><div class="feedback_formWrapper__bL7px"><textarea class="feedback_textarea__iiRZ8" id="feedback-textarea" placeholder="Your feedback..."></textarea><div class="text_wrapper__i87JK feedback_markdown-tip__xldJV" 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"><svg fill="none" height="14" viewBox="0 0 22 14" width="22" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M19.5 1.25H2.5C1.80964 1.25 1.25 1.80964 1.25 2.5V11.5C1.25 12.1904 1.80964 12.75 2.5 12.75H19.5C20.1904 12.75 20.75 12.1904 20.75 11.5V2.5C20.75 1.80964 20.1904 1.25 19.5 1.25ZM2.5 0C1.11929 0 0 1.11929 0 2.5V11.5C0 12.8807 1.11929 14 2.5 14H19.5C20.8807 14 22 12.8807 22 11.5V2.5C22 1.11929 20.8807 0 19.5 0H2.5ZM3 3.5H4H4.25H4.6899L4.98715 3.82428L7 6.02011L9.01285 3.82428L9.3101 3.5H9.75H10H11V4.5V10.5H9V6.79807L7.73715 8.17572L7 8.97989L6.26285 8.17572L5 6.79807V10.5H3V4.5V3.5ZM15 7V3.5H17V7H19.5L17 9.5L16 10.5L15 9.5L12.5 7H15Z" fill="var(--ds-gray-700)" fill-rule="evenodd"></path></svg>supported.</div></div><div class="feedback_actions___tqt_" style="justify-content:flex-end"><button type="submit" class="button_base__BjwbK reset_reset__KRyvc button_button__81573 reset_reset__KRyvc 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_">Send</span></button></div></form></div></div></div></article></div></main><div class="jsx-1021054789 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"><img alt="GitHub Logo" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" style="color:transparent" src="/icons/github.svg"/></a><hr/><a aria-label="Twitter" href="https://twitter.com/nextjs" rel="noopener" target="_blank"><img alt="X Logo" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="footer_x__r5_ph" style="color:transparent" src="/icons/x.svg"/></a></div></div><div><h4>Resources</h4><a href="/docs">Docs</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 href="https://vercel.com/analytics?utm_source=next-site&utm_medium=footer&utm_campaign=docs_app_building-your-application_upgrading_codemods" 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=docs_app_building-your-application_upgrading_codemods" 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=docs_app_building-your-application_upgrading_codemods" rel="noopener" target="_blank">Next.js Commerce</a><a href="https://vercel.com/contact/sales?utm_source=next-site&utm_medium=footer&utm_campaign=docs_app_building-your-application_upgrading_codemods" rel="noopener" target="_blank">Contact Sales</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=docs_app_building-your-application_upgrading_codemods" rel="noopener" target="_blank">Next.js + Vercel</a><a href="https://vercel.com/oss?utm_source=next-site&utm_medium=footer&utm_campaign=docs_app_building-your-application_upgrading_codemods" rel="noopener" target="_blank">Open Source Software</a><a href="https://github.com/vercel" rel="noopener noreferrer" target="_blank">GitHub</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><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":"60783e7744f49c47d5b6ee6cf88f8d15430875e0fb","bound":"$@1"}"/><input type="hidden" name="$ACTION_1:1" value="[{"success":false,"error":""}]"/><input type="hidden" name="$ACTION_KEY" value="k261328331"/><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></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>© 2024 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"><img alt="GitHub Logo" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" style="color:transparent" src="/icons/github.svg"/></a><hr/><a aria-label="Twitter" href="https://twitter.com/nextjs" rel="noopener" target="_blank"><img alt="X Logo" loading="lazy" width="16" height="16" decoding="async" data-nimg="1" class="footer_x__r5_ph" style="color:transparent" src="/icons/x.svg"/></a></div></div></div></footer></div></div><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><script src="/_next/static/chunks/webpack-3b5fb535e17daa62.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"d:\"$Sreact.fragment\"\ne:I[69031,[],\"\"]\nf:I[29531,[],\"\"]\n10:I[94786,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"Analytics\"]\n11:I[22019,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxo"])</script><script>self.__next_f.push([1,"Tj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"PrefetchCrossZoneLinksProvider\"]\n12:I[92641,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunk"])</script><script>self.__next_f.push([1,"s/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"Header\"]\n13:I[94822,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"Provider\"]\n14:I[90002,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cf"])</script><script>self.__next_f.push([1,"ff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"998\",\"static/chunks/998-3736ead338b1bdc0.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"975\",\"static/chunks/app/(next-site)/page-a7260316c620665e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"HydrateMeLater\"]\n15:I[33800,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"default\"]\n16:I[88883,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl"])</script><script>self.__next_f.push([1,"=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"Image\"]\n17:I[22019,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\""])</script><script>self.__next_f.push([1,"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"Link\"]\n18:\"$Sreact.suspense\"\n19:I[35311,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/l"])</script><script>self.__next_f.push([1,"ayout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"ExternalFooterLink\"]\n1a:I[42570,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"NewsletterForm\"]\n1b:I[74184,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fe"])</script><script>self.__next_f.push([1,"c010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"ThemeSwitcher\"]\n1c:I[92991,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\","])</script><script>self.__next_f.push([1,"\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"Cmdk\"]\n1d:I[8951,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"TrackPageView\"]\n1e:I[22019,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"stati"])</script><script>self.__next_f.push([1,"c/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7217\",\"static/chunks/7217-65f73b4a100b486c.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"6060\",\"static/chunks/6060-1f1fe78bc4c86063.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7487\",\"static/chunks/7487-7d622c7e33b47078.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"432\",\"static/chunks/432-2080e2f57f3b430e.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5670\",\"static/chunks/5670-de97d70154173e45.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1080\",\"static/chunks/app/(next-site)/layout-7eab65190271e8c8.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"PrefetchCrossZoneLinks\"]\n1f:I[52009,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"9154\",\"static/chunks/9154-d8589c631b8eeed0.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"9588\",\"static/chunks/app/(next-site)/docs/layout-87fdb4272bb087bf.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"MobileNav\"]\n20:I[7773,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"9154\",\"static/chunks/9154-d8589c631b8eeed0.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"9588"])</script><script>self.__next_f.push([1,"\",\"static/chunks/app/(next-site)/docs/layout-87fdb4272bb087bf.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"NavList\"]\n22:I[99012,[],\"OutletBoundary\"]\n24:I[99012,[],\"MetadataBoundary\"]\n26:I[99012,[],\"ViewportBoundary\"]\n28:I[17458,[],\"\"]\n1:HL[\"/_next/static/media/569ce4b8f30dc480-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:HL[\"/_next/static/css/94930d6f827b22e1.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\n4:HL[\"/_next/static/css/3a4b7cc0153d49b4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\n5:HL[\"/_next/static/css/58f50fdfd3cd38b6.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\n6:HL[\"/_next/static/css/bf98005f04f1b7f7.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\n7:HL[\"/_next/static/css/bfc235d8dfd01529.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\n8:HL[\"/_next/static/css/824202e71e79374d.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\n9:HL[\"/_next/static/css/83fe6bc36ad4703d.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\na:HL[\"/_next/static/css/4ad309783bf416a2.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\nb:HL[\"/_next/static/css/baf446a5c20b5fd4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\nc:HL[\"/_next/static/css/f4addedd731adba4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"4mSOwJptzzPemGzzI8AOo\",\"p\":\"\",\"c\":[\"\",\"docs\",\"app\",\"building-your-application\",\"upgrading\",\"codemods\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(next-site)\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"app/building-your-application/upgrading/codemods\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true]}],[\"\",[\"$\",\"$d\",\"c\",{\"children\":[null,[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",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)\",[\"$\",\"$d\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/94930d6f827b22e1.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3a4b7cc0153d49b4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/58f50fdfd3cd38b6.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/bf98005f04f1b7f7.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/bfc235d8dfd01529.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/824202e71e79374d.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"6\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/83fe6bc36ad4703d.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"7\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4ad309783bf416a2.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"8\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/baf446a5c20b5fd4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"9\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/f4addedd731adba4.css?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"className\":\"__variable_b4bd81 __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) {}\"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L10\",null,{}],[\"$\",\"$L11\",null,{\"children\":[[\"$\",\"$L12\",null,{}],[\"$\",\"$L13\",null,{\"children\":[[\"$\",\"main\",null,{\"children\":[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(next-site)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",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:1: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:1:1:props:children:props:children:1:props:style\",\"children\":404}],[\"$\",\"div\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:1:1:props:children:props:children:2:props:style\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$0:f:0:1:1:props:children:1:props:notFound:1:1:props:children:props:children:2:props:children:props:style\",\"children\":\"This page could not be found.\"}]}]]}]}]]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$L15\",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\":[\"$\",\"$L16\",null,{\"alt\":\"GitHub Logo\",\"height\":\"16\",\"src\":\"/icons/github.svg\",\"width\":\"16\"}]}],[\"$\",\"hr\",null,{}],[\"$\",\"a\",null,{\"aria-label\":\"Twitter\",\"href\":\"https://twitter.com/nextjs\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":[\"$\",\"$L16\",null,{\"alt\":\"X Logo\",\"className\":\"footer_x__r5_ph\",\"height\":\"16\",\"src\":\"/icons/x.svg\",\"width\":\"16\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"children\":\"Resources\"}],[\"$\",\"a\",null,{\"href\":\"/docs\",\"children\":\"Docs\"}],[\"$\",\"$L17\",null,{\"href\":\"/learn\",\"prefetch\":false,\"children\":\"Learn\"}],[\"$\",\"$L17\",null,{\"href\":\"/showcase\",\"prefetch\":false,\"children\":\"Showcase\"}],[\"$\",\"$L17\",null,{\"href\":\"/blog\",\"prefetch\":false,\"children\":\"Blog\"}],[\"$\",\"$18\",null,{\"fallback\":null,\"children\":[\"$\",\"$L19\",null,{\"path\":\"/analytics\",\"children\":\"Analytics\"}]}],[\"$\",\"$L17\",null,{\"href\":\"/conf\",\"prefetch\":false,\"children\":\"Next.js Conf\"}],[\"$\",\"$18\",null,{\"fallback\":null,\"children\":[\"$\",\"$L19\",null,{\"path\":\"/products/previews\",\"children\":\"Previews\"}]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"children\":\"More\"}],[\"$\",\"$18\",null,{\"fallback\":null,\"children\":[\"$\",\"$L19\",null,{\"path\":\"/templates/next.js/nextjs-commerce\",\"children\":\"Next.js Commerce\"}]}],[\"$\",\"$18\",null,{\"fallback\":null,\"children\":[\"$\",\"$L19\",null,{\"path\":\"/contact/sales\",\"children\":\"Contact Sales\"}]}],[\"$\",\"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\"}],[\"$\",\"$L17\",null,{\"href\":\"/telemetry\",\"prefetch\":false,\"children\":\"Telemetry\"}],[\"$\",\"$L17\",null,{\"href\":\"/governance\",\"prefetch\":false,\"children\":\"Governance\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"h4\",null,{\"children\":\"About Vercel\"}],[\"$\",\"$18\",null,{\"fallback\":null,\"children\":[\"$\",\"$L19\",null,{\"path\":\"/solutions/nextjs\",\"children\":\"Next.js + Vercel\"}]}],[\"$\",\"$18\",null,{\"fallback\":null,\"children\":[\"$\",\"$L19\",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://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\"}]]}],[\"$\",\"$L1a\",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\":[\"© \",\"2024\",\" 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\":[\"$\",\"$L16\",null,{\"alt\":\"GitHub Logo\",\"height\":\"16\",\"src\":\"/icons/github.svg\",\"width\":\"16\"}]}],[\"$\",\"hr\",null,{}],[\"$\",\"a\",null,{\"aria-label\":\"Twitter\",\"href\":\"https://twitter.com/nextjs\",\"rel\":\"noopener\",\"target\":\"_blank\",\"children\":[\"$\",\"$L16\",null,{\"alt\":\"X Logo\",\"className\":\"footer_x__r5_ph\",\"height\":\"16\",\"src\":\"/icons/x.svg\",\"width\":\"16\"}]}]]}]]}],[\"$\",\"$18\",null,{\"fallback\":null,\"children\":[\"$\",\"$L1b\",null,{}]}]]}]]}]}]}]}],[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$L1c\",null,{}]}],[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$L1d\",null,{}]}]]}]]}],[\"$\",\"$L1e\",null,{}],null]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$d\",\"c\",{\"children\":[null,[[\"$\",\"$L1f\",null,{\"children\":[\"$\",\"$L20\",null,{\"isMobile\":true,\"items\":{\"13\":[{\"title\":\"Getting Started\",\"description\":\"Learn how to create full-stack web applications with Next.js.\",\"path\":\"13/getting-started\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Installation\",\"description\":\"Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.\",\"path\":\"13/getting-started/installation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Project Structure\",\"description\":\"A list of folders and files conventions in a Next.js project\",\"path\":\"13/getting-started/project-structure\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Building Your Application\",\"description\":\"Learn how to use Next.js features to build your application.\",\"path\":\"13/app/building-your-application\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Routing\",\"description\":\"Learn the fundamentals of routing for front-end applications.\",\"path\":\"13/app/building-your-application/routing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Defining Routes\",\"description\":\"Learn how to create your first route in Next.js.\",\"path\":\"13/app/building-your-application/routing/defining-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Pages and Layouts\",\"description\":\"Create your first page and shared layout with the App Router.\",\"path\":\"13/app/building-your-application/routing/pages-and-layouts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Linking and Navigating\",\"description\":\"Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.\",\"path\":\"13/app/building-your-application/routing/linking-and-navigating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Groups\",\"description\":\"Route Groups can be used to partition your Next.js application into different sections.\",\"path\":\"13/app/building-your-application/routing/route-groups\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Dynamic Routes\",\"description\":\"Dynamic Routes can be used to programmatically generate route segments from dynamic data.\",\"path\":\"13/app/building-your-application/routing/dynamic-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Loading UI and Streaming\",\"description\":\"Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.\",\"path\":\"13/app/building-your-application/routing/loading-ui-and-streaming\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Error Handling\",\"description\":\"Handle runtime errors by automatically wrapping route segments and their nested children in a React Error Boundary.\",\"path\":\"13/app/building-your-application/routing/error-handling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Parallel Routes\",\"description\":\"Simultaneously render one or more pages in the same view that can be navigated independently. A pattern for highly dynamic applications.\",\"path\":\"13/app/building-your-application/routing/parallel-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Intercepting Routes\",\"description\":\"Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals.\",\"path\":\"13/app/building-your-application/routing/intercepting-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Handlers\",\"description\":\"Create custom request handlers for a given route using the Web's Request and Response APIs.\",\"path\":\"13/app/building-your-application/routing/route-handlers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Middleware\",\"description\":\"Learn how to use Middleware to run code before a request is completed.\",\"path\":\"13/app/building-your-application/routing/middleware\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Project Organization\",\"description\":\"Learn how to organize your Next.js project and colocate files.\",\"path\":\"13/app/building-your-application/routing/colocation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Internationalization\",\"description\":\"Add support for multiple languages with internationalized routing and localized content.\",\"path\":\"13/app/building-your-application/routing/internationalization\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Data Fetching\",\"description\":\"Learn how to fetch, cache, revalidate, and mutate data with Next.js.\",\"path\":\"13/app/building-your-application/data-fetching\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Fetching, Caching, and Revalidating\",\"description\":\"Learn how to fetch, cache, and revalidate data in your Next.js application.\",\"path\":\"13/app/building-your-application/data-fetching/fetching-caching-and-revalidating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Data Fetching Patterns\",\"description\":\"Learn about common data fetching patterns in React and Next.js.\",\"path\":\"13/app/building-your-application/data-fetching/patterns\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Server Actions and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"13/app/building-your-application/data-fetching/server-actions-and-mutations\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Forms and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"13/app/building-your-application/data-fetching/forms-and-mutations\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Rendering\",\"description\":\"Learn the differences between Next.js rendering environments, strategies, and runtimes.\",\"path\":\"13/app/building-your-application/rendering\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Server Components\",\"description\":\"Learn how you can use React Server Components to render parts of your application on the server.\",\"path\":\"13/app/building-your-application/rendering/server-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client Components\",\"description\":\"Learn how to use Client Components to render parts of your application on the client.\",\"path\":\"13/app/building-your-application/rendering/client-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Composition Patterns\",\"description\":\"Recommended patterns for using Server and Client Components.\",\"path\":\"13/app/building-your-application/rendering/composition-patterns\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Edge and Node.js Runtimes\",\"description\":\"Learn about the switchable runtimes (Edge and Node.js) in Next.js.\",\"path\":\"13/app/building-your-application/rendering/edge-and-nodejs-runtimes\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Caching\",\"description\":\"An overview of caching mechanisms in Next.js.\",\"path\":\"13/app/building-your-application/caching\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Styling\",\"description\":\"Learn the different ways you can style your Next.js application.\",\"path\":\"13/app/building-your-application/styling\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CSS Modules\",\"description\":\"Style your Next.js Application with CSS Modules.\",\"path\":\"13/app/building-your-application/styling/css-modules\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Tailwind CSS\",\"description\":\"Style your Next.js Application using Tailwind CSS.\",\"path\":\"13/app/building-your-application/styling/tailwind-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CSS-in-JS\",\"description\":\"Use CSS-in-JS libraries with Next.js\",\"path\":\"13/app/building-your-application/styling/css-in-js\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Sass\",\"description\":\"Style your Next.js application using Sass.\",\"path\":\"13/app/building-your-application/styling/sass\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Optimizing\",\"description\":\"Optimize your Next.js application for best performance and user experience.\",\"path\":\"13/app/building-your-application/optimizing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Images\",\"description\":\"Optimize your images with the built-in `next/image` component.\",\"path\":\"13/app/building-your-application/optimizing/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fonts\",\"description\":\"Optimize your application's web fonts with the built-in `next/font` loaders.\",\"path\":\"13/app/building-your-application/optimizing/fonts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Scripts\",\"description\":\"Optimize 3rd party scripts with the built-in Script component.\",\"path\":\"13/app/building-your-application/optimizing/scripts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Metadata\",\"description\":\"Use the Metadata API to define metadata in any layout or page.\",\"path\":\"13/app/building-your-application/optimizing/metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Assets\",\"description\":\"Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.\",\"path\":\"13/app/building-your-application/optimizing/static-assets\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Lazy Loading\",\"description\":\"Lazy load imported libraries and React Components to improve your application's loading performance.\",\"path\":\"13/app/building-your-application/optimizing/lazy-loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Analytics\",\"description\":\"Measure and track page performance using Next.js Speed Insights\",\"path\":\"13/app/building-your-application/optimizing/analytics\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"OpenTelemetry\",\"description\":\"Learn how to instrument your Next.js app with OpenTelemetry.\",\"path\":\"13/app/building-your-application/optimizing/open-telemetry\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Instrumentation\",\"description\":\"Learn how to use instrumentation to run code at server startup in your Next.js app\",\"path\":\"13/app/building-your-application/optimizing/instrumentation\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuring\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"13/app/building-your-application/configuring\",\"version\":\"$undefined\",\"children\":[{\"title\":\"TypeScript\",\"description\":\"Next.js provides a TypeScript-first development experience for building your React application.\",\"path\":\"13/app/building-your-application/configuring/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ESLint\",\"description\":\"Next.js provides an integrated ESLint experience by default. These conformance rules help you use Next.js in an optimal way.\",\"path\":\"13/app/building-your-application/configuring/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Environment Variables\",\"description\":\"Learn to add and access environment variables in your Next.js application.\",\"path\":\"13/app/building-your-application/configuring/environment-variables\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Absolute Imports and Module Path Aliases\",\"description\":\"Configure module path aliases that allow you to remap certain import paths.\",\"path\":\"13/app/building-your-application/configuring/absolute-imports-and-module-aliases\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"MDX\",\"description\":\"Learn how to configure MDX to write JSX in your markdown files.\",\"path\":\"13/app/building-your-application/configuring/mdx\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"src Directory\",\"description\":\"Save pages under the `src` directory as an alternative to the root `pages` directory.\",\"path\":\"13/app/building-your-application/configuring/src-directory\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Draft Mode\",\"description\":\"Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with App Router here.\",\"path\":\"13/app/building-your-application/configuring/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Content Security Policy\",\"description\":\"Learn how to set a Content Security Policy (CSP) for your Next.js application.\",\"path\":\"13/app/building-your-application/configuring/content-security-policy\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Deploying\",\"description\":\"Learn how to deploy your Next.js app to production, either managed or self-hosted.\",\"path\":\"13/app/building-your-application/deploying\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Static Exports\",\"description\":\"Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.\",\"path\":\"13/app/building-your-application/deploying/static-exports\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Upgrading\",\"description\":\"Learn how to upgrade to the latest versions of Next.js.\",\"path\":\"13/app/building-your-application/upgrading\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Codemods\",\"description\":\"Use codemods to upgrade your Next.js codebase when new features are released.\",\"path\":\"13/app/building-your-application/upgrading/codemods\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"App Router Migration\",\"description\":\"Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.\",\"path\":\"13/app/building-your-application/upgrading/app-router-migration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Vite\",\"description\":\"Learn how to migrate your existing React application from Vite to Next.js.\",\"path\":\"13/app/building-your-application/upgrading/from-vite\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"API Reference\",\"description\":\"Next.js API Reference for the App Router.\",\"path\":\"13/app/api-reference\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Components\",\"description\":\"API Reference for Next.js built-in components.\",\"path\":\"13/app/api-reference/components\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Font\",\"description\":\"Optimizing loading web fonts with the built-in `next/font` loaders.\",\"path\":\"13/app/api-reference/components/font\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e\",\"description\":\"Optimize Images in your Next.js Application using the built-in `next/image` Component.\",\"path\":\"13/app/api-reference/components/image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cLink\u003e\",\"description\":\"Enable fast client-side navigation with the built-in `next/link` component.\",\"path\":\"13/app/api-reference/components/link\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cScript\u003e\",\"description\":\"Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.\",\"path\":\"13/app/api-reference/components/script\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"File Conventions\",\"description\":\"API Reference for Next.js Special Files.\",\"path\":\"13/app/api-reference/file-conventions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"default.js\",\"description\":\"API Reference for the default.js file.\",\"path\":\"13/app/api-reference/file-conventions/default\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"error.js\",\"description\":\"API reference for the error.js special file.\",\"path\":\"13/app/api-reference/file-conventions/error\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"layout.js\",\"description\":\"API reference for the layout.js file.\",\"path\":\"13/app/api-reference/file-conventions/layout\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"loading.js\",\"description\":\"API reference for the loading.js file.\",\"path\":\"13/app/api-reference/file-conventions/loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"not-found.js\",\"description\":\"API reference for the not-found.js file.\",\"path\":\"13/app/api-reference/file-conventions/not-found\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"page.js\",\"description\":\"API reference for the page.js file.\",\"path\":\"13/app/api-reference/file-conventions/page\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"route.js\",\"description\":\"API reference for the route.js special file.\",\"path\":\"13/app/api-reference/file-conventions/route\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Segment Config\",\"description\":\"Learn about how to configure options for Next.js route segments.\",\"path\":\"13/app/api-reference/file-conventions/route-segment-config\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"template.js\",\"description\":\"API Reference for the template.js file.\",\"path\":\"13/app/api-reference/file-conventions/template\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Metadata Files\",\"description\":\"API documentation for the metadata file conventions.\",\"path\":\"13/app/api-reference/file-conventions/metadata\",\"version\":\"$undefined\",\"children\":[{\"title\":\"favicon, icon, and apple-icon\",\"description\":\"API Reference for the Favicon, Icon and Apple Icon file conventions.\",\"path\":\"13/app/api-reference/file-conventions/metadata/app-icons\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"manifest.json\",\"description\":\"API Reference for manifest.json file.\",\"path\":\"13/app/api-reference/file-conventions/metadata/manifest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"opengraph-image and twitter-image\",\"description\":\"API Reference for the Open Graph Image and Twitter Image file conventions.\",\"path\":\"13/app/api-reference/file-conventions/metadata/opengraph-image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"robots.txt\",\"description\":\"API Reference for robots.txt file.\",\"path\":\"13/app/api-reference/file-conventions/metadata/robots\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"sitemap.xml\",\"description\":\"API Reference for the sitemap.xml file.\",\"path\":\"13/app/api-reference/file-conventions/metadata/sitemap\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"Functions\",\"description\":\"API Reference for Next.js Functions and Hooks.\",\"path\":\"13/app/api-reference/functions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"cookies\",\"description\":\"API Reference for the cookies function.\",\"path\":\"13/app/api-reference/functions/cookies\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"draftMode\",\"description\":\"API Reference for the draftMode function.\",\"path\":\"13/app/api-reference/functions/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"fetch\",\"description\":\"API reference for the extended fetch function.\",\"path\":\"13/app/api-reference/functions/fetch\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateImageMetadata\",\"description\":\"Learn how to generate multiple images in a single Metadata API special file.\",\"path\":\"13/app/api-reference/functions/generate-image-metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateMetadata\",\"description\":\"Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.\",\"path\":\"13/app/api-reference/functions/generate-metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateStaticParams\",\"description\":\"API reference for the generateStaticParams function.\",\"path\":\"13/app/api-reference/functions/generate-static-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"API reference for the headers function.\",\"path\":\"13/app/api-reference/functions/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ImageResponse\",\"description\":\"API Reference for the ImageResponse constructor.\",\"path\":\"13/app/api-reference/functions/image-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextRequest\",\"description\":\"API Reference for NextRequest.\",\"path\":\"13/app/api-reference/functions/next-request\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextResponse\",\"description\":\"API Reference for NextResponse.\",\"path\":\"13/app/api-reference/functions/next-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"notFound\",\"description\":\"API Reference for the notFound function.\",\"path\":\"13/app/api-reference/functions/not-found\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"permanentRedirect\",\"description\":\"API Reference for the permanentRedirect function.\",\"path\":\"13/app/api-reference/functions/permanentRedirect\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirect\",\"description\":\"API Reference for the redirect function.\",\"path\":\"13/app/api-reference/functions/redirect\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"revalidatePath\",\"description\":\"API Reference for the revalidatePath function.\",\"path\":\"13/app/api-reference/functions/revalidatePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"revalidateTag\",\"description\":\"API Reference for the revalidateTag function.\",\"path\":\"13/app/api-reference/functions/revalidateTag\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Server Actions\",\"description\":\"API Reference for Next.js Server Actions.\",\"path\":\"13/app/api-reference/functions/server-actions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useParams\",\"description\":\"API Reference for the useParams hook.\",\"path\":\"13/app/api-reference/functions/use-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"usePathname\",\"description\":\"API Reference for the usePathname hook.\",\"path\":\"13/app/api-reference/functions/use-pathname\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useReportWebVitals\",\"description\":\"API Reference for the useReportWebVitals function.\",\"path\":\"13/app/api-reference/functions/use-report-web-vitals\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useRouter\",\"description\":\"API reference for the useRouter hook.\",\"path\":\"13/app/api-reference/functions/use-router\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSearchParams\",\"description\":\"API Reference for the useSearchParams hook.\",\"path\":\"13/app/api-reference/functions/use-search-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSelectedLayoutSegment\",\"description\":\"API Reference for the useSelectedLayoutSegment hook.\",\"path\":\"13/app/api-reference/functions/use-selected-layout-segment\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSelectedLayoutSegments\",\"description\":\"API Reference for the useSelectedLayoutSegments hook.\",\"path\":\"13/app/api-reference/functions/use-selected-layout-segments\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"next.config.js Options\",\"description\":\"Learn how to configure your application with next.config.js.\",\"path\":\"13/app/api-reference/next-config-js\",\"version\":\"$undefined\",\"children\":[{\"title\":\"appDir\",\"description\":\"Enable the App Router to use layouts, streaming, and more.\",\"path\":\"13/app/api-reference/next-config-js/appDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"assetPrefix\",\"description\":\"Learn how to use the assetPrefix config option to configure your CDN.\",\"path\":\"13/app/api-reference/next-config-js/assetPrefix\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"basePath\",\"description\":\"Use `basePath` to deploy a Next.js application under a sub-path of a domain.\",\"path\":\"13/app/api-reference/next-config-js/basePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"compress\",\"description\":\"Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.\",\"path\":\"13/app/api-reference/next-config-js/compress\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"devIndicators\",\"description\":\"Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.\",\"path\":\"13/app/api-reference/next-config-js/devIndicators\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"distDir\",\"description\":\"Set a custom build directory to use instead of the default .next directory.\",\"path\":\"13/app/api-reference/next-config-js/distDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"env\",\"description\":\"Learn to add and access environment variables in your Next.js application at build time.\",\"path\":\"13/app/api-reference/next-config-js/env\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"eslint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"13/app/api-reference/next-config-js/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"exportPathMap\",\"description\":\"Customize the pages that will be exported as HTML files when using `next export`.\",\"path\":\"13/app/api-reference/next-config-js/exportPathMap\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateBuildId\",\"description\":\"Configure the build id, which is used to identify the current build in which your application is being served.\",\"path\":\"13/app/api-reference/next-config-js/generateBuildId\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateEtags\",\"description\":\"Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.\",\"path\":\"13/app/api-reference/next-config-js/generateEtags\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"Add custom HTTP headers to your Next.js app.\",\"path\":\"13/app/api-reference/next-config-js/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"httpAgentOptions\",\"description\":\"Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.\",\"path\":\"13/app/api-reference/next-config-js/httpAgentOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"images\",\"description\":\"Custom configuration for the next/image loader\",\"path\":\"13/app/api-reference/next-config-js/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"incrementalCacheHandlerPath\",\"description\":\"Configure the Next.js cache used for storing and revalidating data.\",\"path\":\"13/app/api-reference/next-config-js/incrementalCacheHandlerPath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"mdxRs\",\"description\":\"Use the new Rust compiler to compile MDX files in the App Router.\",\"path\":\"13/app/api-reference/next-config-js/mdxRs\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"onDemandEntries\",\"description\":\"Configure how Next.js will dispose and keep in memory pages created in development.\",\"path\":\"13/app/api-reference/next-config-js/onDemandEntries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"optimizePackageImports\",\"description\":\"API Reference for optmizedPackageImports Next.js Config Option\",\"path\":\"13/app/api-reference/next-config-js/optimizePackageImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"output\",\"description\":\"Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.\",\"path\":\"13/app/api-reference/next-config-js/output\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"pageExtensions\",\"description\":\"Extend the default page extensions used by Next.js when resolving pages in the Pages Router.\",\"path\":\"13/app/api-reference/next-config-js/pageExtensions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"poweredByHeader\",\"description\":\"Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.\",\"path\":\"13/app/api-reference/next-config-js/poweredByHeader\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"productionBrowserSourceMaps\",\"description\":\"Enables browser source map generation during the production build.\",\"path\":\"13/app/api-reference/next-config-js/productionBrowserSourceMaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactStrictMode\",\"description\":\"The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in\",\"path\":\"13/app/api-reference/next-config-js/reactStrictMode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirects\",\"description\":\"Add redirects to your Next.js app.\",\"path\":\"13/app/api-reference/next-config-js/redirects\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"rewrites\",\"description\":\"Add rewrites to your Next.js app.\",\"path\":\"13/app/api-reference/next-config-js/rewrites\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverComponentsExternalPackages\",\"description\":\"Opt-out specific dependencies from the Server Components bundling and use native Node.js `require`.\",\"path\":\"13/app/api-reference/next-config-js/serverComponentsExternalPackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"trailingSlash\",\"description\":\"Configure Next.js pages to resolve with or without a trailing slash.\",\"path\":\"13/app/api-reference/next-config-js/trailingSlash\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"transpilePackages\",\"description\":\"Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).\",\"path\":\"13/app/api-reference/next-config-js/transpilePackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"turbo\",\"description\":\"Configure Next.js with Turbopack-specific options\",\"path\":\"13/app/api-reference/next-config-js/turbo\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"typedRoutes\",\"description\":\"Enable experimental support for statically typed links.\",\"path\":\"13/app/api-reference/next-config-js/typedRoutes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"typescript\",\"description\":\"Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.\",\"path\":\"13/app/api-reference/next-config-js/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"urlImports\",\"description\":\"Configure Next.js to allow importing modules from external URLs (experimental).\",\"path\":\"13/app/api-reference/next-config-js/urlImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webpack\",\"description\":\"Learn how to customize the webpack config used by Next.js\",\"path\":\"13/app/api-reference/next-config-js/webpack\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webVitalsAttribution\",\"description\":\"Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.\",\"path\":\"13/app/api-reference/next-config-js/webVitalsAttribution\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"create-next-app\",\"description\":\"Create Next.js apps in one command with create-next-app.\",\"path\":\"13/app/api-reference/create-next-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Edge Runtime\",\"description\":\"API Reference for the Edge Runtime.\",\"path\":\"13/app/api-reference/edge\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Next.js CLI\",\"description\":\"The Next.js CLI allows you to start, build, and export your application. Learn more about it here.\",\"path\":\"13/app/api-reference/next-cli\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Building Your Application\",\"description\":\"Learn how to use Next.js features to build your application.\",\"path\":\"13/pages/building-your-application\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Routing\",\"description\":\"Learn the fundamentals of routing for front-end applications with the Pages Router.\",\"path\":\"13/pages/building-your-application/routing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Pages and Layouts\",\"description\":\"Create your first page and shared layout with the Pages Router.\",\"path\":\"13/pages/building-your-application/routing/pages-and-layouts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Dynamic Routes\",\"description\":\"Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.\",\"path\":\"13/pages/building-your-application/routing/dynamic-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Linking and Navigating\",\"description\":\"Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.\",\"path\":\"13/pages/building-your-application/routing/linking-and-navigating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom App\",\"description\":\"Control page initialization and add a layout that persists for all pages by overriding the default App component used by Next.js.\",\"path\":\"13/pages/building-your-application/routing/custom-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Document\",\"description\":\"Extend the default document markup added by Next.js.\",\"path\":\"13/pages/building-your-application/routing/custom-document\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Errors\",\"description\":\"Override and extend the built-in Error page to handle custom errors.\",\"path\":\"13/pages/building-your-application/routing/custom-error\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"API Routes\",\"description\":\"Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.\",\"path\":\"13/pages/building-your-application/routing/api-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Internationalization\",\"description\":\"Next.js has built-in support for internationalized routing and language detection. Learn more here.\",\"path\":\"13/pages/building-your-application/routing/internationalization\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Authenticating\",\"description\":\"Learn about authentication patterns in Next.js apps and explore a few examples.\",\"path\":\"13/pages/building-your-application/routing/authenticating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Middleware\",\"description\":\"Learn how to use Middleware to run code before a request is completed.\",\"path\":\"13/pages/building-your-application/routing/middleware\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Rendering\",\"description\":\"Learn the fundamentals of rendering in React and Next.js.\",\"path\":\"13/pages/building-your-application/rendering\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Server-side Rendering (SSR)\",\"description\":\"Use Server-side Rendering to render pages on each request.\",\"path\":\"13/pages/building-your-application/rendering/server-side-rendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Site Generation (SSG)\",\"description\":\"Use Static Site Generation (SSG) to pre-render pages at build time.\",\"path\":\"13/pages/building-your-application/rendering/static-site-generation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Incremental Static Regeneration (ISR)\",\"description\":\"Learn how to create or update static pages at runtime with Incremental Static Regeneration.\",\"path\":\"13/pages/building-your-application/rendering/incremental-static-regeneration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Automatic Static Optimization\",\"description\":\"Next.js automatically optimizes your app to be static HTML whenever possible. Learn how it works here.\",\"path\":\"13/pages/building-your-application/rendering/automatic-static-optimization\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client-side Rendering (CSR)\",\"description\":\"Learn how to implement client-side rendering in the Pages Router.\",\"path\":\"13/pages/building-your-application/rendering/client-side-rendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Edge and Node.js Runtimes\",\"description\":\"Learn more about the switchable runtimes (Edge and Node.js) in Next.js.\",\"path\":\"13/pages/building-your-application/rendering/edge-and-nodejs-runtimes\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Data Fetching\",\"description\":\"Next.js allows you to fetch data in multiple ways, with pre-rendering, server-side rendering or static-site generation, and incremental static regeneration. Learn how to manage your application data in Next.js.\",\"path\":\"13/pages/building-your-application/data-fetching\",\"version\":\"$undefined\",\"children\":[{\"title\":\"getStaticProps\",\"description\":\"Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js.\",\"path\":\"13/pages/building-your-application/data-fetching/get-static-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticPaths\",\"description\":\"Fetch data and generate static pages with `getStaticPaths`. Learn more about this API for data fetching in Next.js.\",\"path\":\"13/pages/building-your-application/data-fetching/get-static-paths\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Forms and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"13/pages/building-your-application/data-fetching/forms-and-mutations\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getServerSideProps\",\"description\":\"Fetch data on each request with `getServerSideProps`.\",\"path\":\"13/pages/building-your-application/data-fetching/get-server-side-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Incremental Static Regeneration\",\"description\":\"Learn how to create or update static pages at runtime with Incremental Static Regeneration.\",\"path\":\"13/pages/building-your-application/data-fetching/incremental-static-regeneration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client-side Fetching\",\"description\":\"Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more.\",\"path\":\"13/pages/building-your-application/data-fetching/client-side\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Styling\",\"description\":\"Learn the different ways you can style your Next.js application.\",\"path\":\"13/pages/building-your-application/styling\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CSS Modules\",\"description\":\"Style your Next.js Application using CSS Modules.\",\"path\":\"13/pages/building-your-application/styling/css-modules\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Tailwind CSS\",\"description\":\"Style your Next.js Application using Tailwind CSS.\",\"path\":\"13/pages/building-your-application/styling/tailwind-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CSS-in-JS\",\"description\":\"Use CSS-in-JS libraries with Next.js\",\"path\":\"13/pages/building-your-application/styling/css-in-js\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Sass\",\"description\":\"Learn how to use Sass in your Next.js application.\",\"path\":\"13/pages/building-your-application/styling/sass\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Optimizing\",\"description\":\"Optimize your Next.js application for best performance and user experience.\",\"path\":\"13/pages/building-your-application/optimizing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Images\",\"description\":\"Optimize your images with the built-in `next/image` component.\",\"path\":\"13/pages/building-your-application/optimizing/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fonts\",\"description\":\"Optimize your application's web fonts with the built-in `next/font` loaders.\",\"path\":\"13/pages/building-your-application/optimizing/fonts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Scripts\",\"description\":\"Optimize 3rd party scripts with the built-in Script component.\",\"path\":\"13/pages/building-your-application/optimizing/scripts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Assets\",\"description\":\"Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.\",\"path\":\"13/pages/building-your-application/optimizing/static-assets\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Lazy Loading\",\"description\":\"Lazy load imported libraries and React Components to improve your application's loading performance.\",\"path\":\"13/pages/building-your-application/optimizing/lazy-loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Analytics\",\"description\":\"Measure and track page performance using Next.js Speed Insights\",\"path\":\"13/pages/building-your-application/optimizing/analytics\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"OpenTelemetry\",\"description\":\"Learn how to instrument your Next.js app with OpenTelemetry.\",\"path\":\"13/pages/building-your-application/optimizing/open-telemetry\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Instrumentation\",\"description\":\"Learn how to use instrumentation to run code at server startup in your Next.js app\",\"path\":\"13/pages/building-your-application/optimizing/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Testing\",\"description\":\"Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library.\",\"path\":\"13/pages/building-your-application/optimizing/testing\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuring\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"13/pages/building-your-application/configuring\",\"version\":\"$undefined\",\"children\":[{\"title\":\"TypeScript\",\"description\":\"Next.js provides a TypeScript-first development experience for building your React application.\",\"path\":\"13/pages/building-your-application/configuring/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ESLint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"13/pages/building-your-application/configuring/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Environment Variables\",\"description\":\"Learn to add and access environment variables in your Next.js application.\",\"path\":\"13/pages/building-your-application/configuring/environment-variables\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Absolute Imports and Module Path Aliases\",\"description\":\"Configure module path aliases that allow you to remap certain import paths.\",\"path\":\"13/pages/building-your-application/configuring/absolute-imports-and-module-aliases\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"src Directory\",\"description\":\"Save pages under the `src` directory as an alternative to the root `pages` directory.\",\"path\":\"13/pages/building-your-application/configuring/src-directory\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"MDX\",\"description\":\"Learn how to configure MDX to write JSX in your markdown files.\",\"path\":\"13/pages/building-your-application/configuring/mdx\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"AMP\",\"description\":\"With minimal config, and without leaving React, you can start adding AMP and improve the performance and speed of your pages.\",\"path\":\"13/pages/building-your-application/configuring/amp\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Babel\",\"description\":\"Extend the babel preset added by Next.js with your own configs.\",\"path\":\"13/pages/building-your-application/configuring/babel\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"PostCSS\",\"description\":\"Extend the PostCSS config and plugins added by Next.js with your own.\",\"path\":\"13/pages/building-your-application/configuring/post-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Server\",\"description\":\"Start a Next.js app programmatically using a custom server.\",\"path\":\"13/pages/building-your-application/configuring/custom-server\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Draft Mode\",\"description\":\"Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.\",\"path\":\"13/pages/building-your-application/configuring/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Error Handling\",\"description\":\"Handle errors in your Next.js app.\",\"path\":\"13/pages/building-your-application/configuring/error-handling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Debugging\",\"description\":\"Learn how to debug your Next.js application with VS Code or Chrome DevTools.\",\"path\":\"13/pages/building-your-application/configuring/debugging\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Preview Mode\",\"description\":\"Next.js has the preview mode for statically generated pages. You can learn how it works here.\",\"path\":\"13/pages/building-your-application/configuring/preview-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Content Security Policy\",\"description\":\"Learn how to set a Content Security Policy (CSP) for your Next.js application.\",\"path\":\"13/pages/building-your-application/configuring/content-security-policy\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Deploying\",\"description\":\"Learn how to deploy your Next.js app to production, either managed or self-hosted.\",\"path\":\"13/pages/building-your-application/deploying\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Going to Production\",\"description\":\"Before taking your Next.js application to production, here are some recommendations to ensure the best user experience.\",\"path\":\"13/pages/building-your-application/deploying/production-checklist\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Exports\",\"description\":\"Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.\",\"path\":\"13/pages/building-your-application/deploying/static-exports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Multi Zones\",\"description\":\"Learn how to use multi zones to deploy multiple Next.js apps as a single app.\",\"path\":\"13/pages/building-your-application/deploying/multi-zones\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Continuous Integration (CI) Build Caching\",\"description\":\"Learn how to configure CI to cache Next.js builds\",\"path\":\"13/pages/building-your-application/deploying/ci-build-caching\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Upgrading\",\"description\":\"Learn how to upgrade to the latest versions of Next.js.\",\"path\":\"13/pages/building-your-application/upgrading\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Codemods\",\"description\":\"Use codemods to upgrade your Next.js codebase when new features are released.\",\"path\":\"13/pages/building-your-application/upgrading/codemods\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"From Pages to App\",\"description\":\"Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.\",\"path\":\"13/pages/building-your-application/upgrading/app-router-migration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 13\",\"description\":\"Upgrade your Next.js Application from Version 12 to 13.\",\"path\":\"13/pages/building-your-application/upgrading/version-13\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 12\",\"description\":\"Upgrade your Next.js Application from Version 11 to Version 12.\",\"path\":\"13/pages/building-your-application/upgrading/version-12\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 11\",\"description\":\"Upgrade your Next.js Application from Version 10 to Version 11.\",\"path\":\"13/pages/building-your-application/upgrading/version-11\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 10\",\"description\":\"Upgrade your Next.js Application from Version 9 to Version 10.\",\"path\":\"13/pages/building-your-application/upgrading/version-10\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 9\",\"description\":\"Upgrade your Next.js Application from Version 8 to Version 9.\",\"path\":\"13/pages/building-your-application/upgrading/version-9\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"API Reference\",\"description\":\"Next.js API Reference for the Pages Router.\",\"path\":\"13/pages/api-reference\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Components\",\"description\":\"API Reference for Next.js built-in components in the Pages Router.\",\"path\":\"13/pages/api-reference/components\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Font\",\"description\":\"API Reference for the Font Module\",\"path\":\"13/pages/api-reference/components/font\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cHead\u003e\",\"description\":\"Add custom elements to the `head` of your page with the built-in Head component.\",\"path\":\"13/pages/api-reference/components/head\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e\",\"description\":\"Optimize Images in your Next.js Application using the built-in `next/image` Component.\",\"path\":\"13/pages/api-reference/components/image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e (Legacy)\",\"description\":\"Backwards compatible Image Optimization with the Legacy Image component.\",\"path\":\"13/pages/api-reference/components/image-legacy\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cLink\u003e\",\"description\":\"API reference for the \u003cLink\u003e component.\",\"path\":\"13/pages/api-reference/components/link\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cScript\u003e\",\"description\":\"Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.\",\"path\":\"13/pages/api-reference/components/script\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Functions\",\"description\":\"API Reference for Functions and Hooks in Pages Router.\",\"path\":\"13/pages/api-reference/functions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"getInitialProps\",\"description\":\"Fetch dynamic data on the server for your React component with getInitialProps.\",\"path\":\"13/pages/api-reference/functions/get-initial-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getServerSideProps\",\"description\":\"API reference for `getServerSideProps`. Learn how to fetch data on each request with Next.js.\",\"path\":\"13/pages/api-reference/functions/get-server-side-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticPaths\",\"description\":\"API reference for `getStaticPaths`. Learn how to fetch data and generate static pages with `getStaticPaths`.\",\"path\":\"13/pages/api-reference/functions/get-static-paths\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticProps\",\"description\":\"API reference for `getStaticProps`. Learn how to use `getStaticProps` to generate static pages with Next.js.\",\"path\":\"13/pages/api-reference/functions/get-static-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextRequest and NextResponse\",\"description\":\"Learn about the server-only helpers for Middleware and Edge API Routes.\",\"path\":\"13/pages/api-reference/functions/next-server\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useAmp\",\"description\":\"Enable AMP in a page, and control the way Next.js adds AMP to the page with the AMP config.\",\"path\":\"13/pages/api-reference/functions/use-amp\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useReportWebVitals\",\"description\":\"useReportWebVitals\",\"path\":\"13/pages/api-reference/functions/use-report-web-vitals\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useRouter\",\"description\":\"Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.\",\"path\":\"13/pages/api-reference/functions/use-router\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"next.config.js Options\",\"description\":\"Learn about the options available in next.config.js for the Pages Router.\",\"path\":\"13/pages/api-reference/next-config-js\",\"version\":\"$undefined\",\"children\":[{\"title\":\"assetPrefix\",\"description\":\"Learn how to use the assetPrefix config option to configure your CDN.\",\"path\":\"13/pages/api-reference/next-config-js/assetPrefix\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"basePath\",\"description\":\"Use `basePath` to deploy a Next.js application under a sub-path of a domain.\",\"path\":\"13/pages/api-reference/next-config-js/basePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"compress\",\"description\":\"Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.\",\"path\":\"13/pages/api-reference/next-config-js/compress\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"devIndicators\",\"description\":\"Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.\",\"path\":\"13/pages/api-reference/next-config-js/devIndicators\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"distDir\",\"description\":\"Set a custom build directory to use instead of the default .next directory.\",\"path\":\"13/pages/api-reference/next-config-js/distDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"env\",\"description\":\"Learn to add and access environment variables in your Next.js application at build time.\",\"path\":\"13/pages/api-reference/next-config-js/env\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"eslint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"13/pages/api-reference/next-config-js/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"exportPathMap\",\"description\":\"Customize the pages that will be exported as HTML files when using `next export`.\",\"path\":\"13/pages/api-reference/next-config-js/exportPathMap\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateBuildId\",\"description\":\"Configure the build id, which is used to identify the current build in which your application is being served.\",\"path\":\"13/pages/api-reference/next-config-js/generateBuildId\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateEtags\",\"description\":\"Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.\",\"path\":\"13/pages/api-reference/next-config-js/generateEtags\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"Add custom HTTP headers to your Next.js app.\",\"path\":\"13/pages/api-reference/next-config-js/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"httpAgentOptions\",\"description\":\"Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.\",\"path\":\"13/pages/api-reference/next-config-js/httpAgentOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"images\",\"description\":\"Custom configuration for the next/image loader\",\"path\":\"13/pages/api-reference/next-config-js/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"onDemandEntries\",\"description\":\"Configure how Next.js will dispose and keep in memory pages created in development.\",\"path\":\"13/pages/api-reference/next-config-js/onDemandEntries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"output\",\"description\":\"Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.\",\"path\":\"13/pages/api-reference/next-config-js/output\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"pageExtensions\",\"description\":\"Extend the default page extensions used by Next.js when resolving pages in the Pages Router.\",\"path\":\"13/pages/api-reference/next-config-js/pageExtensions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"poweredByHeader\",\"description\":\"Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.\",\"path\":\"13/pages/api-reference/next-config-js/poweredByHeader\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"productionBrowserSourceMaps\",\"description\":\"Enables browser source map generation during the production build.\",\"path\":\"13/pages/api-reference/next-config-js/productionBrowserSourceMaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactStrictMode\",\"description\":\"The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in\",\"path\":\"13/pages/api-reference/next-config-js/reactStrictMode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirects\",\"description\":\"Add redirects to your Next.js app.\",\"path\":\"13/pages/api-reference/next-config-js/redirects\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"rewrites\",\"description\":\"Add rewrites to your Next.js app.\",\"path\":\"13/pages/api-reference/next-config-js/rewrites\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Runtime Config\",\"description\":\"Add client and server runtime configuration to your Next.js app.\",\"path\":\"13/pages/api-reference/next-config-js/runtime-configuration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"trailingSlash\",\"description\":\"Configure Next.js pages to resolve with or without a trailing slash.\",\"path\":\"13/pages/api-reference/next-config-js/trailingSlash\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"transpilePackages\",\"description\":\"Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).\",\"path\":\"13/pages/api-reference/next-config-js/transpilePackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"turbo\",\"description\":\"Configure Next.js with Turbopack-specific options\",\"path\":\"13/pages/api-reference/next-config-js/turbo\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"typescript\",\"description\":\"Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.\",\"path\":\"13/pages/api-reference/next-config-js/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"urlImports\",\"description\":\"Configure Next.js to allow importing modules from external URLs (experimental).\",\"path\":\"13/pages/api-reference/next-config-js/urlImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webpack\",\"description\":\"Learn how to customize the webpack config used by Next.js\",\"path\":\"13/pages/api-reference/next-config-js/webpack\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webVitalsAttribution\",\"description\":\"Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.\",\"path\":\"13/pages/api-reference/next-config-js/webVitalsAttribution\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"create-next-app\",\"description\":\"create-next-app\",\"path\":\"13/pages/api-reference/create-next-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Next.js CLI\",\"description\":\"Next.js CLI\",\"path\":\"13/pages/api-reference/next-cli\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Edge Runtime\",\"description\":\"API Reference for the Edge Runtime.\",\"path\":\"13/pages/api-reference/edge\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Architecture\",\"description\":\"How Next.js Works\",\"path\":\"13/architecture\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Accessibility\",\"description\":\"The built-in accessibility features of Next.js.\",\"path\":\"13/architecture/accessibility\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fast Refresh\",\"description\":\"Fast Refresh is a hot module reloading experience that gives you instantaneous feedback on edits made to your React components.\",\"path\":\"13/architecture/fast-refresh\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Next.js Compiler\",\"description\":\"Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.\",\"path\":\"13/architecture/nextjs-compiler\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Supported Browsers\",\"description\":\"Browser support and which JavaScript features are supported by Next.js.\",\"path\":\"13/architecture/supported-browsers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Turbopack\",\"description\":\"Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.\",\"path\":\"13/architecture/turbopack\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Community\",\"description\":\"Get involved in the Next.js community.\",\"path\":\"13/community\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Contribution Guide\",\"description\":\"Learn how to contribute to Next.js Documentation\",\"path\":\"13/community/contribution-guide\",\"version\":\"$undefined\",\"children\":[]}]}],\"14\":[{\"title\":\"Getting Started\",\"description\":\"Learn how to create full-stack web applications with Next.js.\",\"path\":\"14/getting-started\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Installation\",\"description\":\"Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file.\",\"path\":\"14/getting-started/installation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Project Structure\",\"description\":\"A list of folders and files conventions in a Next.js project\",\"path\":\"14/getting-started/project-structure\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Building Your Application\",\"description\":\"Learn how to use Next.js features to build your application.\",\"path\":\"14/app/building-your-application\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Routing\",\"description\":\"Learn the fundamentals of routing for front-end applications.\",\"path\":\"14/app/building-your-application/routing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Defining Routes\",\"description\":\"Learn how to create your first route in Next.js.\",\"path\":\"14/app/building-your-application/routing/defining-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Pages and Layouts\",\"description\":\"Create your first page and shared layout with the App Router.\",\"path\":\"14/app/building-your-application/routing/pages-and-layouts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Linking and Navigating\",\"description\":\"Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.\",\"path\":\"14/app/building-your-application/routing/linking-and-navigating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Loading UI and Streaming\",\"description\":\"Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.\",\"path\":\"14/app/building-your-application/routing/loading-ui-and-streaming\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Error Handling\",\"description\":\"Handle runtime errors by automatically wrapping route segments and their nested children in a React Error Boundary.\",\"path\":\"14/app/building-your-application/routing/error-handling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Redirecting\",\"description\":\"Learn the different ways to handle redirects in Next.js.\",\"path\":\"14/app/building-your-application/routing/redirecting\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Groups\",\"description\":\"Route Groups can be used to partition your Next.js application into different sections.\",\"path\":\"14/app/building-your-application/routing/route-groups\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Project Organization\",\"description\":\"Learn how to organize your Next.js project and colocate files.\",\"path\":\"14/app/building-your-application/routing/colocation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Dynamic Routes\",\"description\":\"Dynamic Routes can be used to programmatically generate route segments from dynamic data.\",\"path\":\"14/app/building-your-application/routing/dynamic-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Parallel Routes\",\"description\":\"Simultaneously render one or more pages in the same view that can be navigated independently. A pattern for highly dynamic applications.\",\"path\":\"14/app/building-your-application/routing/parallel-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Intercepting Routes\",\"description\":\"Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals.\",\"path\":\"14/app/building-your-application/routing/intercepting-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Handlers\",\"description\":\"Create custom request handlers for a given route using the Web's Request and Response APIs.\",\"path\":\"14/app/building-your-application/routing/route-handlers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Middleware\",\"description\":\"Learn how to use Middleware to run code before a request is completed.\",\"path\":\"14/app/building-your-application/routing/middleware\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Internationalization\",\"description\":\"Add support for multiple languages with internationalized routing and localized content.\",\"path\":\"14/app/building-your-application/routing/internationalization\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Data Fetching\",\"description\":\"Learn how to fetch, cache, revalidate, and mutate data with Next.js.\",\"path\":\"14/app/building-your-application/data-fetching\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Fetching, Caching, and Revalidating\",\"description\":\"Learn how to fetch, cache, and revalidate data in your Next.js application.\",\"path\":\"14/app/building-your-application/data-fetching/fetching-caching-and-revalidating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Server Actions and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"14/app/building-your-application/data-fetching/server-actions-and-mutations\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Data Fetching Patterns and Best Practices\",\"description\":\"Learn about common data fetching patterns in React and Next.js.\",\"path\":\"14/app/building-your-application/data-fetching/patterns\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Rendering\",\"description\":\"Learn the differences between Next.js rendering environments, strategies, and runtimes.\",\"path\":\"14/app/building-your-application/rendering\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Server Components\",\"description\":\"Learn how you can use React Server Components to render parts of your application on the server.\",\"path\":\"14/app/building-your-application/rendering/server-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client Components\",\"description\":\"Learn how to use Client Components to render parts of your application on the client.\",\"path\":\"14/app/building-your-application/rendering/client-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Composition Patterns\",\"description\":\"Recommended patterns for using Server and Client Components.\",\"path\":\"14/app/building-your-application/rendering/composition-patterns\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Edge and Node.js Runtimes\",\"description\":\"Learn about the switchable runtimes (Edge and Node.js) in Next.js.\",\"path\":\"14/app/building-your-application/rendering/edge-and-nodejs-runtimes\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Caching\",\"description\":\"An overview of caching mechanisms in Next.js.\",\"path\":\"14/app/building-your-application/caching\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Styling\",\"description\":\"Learn the different ways you can style your Next.js application.\",\"path\":\"14/app/building-your-application/styling\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CSS Modules\",\"description\":\"Style your Next.js Application with CSS Modules, Global Styles, and external stylesheets.\",\"path\":\"14/app/building-your-application/styling/css-modules\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Tailwind CSS\",\"description\":\"Style your Next.js Application using Tailwind CSS.\",\"path\":\"14/app/building-your-application/styling/tailwind-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CSS-in-JS\",\"description\":\"Use CSS-in-JS libraries with Next.js\",\"path\":\"14/app/building-your-application/styling/css-in-js\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Sass\",\"description\":\"Style your Next.js application using Sass.\",\"path\":\"14/app/building-your-application/styling/sass\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Optimizing\",\"description\":\"Optimize your Next.js application for best performance and user experience.\",\"path\":\"14/app/building-your-application/optimizing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Images\",\"description\":\"Optimize your images with the built-in `next/image` component.\",\"path\":\"14/app/building-your-application/optimizing/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Videos\",\"description\":\"Recommendations and best practices for optimizing videos in your Next.js application.\",\"path\":\"14/app/building-your-application/optimizing/videos\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fonts\",\"description\":\"Optimize your application's web fonts with the built-in `next/font` loaders.\",\"path\":\"14/app/building-your-application/optimizing/fonts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Metadata\",\"description\":\"Use the Metadata API to define metadata in any layout or page.\",\"path\":\"14/app/building-your-application/optimizing/metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Scripts\",\"description\":\"Optimize 3rd party scripts with the built-in Script component.\",\"path\":\"14/app/building-your-application/optimizing/scripts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Bundle Analyzer\",\"description\":\"Analyze the size of your JavaScript bundles using the @next/bundle-analyzer plugin.\",\"path\":\"14/app/building-your-application/optimizing/bundle-analyzer\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Lazy Loading\",\"description\":\"Lazy load imported libraries and React Components to improve your application's loading performance.\",\"path\":\"14/app/building-your-application/optimizing/lazy-loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Analytics\",\"description\":\"Measure and track page performance using Next.js Speed Insights\",\"path\":\"14/app/building-your-application/optimizing/analytics\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Instrumentation\",\"description\":\"Learn how to use instrumentation to run code at server startup in your Next.js app\",\"path\":\"14/app/building-your-application/optimizing/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"OpenTelemetry\",\"description\":\"Learn how to instrument your Next.js app with OpenTelemetry.\",\"path\":\"14/app/building-your-application/optimizing/open-telemetry\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Assets\",\"description\":\"Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.\",\"path\":\"14/app/building-your-application/optimizing/static-assets\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Third Party Libraries\",\"description\":\"Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.\",\"path\":\"14/app/building-your-application/optimizing/third-party-libraries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Memory Usage\",\"description\":\"Optimize memory used by your application in development and production.\",\"path\":\"14/app/building-your-application/optimizing/memory-usage\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuring\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"14/app/building-your-application/configuring\",\"version\":\"$undefined\",\"children\":[{\"title\":\"TypeScript\",\"description\":\"Next.js provides a TypeScript-first development experience for building your React application.\",\"path\":\"14/app/building-your-application/configuring/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ESLint\",\"description\":\"Next.js provides an integrated ESLint experience by default. These conformance rules help you use Next.js in an optimal way.\",\"path\":\"14/app/building-your-application/configuring/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Environment Variables\",\"description\":\"Learn to add and access environment variables in your Next.js application.\",\"path\":\"14/app/building-your-application/configuring/environment-variables\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Absolute Imports and Module Path Aliases\",\"description\":\"Configure module path aliases that allow you to remap certain import paths.\",\"path\":\"14/app/building-your-application/configuring/absolute-imports-and-module-aliases\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"MDX\",\"description\":\"Learn how to configure MDX and use it in your Next.js apps.\",\"path\":\"14/app/building-your-application/configuring/mdx\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"src Directory\",\"description\":\"Save pages under the `src` directory as an alternative to the root `pages` directory.\",\"path\":\"14/app/building-your-application/configuring/src-directory\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Draft Mode\",\"description\":\"Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with App Router here.\",\"path\":\"14/app/building-your-application/configuring/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Content Security Policy\",\"description\":\"Learn how to set a Content Security Policy (CSP) for your Next.js application.\",\"path\":\"14/app/building-your-application/configuring/content-security-policy\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Testing\",\"description\":\"Learn how to set up Next.js with four commonly used testing tools — Cypress, Playwright, Vitest, and Jest.\",\"path\":\"14/app/building-your-application/testing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Vitest\",\"description\":\"Learn how to set up Vitest with Next.js for Unit Testing.\",\"path\":\"14/app/building-your-application/testing/vitest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Jest\",\"description\":\"Learn how to set up Jest with Next.js for Unit Testing and Snapshot Testing.\",\"path\":\"14/app/building-your-application/testing/jest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Playwright\",\"description\":\"Learn how to set up Playwright with Next.js for End-to-End (E2E) testing.\",\"path\":\"14/app/building-your-application/testing/playwright\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Cypress\",\"description\":\"Learn how to set up Cypress with Next.js for End-to-End (E2E) and Component Testing.\",\"path\":\"14/app/building-your-application/testing/cypress\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Authentication\",\"description\":\"Learn how to implement authentication in Next.js, covering best practices, securing routes, authorization techniques, and session management.\",\"path\":\"14/app/building-your-application/authentication\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Deploying\",\"description\":\"Learn how to deploy your Next.js app to production, either managed or self-hosted.\",\"path\":\"14/app/building-your-application/deploying\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Production Checklist\",\"description\":\"Recommendations to ensure the best performance and user experience before taking your Next.js application to production.\",\"path\":\"14/app/building-your-application/deploying/production-checklist\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Exports\",\"description\":\"Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.\",\"path\":\"14/app/building-your-application/deploying/static-exports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Multi-Zones\",\"description\":\"Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain.\",\"path\":\"14/app/building-your-application/deploying/multi-zones\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Upgrading\",\"description\":\"Learn how to upgrade to the latest versions of Next.js.\",\"path\":\"14/app/building-your-application/upgrading\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Codemods\",\"description\":\"Use codemods to upgrade your Next.js codebase when new features are released.\",\"path\":\"14/app/building-your-application/upgrading/codemods\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"App Router Migration\",\"description\":\"Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.\",\"path\":\"14/app/building-your-application/upgrading/app-router-migration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 14\",\"description\":\"Upgrade your Next.js Application from Version 13 to 14.\",\"path\":\"14/app/building-your-application/upgrading/version-14\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Vite\",\"description\":\"Learn how to migrate your existing React application from Vite to Next.js.\",\"path\":\"14/app/building-your-application/upgrading/from-vite\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Create React App\",\"description\":\"Learn how to migrate your existing React application from Create React App to Next.js.\",\"path\":\"14/app/building-your-application/upgrading/from-create-react-app\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"API Reference\",\"description\":\"Next.js API Reference for the App Router.\",\"path\":\"14/app/api-reference\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Components\",\"description\":\"API Reference for Next.js built-in components.\",\"path\":\"14/app/api-reference/components\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Font\",\"description\":\"Optimizing loading web fonts with the built-in `next/font` loaders.\",\"path\":\"14/app/api-reference/components/font\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e\",\"description\":\"Optimize Images in your Next.js Application using the built-in `next/image` Component.\",\"path\":\"14/app/api-reference/components/image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cLink\u003e\",\"description\":\"Enable fast client-side navigation with the built-in `next/link` component.\",\"path\":\"14/app/api-reference/components/link\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cScript\u003e\",\"description\":\"Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.\",\"path\":\"14/app/api-reference/components/script\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"File Conventions\",\"description\":\"API Reference for Next.js Special Files.\",\"path\":\"14/app/api-reference/file-conventions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"default.js\",\"description\":\"API Reference for the default.js file.\",\"path\":\"14/app/api-reference/file-conventions/default\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"error.js\",\"description\":\"API reference for the error.js special file.\",\"path\":\"14/app/api-reference/file-conventions/error\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"instrumentation.js\",\"description\":\"API reference for the instrumentation.js file.\",\"path\":\"14/app/api-reference/file-conventions/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"layout.js\",\"description\":\"API reference for the layout.js file.\",\"path\":\"14/app/api-reference/file-conventions/layout\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"loading.js\",\"description\":\"API reference for the loading.js file.\",\"path\":\"14/app/api-reference/file-conventions/loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"middleware.js\",\"description\":\"API reference for the middleware.js file.\",\"path\":\"14/app/api-reference/file-conventions/middleware\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"not-found.js\",\"description\":\"API reference for the not-found.js file.\",\"path\":\"14/app/api-reference/file-conventions/not-found\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"page.js\",\"description\":\"API reference for the page.js file.\",\"path\":\"14/app/api-reference/file-conventions/page\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"route.js\",\"description\":\"API reference for the route.js special file.\",\"path\":\"14/app/api-reference/file-conventions/route\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Segment Config\",\"description\":\"Learn about how to configure options for Next.js route segments.\",\"path\":\"14/app/api-reference/file-conventions/route-segment-config\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"template.js\",\"description\":\"API Reference for the template.js file.\",\"path\":\"14/app/api-reference/file-conventions/template\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Metadata Files\",\"description\":\"API documentation for the metadata file conventions.\",\"path\":\"14/app/api-reference/file-conventions/metadata\",\"version\":\"$undefined\",\"children\":[{\"title\":\"favicon, icon, and apple-icon\",\"description\":\"API Reference for the Favicon, Icon and Apple Icon file conventions.\",\"path\":\"14/app/api-reference/file-conventions/metadata/app-icons\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"manifest.json\",\"description\":\"API Reference for manifest.json file.\",\"path\":\"14/app/api-reference/file-conventions/metadata/manifest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"opengraph-image and twitter-image\",\"description\":\"API Reference for the Open Graph Image and Twitter Image file conventions.\",\"path\":\"14/app/api-reference/file-conventions/metadata/opengraph-image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"robots.txt\",\"description\":\"API Reference for robots.txt file.\",\"path\":\"14/app/api-reference/file-conventions/metadata/robots\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"sitemap.xml\",\"description\":\"API Reference for the sitemap.xml file.\",\"path\":\"14/app/api-reference/file-conventions/metadata/sitemap\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"Functions\",\"description\":\"API Reference for Next.js Functions and Hooks.\",\"path\":\"14/app/api-reference/functions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"cookies\",\"description\":\"API Reference for the cookies function.\",\"path\":\"14/app/api-reference/functions/cookies\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"draftMode\",\"description\":\"API Reference for the draftMode function.\",\"path\":\"14/app/api-reference/functions/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"fetch\",\"description\":\"API reference for the extended fetch function.\",\"path\":\"14/app/api-reference/functions/fetch\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateImageMetadata\",\"description\":\"Learn how to generate multiple images in a single Metadata API special file.\",\"path\":\"14/app/api-reference/functions/generate-image-metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateMetadata\",\"description\":\"Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.\",\"path\":\"14/app/api-reference/functions/generate-metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateSitemaps\",\"description\":\"Learn how to use the generateSiteMaps function to create multiple sitemaps for your application.\",\"path\":\"14/app/api-reference/functions/generate-sitemaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateStaticParams\",\"description\":\"API reference for the generateStaticParams function.\",\"path\":\"14/app/api-reference/functions/generate-static-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateViewport\",\"description\":\"API Reference for the generateViewport function.\",\"path\":\"14/app/api-reference/functions/generate-viewport\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"API reference for the headers function.\",\"path\":\"14/app/api-reference/functions/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ImageResponse\",\"description\":\"API Reference for the ImageResponse constructor.\",\"path\":\"14/app/api-reference/functions/image-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextRequest\",\"description\":\"API Reference for NextRequest.\",\"path\":\"14/app/api-reference/functions/next-request\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextResponse\",\"description\":\"API Reference for NextResponse.\",\"path\":\"14/app/api-reference/functions/next-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"notFound\",\"description\":\"API Reference for the notFound function.\",\"path\":\"14/app/api-reference/functions/not-found\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"permanentRedirect\",\"description\":\"API Reference for the permanentRedirect function.\",\"path\":\"14/app/api-reference/functions/permanentRedirect\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirect\",\"description\":\"API Reference for the redirect function.\",\"path\":\"14/app/api-reference/functions/redirect\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"revalidatePath\",\"description\":\"API Reference for the revalidatePath function.\",\"path\":\"14/app/api-reference/functions/revalidatePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"revalidateTag\",\"description\":\"API Reference for the revalidateTag function.\",\"path\":\"14/app/api-reference/functions/revalidateTag\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"unstable_cache\",\"description\":\"API Reference for the unstable_cache function.\",\"path\":\"14/app/api-reference/functions/unstable_cache\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"unstable_noStore\",\"description\":\"API Reference for the unstable_noStore function.\",\"path\":\"14/app/api-reference/functions/unstable_noStore\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useParams\",\"description\":\"API Reference for the useParams hook.\",\"path\":\"14/app/api-reference/functions/use-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"usePathname\",\"description\":\"API Reference for the usePathname hook.\",\"path\":\"14/app/api-reference/functions/use-pathname\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useReportWebVitals\",\"description\":\"API Reference for the useReportWebVitals function.\",\"path\":\"14/app/api-reference/functions/use-report-web-vitals\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useRouter\",\"description\":\"API reference for the useRouter hook.\",\"path\":\"14/app/api-reference/functions/use-router\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSearchParams\",\"description\":\"API Reference for the useSearchParams hook.\",\"path\":\"14/app/api-reference/functions/use-search-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSelectedLayoutSegment\",\"description\":\"API Reference for the useSelectedLayoutSegment hook.\",\"path\":\"14/app/api-reference/functions/use-selected-layout-segment\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSelectedLayoutSegments\",\"description\":\"API Reference for the useSelectedLayoutSegments hook.\",\"path\":\"14/app/api-reference/functions/use-selected-layout-segments\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"userAgent\",\"description\":\"The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request.\",\"path\":\"14/app/api-reference/functions/userAgent\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"next.config.js Options\",\"description\":\"Learn how to configure your application with next.config.js.\",\"path\":\"14/app/api-reference/next-config-js\",\"version\":\"$undefined\",\"children\":[{\"title\":\"appDir\",\"description\":\"Enable the App Router to use layouts, streaming, and more.\",\"path\":\"14/app/api-reference/next-config-js/appDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"assetPrefix\",\"description\":\"Learn how to use the assetPrefix config option to configure your CDN.\",\"path\":\"14/app/api-reference/next-config-js/assetPrefix\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"basePath\",\"description\":\"Use `basePath` to deploy a Next.js application under a sub-path of a domain.\",\"path\":\"14/app/api-reference/next-config-js/basePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"compress\",\"description\":\"Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.\",\"path\":\"14/app/api-reference/next-config-js/compress\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"crossOrigin\",\"description\":\"Use the `crossOrigin` option to add a crossOrigin tag on the `script` tags generated by `next/script`.\",\"path\":\"14/app/api-reference/next-config-js/crossOrigin\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"devIndicators\",\"description\":\"Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.\",\"path\":\"14/app/api-reference/next-config-js/devIndicators\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"distDir\",\"description\":\"Set a custom build directory to use instead of the default .next directory.\",\"path\":\"14/app/api-reference/next-config-js/distDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"env\",\"description\":\"Learn to add and access environment variables in your Next.js application at build time.\",\"path\":\"14/app/api-reference/next-config-js/env\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"eslint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"14/app/api-reference/next-config-js/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"exportPathMap\",\"description\":\"Customize the pages that will be exported as HTML files when using `next export`.\",\"path\":\"14/app/api-reference/next-config-js/exportPathMap\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateBuildId\",\"description\":\"Configure the build id, which is used to identify the current build in which your application is being served.\",\"path\":\"14/app/api-reference/next-config-js/generateBuildId\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateEtags\",\"description\":\"Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.\",\"path\":\"14/app/api-reference/next-config-js/generateEtags\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"Add custom HTTP headers to your Next.js app.\",\"path\":\"14/app/api-reference/next-config-js/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"httpAgentOptions\",\"description\":\"Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.\",\"path\":\"14/app/api-reference/next-config-js/httpAgentOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"images\",\"description\":\"Custom configuration for the next/image loader\",\"path\":\"14/app/api-reference/next-config-js/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"cacheHandler\",\"description\":\"Configure the Next.js cache used for storing and revalidating data to use any external service like Redis, Memcached, or others.\",\"path\":\"14/app/api-reference/next-config-js/incrementalCacheHandlerPath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"instrumentationHook\",\"description\":\"Use the instrumentationHook option to set up instrumentation in your Next.js App.\",\"path\":\"14/app/api-reference/next-config-js/instrumentationHook\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"logging\",\"description\":\"Configure how data fetches are logged to the console when running Next.js in development mode.\",\"path\":\"14/app/api-reference/next-config-js/logging\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"mdxRs\",\"description\":\"Use the new Rust compiler to compile MDX files in the App Router.\",\"path\":\"14/app/api-reference/next-config-js/mdxRs\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"onDemandEntries\",\"description\":\"Configure how Next.js will dispose and keep in memory pages created in development.\",\"path\":\"14/app/api-reference/next-config-js/onDemandEntries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"optimizePackageImports\",\"description\":\"API Reference for optmizedPackageImports Next.js Config Option\",\"path\":\"14/app/api-reference/next-config-js/optimizePackageImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"output\",\"description\":\"Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.\",\"path\":\"14/app/api-reference/next-config-js/output\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"pageExtensions\",\"description\":\"Extend the default page extensions used by Next.js when resolving pages in the Pages Router.\",\"path\":\"14/app/api-reference/next-config-js/pageExtensions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Partial Prerendering (experimental)\",\"description\":\"Learn how to enable Partial Prerendering (experimental) in Next.js 14.\",\"path\":\"14/app/api-reference/next-config-js/partial-prerendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"poweredByHeader\",\"description\":\"Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.\",\"path\":\"14/app/api-reference/next-config-js/poweredByHeader\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"productionBrowserSourceMaps\",\"description\":\"Enables browser source map generation during the production build.\",\"path\":\"14/app/api-reference/next-config-js/productionBrowserSourceMaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactStrictMode\",\"description\":\"The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in\",\"path\":\"14/app/api-reference/next-config-js/reactStrictMode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirects\",\"description\":\"Add redirects to your Next.js app.\",\"path\":\"14/app/api-reference/next-config-js/redirects\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"rewrites\",\"description\":\"Add rewrites to your Next.js app.\",\"path\":\"14/app/api-reference/next-config-js/rewrites\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverActions\",\"description\":\"Configure Server Actions behavior in your Next.js application.\",\"path\":\"14/app/api-reference/next-config-js/serverActions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverComponentsExternalPackages\",\"description\":\"Opt-out specific dependencies from the Server Components bundling and use native Node.js `require`.\",\"path\":\"14/app/api-reference/next-config-js/serverComponentsExternalPackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"StaleTimes (experimental)\",\"description\":\"Learn how to override the invalidation time of the Client Router Cache.\",\"path\":\"14/app/api-reference/next-config-js/staleTimes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"trailingSlash\",\"description\":\"Configure Next.js pages to resolve with or without a trailing slash.\",\"path\":\"14/app/api-reference/next-config-js/trailingSlash\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"transpilePackages\",\"description\":\"Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).\",\"path\":\"14/app/api-reference/next-config-js/transpilePackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"turbo\",\"description\":\"Configure Next.js with Turbopack-specific options\",\"path\":\"14/app/api-reference/next-config-js/turbo\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"typedRoutes\",\"description\":\"Enable experimental support for statically typed links.\",\"path\":\"14/app/api-reference/next-config-js/typedRoutes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"typescript\",\"description\":\"Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.\",\"path\":\"14/app/api-reference/next-config-js/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"urlImports\",\"description\":\"Configure Next.js to allow importing modules from external URLs (experimental).\",\"path\":\"14/app/api-reference/next-config-js/urlImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webpack\",\"description\":\"Learn how to customize the webpack config used by Next.js\",\"path\":\"14/app/api-reference/next-config-js/webpack\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webVitalsAttribution\",\"description\":\"Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.\",\"path\":\"14/app/api-reference/next-config-js/webVitalsAttribution\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"CLI\",\"description\":\"API Reference for the Next.js Command Line Interface (CLI) tools.\",\"path\":\"14/app/api-reference/cli\",\"version\":\"$undefined\",\"children\":[{\"title\":\"create-next-app\",\"description\":\"Create Next.js apps using one command with the create-next-app CLI.\",\"path\":\"14/app/api-reference/cli/create-next-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"next CLI\",\"description\":\"Learn how to run and build your application with the Next.js CLI.\",\"path\":\"14/app/api-reference/cli/next\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Edge Runtime\",\"description\":\"API Reference for the Edge Runtime.\",\"path\":\"14/app/api-reference/edge\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Building Your Application\",\"description\":\"Learn how to use Next.js features to build your application.\",\"path\":\"14/pages/building-your-application\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Routing\",\"description\":\"Learn the fundamentals of routing for front-end applications with the Pages Router.\",\"path\":\"14/pages/building-your-application/routing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Pages and Layouts\",\"description\":\"Create your first page and shared layout with the Pages Router.\",\"path\":\"14/pages/building-your-application/routing/pages-and-layouts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Dynamic Routes\",\"description\":\"Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.\",\"path\":\"14/pages/building-your-application/routing/dynamic-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Linking and Navigating\",\"description\":\"Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.\",\"path\":\"14/pages/building-your-application/routing/linking-and-navigating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Redirecting\",\"description\":\"Learn the different ways to handle redirects in Next.js.\",\"path\":\"14/pages/building-your-application/routing/redirecting\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom App\",\"description\":\"Control page initialization and add a layout that persists for all pages by overriding the default App component used by Next.js.\",\"path\":\"14/pages/building-your-application/routing/custom-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Document\",\"description\":\"Extend the default document markup added by Next.js.\",\"path\":\"14/pages/building-your-application/routing/custom-document\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"API Routes\",\"description\":\"Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.\",\"path\":\"14/pages/building-your-application/routing/api-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Errors\",\"description\":\"Override and extend the built-in Error page to handle custom errors.\",\"path\":\"14/pages/building-your-application/routing/custom-error\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Internationalization\",\"description\":\"Next.js has built-in support for internationalized routing and language detection. Learn more here.\",\"path\":\"14/pages/building-your-application/routing/internationalization\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Middleware\",\"description\":\"Learn how to use Middleware to run code before a request is completed.\",\"path\":\"14/pages/building-your-application/routing/middleware\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Rendering\",\"description\":\"Learn the fundamentals of rendering in React and Next.js.\",\"path\":\"14/pages/building-your-application/rendering\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Server-side Rendering (SSR)\",\"description\":\"Use Server-side Rendering to render pages on each request.\",\"path\":\"14/pages/building-your-application/rendering/server-side-rendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Site Generation (SSG)\",\"description\":\"Use Static Site Generation (SSG) to pre-render pages at build time.\",\"path\":\"14/pages/building-your-application/rendering/static-site-generation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Automatic Static Optimization\",\"description\":\"Next.js automatically optimizes your app to be static HTML whenever possible. Learn how it works here.\",\"path\":\"14/pages/building-your-application/rendering/automatic-static-optimization\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client-side Rendering (CSR)\",\"description\":\"Learn how to implement client-side rendering in the Pages Router.\",\"path\":\"14/pages/building-your-application/rendering/client-side-rendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Edge and Node.js Runtimes\",\"description\":\"Learn more about the switchable runtimes (Edge and Node.js) in Next.js.\",\"path\":\"14/pages/building-your-application/rendering/edge-and-nodejs-runtimes\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Data Fetching\",\"description\":\"Next.js allows you to fetch data in multiple ways, with pre-rendering, server-side rendering or static-site generation, and incremental static regeneration. Learn how to manage your application data in Next.js.\",\"path\":\"14/pages/building-your-application/data-fetching\",\"version\":\"$undefined\",\"children\":[{\"title\":\"getStaticProps\",\"description\":\"Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js.\",\"path\":\"14/pages/building-your-application/data-fetching/get-static-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticPaths\",\"description\":\"Fetch data and generate static pages with `getStaticPaths`. Learn more about this API for data fetching in Next.js.\",\"path\":\"14/pages/building-your-application/data-fetching/get-static-paths\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Forms and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"14/pages/building-your-application/data-fetching/forms-and-mutations\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getServerSideProps\",\"description\":\"Fetch data on each request with `getServerSideProps`.\",\"path\":\"14/pages/building-your-application/data-fetching/get-server-side-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Incremental Static Regeneration (ISR)\",\"description\":\"Learn how to create or update static pages at runtime with Incremental Static Regeneration.\",\"path\":\"14/pages/building-your-application/data-fetching/incremental-static-regeneration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client-side Fetching\",\"description\":\"Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more.\",\"path\":\"14/pages/building-your-application/data-fetching/client-side\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Styling\",\"description\":\"Learn the different ways you can style your Next.js application.\",\"path\":\"14/pages/building-your-application/styling\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CSS Modules\",\"description\":\"Style your Next.js Application using CSS Modules.\",\"path\":\"14/pages/building-your-application/styling/css-modules\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Tailwind CSS\",\"description\":\"Style your Next.js Application using Tailwind CSS.\",\"path\":\"14/pages/building-your-application/styling/tailwind-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CSS-in-JS\",\"description\":\"Use CSS-in-JS libraries with Next.js\",\"path\":\"14/pages/building-your-application/styling/css-in-js\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Sass\",\"description\":\"Learn how to use Sass in your Next.js application.\",\"path\":\"14/pages/building-your-application/styling/sass\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Optimizing\",\"description\":\"Optimize your Next.js application for best performance and user experience.\",\"path\":\"14/pages/building-your-application/optimizing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Images\",\"description\":\"Optimize your images with the built-in `next/image` component.\",\"path\":\"14/pages/building-your-application/optimizing/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fonts\",\"description\":\"Optimize your application's web fonts with the built-in `next/font` loaders.\",\"path\":\"14/pages/building-your-application/optimizing/fonts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Scripts\",\"description\":\"Optimize 3rd party scripts with the built-in Script component.\",\"path\":\"14/pages/building-your-application/optimizing/scripts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Assets\",\"description\":\"Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.\",\"path\":\"14/pages/building-your-application/optimizing/static-assets\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Bundle Analyzer\",\"description\":\"Analyze the size of your JavaScript bundles using the @next/bundle-analyzer plugin.\",\"path\":\"14/pages/building-your-application/optimizing/bundle-analyzer\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Analytics\",\"description\":\"Measure and track page performance using Next.js Speed Insights\",\"path\":\"14/pages/building-your-application/optimizing/analytics\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Lazy Loading\",\"description\":\"Lazy load imported libraries and React Components to improve your application's loading performance.\",\"path\":\"14/pages/building-your-application/optimizing/lazy-loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Instrumentation\",\"description\":\"Learn how to use instrumentation to run code at server startup in your Next.js app\",\"path\":\"14/pages/building-your-application/optimizing/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"OpenTelemetry\",\"description\":\"Learn how to instrument your Next.js app with OpenTelemetry.\",\"path\":\"14/pages/building-your-application/optimizing/open-telemetry\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Third Party Libraries\",\"description\":\"Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.\",\"path\":\"14/pages/building-your-application/optimizing/third-party-libraries\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuring\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"14/pages/building-your-application/configuring\",\"version\":\"$undefined\",\"children\":[{\"title\":\"TypeScript\",\"description\":\"Next.js provides a TypeScript-first development experience for building your React application.\",\"path\":\"14/pages/building-your-application/configuring/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ESLint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"14/pages/building-your-application/configuring/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Environment Variables\",\"description\":\"Learn to add and access environment variables in your Next.js application.\",\"path\":\"14/pages/building-your-application/configuring/environment-variables\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Absolute Imports and Module Path Aliases\",\"description\":\"Configure module path aliases that allow you to remap certain import paths.\",\"path\":\"14/pages/building-your-application/configuring/absolute-imports-and-module-aliases\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"src Directory\",\"description\":\"Save pages under the `src` directory as an alternative to the root `pages` directory.\",\"path\":\"14/pages/building-your-application/configuring/src-directory\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"MDX\",\"description\":\"Learn how to configure MDX to write JSX in your markdown files.\",\"path\":\"14/pages/building-your-application/configuring/mdx\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"AMP\",\"description\":\"With minimal config, and without leaving React, you can start adding AMP and improve the performance and speed of your pages.\",\"path\":\"14/pages/building-your-application/configuring/amp\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Babel\",\"description\":\"Extend the babel preset added by Next.js with your own configs.\",\"path\":\"14/pages/building-your-application/configuring/babel\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"PostCSS\",\"description\":\"Extend the PostCSS config and plugins added by Next.js with your own.\",\"path\":\"14/pages/building-your-application/configuring/post-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Server\",\"description\":\"Start a Next.js app programmatically using a custom server.\",\"path\":\"14/pages/building-your-application/configuring/custom-server\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Draft Mode\",\"description\":\"Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.\",\"path\":\"14/pages/building-your-application/configuring/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Error Handling\",\"description\":\"Handle errors in your Next.js app.\",\"path\":\"14/pages/building-your-application/configuring/error-handling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Debugging\",\"description\":\"Learn how to debug your Next.js application with VS Code or Chrome DevTools.\",\"path\":\"14/pages/building-your-application/configuring/debugging\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Preview Mode\",\"description\":\"Next.js has the preview mode for statically generated pages. You can learn how it works here.\",\"path\":\"14/pages/building-your-application/configuring/preview-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Content Security Policy\",\"description\":\"Learn how to set a Content Security Policy (CSP) for your Next.js application.\",\"path\":\"14/pages/building-your-application/configuring/content-security-policy\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Testing\",\"description\":\"Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Vitest, and Jest.\",\"path\":\"14/pages/building-your-application/testing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Vitest\",\"description\":\"Learn how to set up Next.js with Vitest and React Testing Library - two popular unit testing libraries.\",\"path\":\"14/pages/building-your-application/testing/vitest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Jest\",\"description\":\"Learn how to set up Next.js with Jest for Unit Testing.\",\"path\":\"14/pages/building-your-application/testing/jest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Playwright\",\"description\":\"Learn how to set up Next.js with Playwright for End-to-End (E2E) and Integration testing.\",\"path\":\"14/pages/building-your-application/testing/playwright\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Cypress\",\"description\":\"Learn how to set up Next.js with Cypress for End-to-End (E2E) and Component Testing.\",\"path\":\"14/pages/building-your-application/testing/cypress\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Authentication\",\"description\":\"Learn how to implement authentication in Next.js, covering best practices, securing routes, authorization techniques, and session management.\",\"path\":\"14/pages/building-your-application/authentication\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Deploying\",\"description\":\"Learn how to deploy your Next.js app to production, either managed or self-hosted.\",\"path\":\"14/pages/building-your-application/deploying\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Production Checklist\",\"description\":\"Recommendations to ensure the best performance and user experience before taking your Next.js application to production.\",\"path\":\"14/pages/building-your-application/deploying/production-checklist\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Exports\",\"description\":\"Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.\",\"path\":\"14/pages/building-your-application/deploying/static-exports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Multi-Zones\",\"description\":\"Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain.\",\"path\":\"14/pages/building-your-application/deploying/multi-zones\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Continuous Integration (CI) Build Caching\",\"description\":\"Learn how to configure CI to cache Next.js builds\",\"path\":\"14/pages/building-your-application/deploying/ci-build-caching\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Upgrading\",\"description\":\"Learn how to upgrade to the latest versions of Next.js.\",\"path\":\"14/pages/building-your-application/upgrading\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Codemods\",\"description\":\"Use codemods to upgrade your Next.js codebase when new features are released.\",\"path\":\"14/pages/building-your-application/upgrading/codemods\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"From Pages to App\",\"description\":\"Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.\",\"path\":\"14/pages/building-your-application/upgrading/app-router-migration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Vite\",\"description\":\"Learn how to migrate your existing React application from Vite to Next.js.\",\"path\":\"14/pages/building-your-application/upgrading/from-vite\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Create React App\",\"description\":\"Learn how to migrate your existing React application from Create React App to Next.js.\",\"path\":\"14/pages/building-your-application/upgrading/from-create-react-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 14\",\"description\":\"Upgrade your Next.js Application from Version 13 to 14.\",\"path\":\"14/pages/building-your-application/upgrading/version-14\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 13\",\"description\":\"Upgrade your Next.js Application from Version 12 to 13.\",\"path\":\"14/pages/building-your-application/upgrading/version-13\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 12\",\"description\":\"Upgrade your Next.js Application from Version 11 to Version 12.\",\"path\":\"14/pages/building-your-application/upgrading/version-12\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 11\",\"description\":\"Upgrade your Next.js Application from Version 10 to Version 11.\",\"path\":\"14/pages/building-your-application/upgrading/version-11\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 10\",\"description\":\"Upgrade your Next.js Application from Version 9 to Version 10.\",\"path\":\"14/pages/building-your-application/upgrading/version-10\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 9\",\"description\":\"Upgrade your Next.js Application from Version 8 to Version 9.\",\"path\":\"14/pages/building-your-application/upgrading/version-9\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"API Reference\",\"description\":\"Next.js API Reference for the Pages Router.\",\"path\":\"14/pages/api-reference\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Components\",\"description\":\"API Reference for Next.js built-in components in the Pages Router.\",\"path\":\"14/pages/api-reference/components\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Font\",\"description\":\"API Reference for the Font Module\",\"path\":\"14/pages/api-reference/components/font\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cHead\u003e\",\"description\":\"Add custom elements to the `head` of your page with the built-in Head component.\",\"path\":\"14/pages/api-reference/components/head\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e\",\"description\":\"Optimize Images in your Next.js Application using the built-in `next/image` Component.\",\"path\":\"14/pages/api-reference/components/image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e (Legacy)\",\"description\":\"Backwards compatible Image Optimization with the Legacy Image component.\",\"path\":\"14/pages/api-reference/components/image-legacy\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cLink\u003e\",\"description\":\"API reference for the \u003cLink\u003e component.\",\"path\":\"14/pages/api-reference/components/link\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cScript\u003e\",\"description\":\"Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.\",\"path\":\"14/pages/api-reference/components/script\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Functions\",\"description\":\"API Reference for Functions and Hooks in Pages Router.\",\"path\":\"14/pages/api-reference/functions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"getInitialProps\",\"description\":\"Fetch dynamic data on the server for your React component with getInitialProps.\",\"path\":\"14/pages/api-reference/functions/get-initial-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getServerSideProps\",\"description\":\"API reference for `getServerSideProps`. Learn how to fetch data on each request with Next.js.\",\"path\":\"14/pages/api-reference/functions/get-server-side-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticPaths\",\"description\":\"API reference for `getStaticPaths`. Learn how to fetch data and generate static pages with `getStaticPaths`.\",\"path\":\"14/pages/api-reference/functions/get-static-paths\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticProps\",\"description\":\"API reference for `getStaticProps`. Learn how to use `getStaticProps` to generate static pages with Next.js.\",\"path\":\"14/pages/api-reference/functions/get-static-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextRequest\",\"description\":\"API Reference for NextRequest.\",\"path\":\"14/pages/api-reference/functions/next-request\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextResponse\",\"description\":\"API Reference for NextResponse.\",\"path\":\"14/pages/api-reference/functions/next-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useAmp\",\"description\":\"Enable AMP in a page, and control the way Next.js adds AMP to the page with the AMP config.\",\"path\":\"14/pages/api-reference/functions/use-amp\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useReportWebVitals\",\"description\":\"useReportWebVitals\",\"path\":\"14/pages/api-reference/functions/use-report-web-vitals\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useRouter\",\"description\":\"Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.\",\"path\":\"14/pages/api-reference/functions/use-router\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"userAgent\",\"description\":\"The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request.\",\"path\":\"14/pages/api-reference/functions/userAgent\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"next.config.js Options\",\"description\":\"Learn about the options available in next.config.js for the Pages Router.\",\"path\":\"14/pages/api-reference/next-config-js\",\"version\":\"$undefined\",\"children\":[{\"title\":\"assetPrefix\",\"description\":\"Learn how to use the assetPrefix config option to configure your CDN.\",\"path\":\"14/pages/api-reference/next-config-js/assetPrefix\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"basePath\",\"description\":\"Use `basePath` to deploy a Next.js application under a sub-path of a domain.\",\"path\":\"14/pages/api-reference/next-config-js/basePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"compress\",\"description\":\"Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.\",\"path\":\"14/pages/api-reference/next-config-js/compress\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"crossOrigin\",\"description\":\"Use the `crossOrigin` option to add a crossOrigin tag on the `script` tags generated by `next/script` and `next/head`.\",\"path\":\"14/pages/api-reference/next-config-js/crossOrigin\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"devIndicators\",\"description\":\"Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.\",\"path\":\"14/pages/api-reference/next-config-js/devIndicators\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"distDir\",\"description\":\"Set a custom build directory to use instead of the default .next directory.\",\"path\":\"14/pages/api-reference/next-config-js/distDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"env\",\"description\":\"Learn to add and access environment variables in your Next.js application at build time.\",\"path\":\"14/pages/api-reference/next-config-js/env\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"eslint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"14/pages/api-reference/next-config-js/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"exportPathMap\",\"description\":\"Customize the pages that will be exported as HTML files when using `next export`.\",\"path\":\"14/pages/api-reference/next-config-js/exportPathMap\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateBuildId\",\"description\":\"Configure the build id, which is used to identify the current build in which your application is being served.\",\"path\":\"14/pages/api-reference/next-config-js/generateBuildId\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateEtags\",\"description\":\"Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.\",\"path\":\"14/pages/api-reference/next-config-js/generateEtags\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"Add custom HTTP headers to your Next.js app.\",\"path\":\"14/pages/api-reference/next-config-js/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"httpAgentOptions\",\"description\":\"Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.\",\"path\":\"14/pages/api-reference/next-config-js/httpAgentOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"images\",\"description\":\"Custom configuration for the next/image loader\",\"path\":\"14/pages/api-reference/next-config-js/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"instrumentationHook\",\"description\":\"Use the instrumentationHook option to set up instrumentation in your Next.js App.\",\"path\":\"14/pages/api-reference/next-config-js/instrumentationHook\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"onDemandEntries\",\"description\":\"Configure how Next.js will dispose and keep in memory pages created in development.\",\"path\":\"14/pages/api-reference/next-config-js/onDemandEntries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"optimizePackageImports\",\"description\":\"API Reference for optmizedPackageImports Next.js Config Option\",\"path\":\"14/pages/api-reference/next-config-js/optimizePackageImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"output\",\"description\":\"Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.\",\"path\":\"14/pages/api-reference/next-config-js/output\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"pageExtensions\",\"description\":\"Extend the default page extensions used by Next.js when resolving pages in the Pages Router.\",\"path\":\"14/pages/api-reference/next-config-js/pageExtensions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"poweredByHeader\",\"description\":\"Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.\",\"path\":\"14/pages/api-reference/next-config-js/poweredByHeader\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"productionBrowserSourceMaps\",\"description\":\"Enables browser source map generation during the production build.\",\"path\":\"14/pages/api-reference/next-config-js/productionBrowserSourceMaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactStrictMode\",\"description\":\"The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in\",\"path\":\"14/pages/api-reference/next-config-js/reactStrictMode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirects\",\"description\":\"Add redirects to your Next.js app.\",\"path\":\"14/pages/api-reference/next-config-js/redirects\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"rewrites\",\"description\":\"Add rewrites to your Next.js app.\",\"path\":\"14/pages/api-reference/next-config-js/rewrites\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Runtime Config\",\"description\":\"Add client and server runtime configuration to your Next.js app.\",\"path\":\"14/pages/api-reference/next-config-js/runtime-configuration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"trailingSlash\",\"description\":\"Configure Next.js pages to resolve with or without a trailing slash.\",\"path\":\"14/pages/api-reference/next-config-js/trailingSlash\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"transpilePackages\",\"description\":\"Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).\",\"path\":\"14/pages/api-reference/next-config-js/transpilePackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"turbo\",\"description\":\"Configure Next.js with Turbopack-specific options\",\"path\":\"14/pages/api-reference/next-config-js/turbo\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"typescript\",\"description\":\"Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.\",\"path\":\"14/pages/api-reference/next-config-js/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"urlImports\",\"description\":\"Configure Next.js to allow importing modules from external URLs (experimental).\",\"path\":\"14/pages/api-reference/next-config-js/urlImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webpack\",\"description\":\"Learn how to customize the webpack config used by Next.js\",\"path\":\"14/pages/api-reference/next-config-js/webpack\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webVitalsAttribution\",\"description\":\"Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.\",\"path\":\"14/pages/api-reference/next-config-js/webVitalsAttribution\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Edge Runtime\",\"description\":\"API Reference for the Edge Runtime.\",\"path\":\"14/pages/api-reference/edge\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CLI\",\"description\":\"API Reference for the Next.js Command Line Interface (CLI) tools.\",\"path\":\"14/pages/api-reference/cli\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CLI\",\"description\":\"Create Next.js apps using one command with the create-next-app CLI.\",\"path\":\"14/pages/api-reference/cli/create-next-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"next CLI\",\"description\":\"Learn how to run and build your application with the Next.js CLI.\",\"path\":\"14/pages/api-reference/cli/next\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"Architecture\",\"description\":\"How Next.js Works\",\"path\":\"14/architecture\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Accessibility\",\"description\":\"The built-in accessibility features of Next.js.\",\"path\":\"14/architecture/accessibility\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fast Refresh\",\"description\":\"Fast Refresh is a hot module reloading experience that gives you instantaneous feedback on edits made to your React components.\",\"path\":\"14/architecture/fast-refresh\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Next.js Compiler\",\"description\":\"Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.\",\"path\":\"14/architecture/nextjs-compiler\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Supported Browsers\",\"description\":\"Browser support and which JavaScript features are supported by Next.js.\",\"path\":\"14/architecture/supported-browsers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Turbopack\",\"description\":\"Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.\",\"path\":\"14/architecture/turbopack\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Community\",\"description\":\"Get involved in the Next.js community.\",\"path\":\"14/community\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Contribution Guide\",\"description\":\"Learn how to contribute to Next.js Documentation\",\"path\":\"14/community/contribution-guide\",\"version\":\"$undefined\",\"children\":[]}]}],\"canary\":[{\"title\":\"Getting Started\",\"description\":\"Learn how to create full-stack web applications with the Next.js App Router.\",\"path\":\"canary/app/getting-started\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Installation\",\"description\":\"Learn how to create a new Next.js application with `create-next-app`, and set up TypeScript, ESLint, and Module Path Aliases.\",\"path\":\"canary/app/getting-started/installation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Layouts and Pages\",\"description\":\"Learn how to create layouts and pages in your Next.js application, and link between them.\",\"path\":\"canary/app/getting-started/layouts-and-pages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Project Structure\",\"description\":\"Learn about the folder and file conventions in a Next.js project, and how to organize your project.\",\"path\":\"canary/app/getting-started/project-structure\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Building Your Application\",\"description\":\"Learn how to use Next.js features to build your application.\",\"path\":\"canary/app/building-your-application\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Routing\",\"description\":\"Learn the fundamentals of routing for front-end applications.\",\"path\":\"canary/app/building-your-application/routing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Defining Routes\",\"description\":\"Learn how to create your first route in Next.js.\",\"path\":\"canary/app/building-your-application/routing/defining-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Pages\",\"description\":\"Create your first page in Next.js\",\"path\":\"canary/app/building-your-application/routing/pages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Layouts and Templates\",\"description\":\"Create your first shared layout in Next.js.\",\"path\":\"canary/app/building-your-application/routing/layouts-and-templates\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Linking and Navigating\",\"description\":\"Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.\",\"path\":\"canary/app/building-your-application/routing/linking-and-navigating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Error Handling\",\"description\":\"Learn how to display expected errors and handle uncaught exceptions.\",\"path\":\"canary/app/building-your-application/routing/error-handling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Loading UI and Streaming\",\"description\":\"Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.\",\"path\":\"canary/app/building-your-application/routing/loading-ui-and-streaming\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Redirecting\",\"description\":\"Learn the different ways to handle redirects in Next.js.\",\"path\":\"canary/app/building-your-application/routing/redirecting\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Groups\",\"description\":\"Route Groups can be used to partition your Next.js application into different sections.\",\"path\":\"canary/app/building-your-application/routing/route-groups\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Dynamic Routes\",\"description\":\"Dynamic Routes can be used to programmatically generate route segments from dynamic data.\",\"path\":\"canary/app/building-your-application/routing/dynamic-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Parallel Routes\",\"description\":\"Simultaneously render one or more pages in the same view that can be navigated independently. A pattern for highly dynamic applications.\",\"path\":\"canary/app/building-your-application/routing/parallel-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Intercepting Routes\",\"description\":\"Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals.\",\"path\":\"canary/app/building-your-application/routing/intercepting-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Handlers\",\"description\":\"Create custom request handlers for a given route using the Web's Request and Response APIs.\",\"path\":\"canary/app/building-your-application/routing/route-handlers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Middleware\",\"description\":\"Learn how to use Middleware to run code before a request is completed.\",\"path\":\"canary/app/building-your-application/routing/middleware\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Internationalization\",\"description\":\"Add support for multiple languages with internationalized routing and localized content.\",\"path\":\"canary/app/building-your-application/routing/internationalization\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Data Fetching\",\"description\":\"Learn how to fetch, cache, revalidate, and mutate data with Next.js.\",\"path\":\"canary/app/building-your-application/data-fetching\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Data Fetching and Caching\",\"description\":\"Learn best practices for fetching data on the server or client in Next.js.\",\"path\":\"canary/app/building-your-application/data-fetching/fetching\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Server Actions and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"canary/app/building-your-application/data-fetching/server-actions-and-mutations\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Incremental Static Regeneration (ISR)\",\"description\":\"Learn how to create or update static pages at runtime with Incremental Static Regeneration.\",\"path\":\"canary/app/building-your-application/data-fetching/incremental-static-regeneration\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Rendering\",\"description\":\"Learn the differences between Next.js rendering environments, strategies, and runtimes.\",\"path\":\"canary/app/building-your-application/rendering\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Server Components\",\"description\":\"Learn how you can use React Server Components to render parts of your application on the server.\",\"path\":\"canary/app/building-your-application/rendering/server-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client Components\",\"description\":\"Learn how to use Client Components to render parts of your application on the client.\",\"path\":\"canary/app/building-your-application/rendering/client-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Composition Patterns\",\"description\":\"Recommended patterns for using Server and Client Components.\",\"path\":\"canary/app/building-your-application/rendering/composition-patterns\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Partial Prerendering\",\"description\":\"Learn how to combine the benefits of static and dynamic rendering with Partial Prerendering.\",\"path\":\"canary/app/building-your-application/rendering/partial-prerendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Runtimes\",\"description\":\"Learn about the switchable runtimes (Edge and Node.js) in Next.js.\",\"path\":\"canary/app/building-your-application/rendering/edge-and-nodejs-runtimes\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Caching\",\"description\":\"An overview of caching mechanisms in Next.js.\",\"path\":\"canary/app/building-your-application/caching\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Styling\",\"description\":\"Learn the different ways you can style your Next.js application.\",\"path\":\"canary/app/building-your-application/styling\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CSS\",\"description\":\"Style your Next.js Application with CSS Modules, Global Styles, and external stylesheets.\",\"path\":\"canary/app/building-your-application/styling/css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Tailwind CSS\",\"description\":\"Style your Next.js Application using Tailwind CSS.\",\"path\":\"canary/app/building-your-application/styling/tailwind-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Sass\",\"description\":\"Style your Next.js application using Sass.\",\"path\":\"canary/app/building-your-application/styling/sass\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CSS-in-JS\",\"description\":\"Use CSS-in-JS libraries with Next.js\",\"path\":\"canary/app/building-your-application/styling/css-in-js\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Optimizing\",\"description\":\"Optimize your Next.js application for best performance and user experience.\",\"path\":\"canary/app/building-your-application/optimizing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Images\",\"description\":\"Optimize your images with the built-in `next/image` component.\",\"path\":\"canary/app/building-your-application/optimizing/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Videos\",\"description\":\"Recommendations and best practices for optimizing videos in your Next.js application.\",\"path\":\"canary/app/building-your-application/optimizing/videos\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fonts\",\"description\":\"Optimize your application's web fonts with the built-in `next/font` loaders.\",\"path\":\"canary/app/building-your-application/optimizing/fonts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Metadata\",\"description\":\"Use the Metadata API to define metadata in any layout or page.\",\"path\":\"canary/app/building-your-application/optimizing/metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Scripts\",\"description\":\"Optimize 3rd party scripts with the built-in Script component.\",\"path\":\"canary/app/building-your-application/optimizing/scripts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Package Bundling\",\"description\":\"Learn how to optimize your application's server and client bundles.\",\"path\":\"canary/app/building-your-application/optimizing/package-bundling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Lazy Loading\",\"description\":\"Lazy load imported libraries and React Components to improve your application's loading performance.\",\"path\":\"canary/app/building-your-application/optimizing/lazy-loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Analytics\",\"description\":\"Measure and track page performance using Next.js Speed Insights\",\"path\":\"canary/app/building-your-application/optimizing/analytics\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Instrumentation\",\"description\":\"Learn how to use instrumentation to run code at server startup in your Next.js app\",\"path\":\"canary/app/building-your-application/optimizing/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"OpenTelemetry\",\"description\":\"Learn how to instrument your Next.js app with OpenTelemetry.\",\"path\":\"canary/app/building-your-application/optimizing/open-telemetry\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Assets\",\"description\":\"Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.\",\"path\":\"canary/app/building-your-application/optimizing/static-assets\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Third Party Libraries\",\"description\":\"Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.\",\"path\":\"canary/app/building-your-application/optimizing/third-party-libraries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Memory Usage\",\"description\":\"Optimize memory used by your application in development and production.\",\"path\":\"canary/app/building-your-application/optimizing/memory-usage\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuring\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"canary/app/building-your-application/configuring\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Environment Variables\",\"description\":\"Learn to add and access environment variables in your Next.js application.\",\"path\":\"canary/app/building-your-application/configuring/environment-variables\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"MDX\",\"description\":\"Learn how to configure MDX and use it in your Next.js apps.\",\"path\":\"canary/app/building-your-application/configuring/mdx\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"src Directory\",\"description\":\"Save pages under the `src` directory as an alternative to the root `pages` directory.\",\"path\":\"canary/app/building-your-application/configuring/src-directory\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Server\",\"description\":\"Start a Next.js app programmatically using a custom server.\",\"path\":\"canary/app/building-your-application/configuring/custom-server\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Draft Mode\",\"description\":\"Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with App Router here.\",\"path\":\"canary/app/building-your-application/configuring/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Content Security Policy\",\"description\":\"Learn how to set a Content Security Policy (CSP) for your Next.js application.\",\"path\":\"canary/app/building-your-application/configuring/content-security-policy\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Debugging\",\"description\":\"Learn how to debug your Next.js application with VS Code, Chrome DevTools, or Firefox DevTools.\",\"path\":\"canary/app/building-your-application/configuring/debugging\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Progressive Web Applications (PWA)\",\"description\":\"Learn how to build a Progressive Web Application (PWA) with Next.js.\",\"path\":\"canary/app/building-your-application/configuring/progressive-web-apps\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Testing\",\"description\":\"Learn how to set up Next.js with four commonly used testing tools — Cypress, Playwright, Vitest, and Jest.\",\"path\":\"canary/app/building-your-application/testing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Vitest\",\"description\":\"Learn how to set up Vitest with Next.js for Unit Testing.\",\"path\":\"canary/app/building-your-application/testing/vitest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Jest\",\"description\":\"Learn how to set up Jest with Next.js for Unit Testing and Snapshot Testing.\",\"path\":\"canary/app/building-your-application/testing/jest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Playwright\",\"description\":\"Learn how to set up Playwright with Next.js for End-to-End (E2E) Testing.\",\"path\":\"canary/app/building-your-application/testing/playwright\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Cypress\",\"description\":\"Learn how to set up Cypress with Next.js for End-to-End (E2E) and Component Testing.\",\"path\":\"canary/app/building-your-application/testing/cypress\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Authentication\",\"description\":\"Learn how to implement authentication in your Next.js application.\",\"path\":\"canary/app/building-your-application/authentication\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Deploying\",\"description\":\"Learn how to deploy your Next.js app to production, either managed or self-hosted.\",\"path\":\"canary/app/building-your-application/deploying\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Production Checklist\",\"description\":\"Recommendations to ensure the best performance and user experience before taking your Next.js application to production.\",\"path\":\"canary/app/building-your-application/deploying/production-checklist\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Exports\",\"description\":\"Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.\",\"path\":\"canary/app/building-your-application/deploying/static-exports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Multi-Zones\",\"description\":\"Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain.\",\"path\":\"canary/app/building-your-application/deploying/multi-zones\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Upgrading\",\"description\":\"Learn how to upgrade to the latest versions of Next.js.\",\"path\":\"canary/app/building-your-application/upgrading\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Codemods\",\"description\":\"Use codemods to upgrade your Next.js codebase when new features are released.\",\"path\":\"canary/app/building-your-application/upgrading/codemods\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 15\",\"description\":\"Upgrade your Next.js Application from Version 14 to 15.\",\"path\":\"canary/app/building-your-application/upgrading/version-15\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 14\",\"description\":\"Upgrade your Next.js Application from Version 13 to 14.\",\"path\":\"canary/app/building-your-application/upgrading/version-14\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"App Router Migration\",\"description\":\"Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.\",\"path\":\"canary/app/building-your-application/upgrading/app-router-migration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Create React App\",\"description\":\"Learn how to migrate your existing React application from Create React App to Next.js.\",\"path\":\"canary/app/building-your-application/upgrading/from-create-react-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Vite\",\"description\":\"Learn how to migrate your existing React application from Vite to Next.js.\",\"path\":\"canary/app/building-your-application/upgrading/from-vite\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Examples\",\"description\":\"Examples of popular Next.js UI patterns and use cases.\",\"path\":\"canary/app/building-your-application/examples\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"API Reference\",\"description\":\"Next.js API Reference for the App Router.\",\"path\":\"canary/app/api-reference\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Directives\",\"description\":\"Directives are used to modify the behavior of your Next.js application.\",\"path\":\"canary/app/api-reference/directives\",\"version\":\"$undefined\",\"children\":[{\"title\":\"use cache\",\"description\":\"Learn how to use the use cache directive to cache data in your Next.js application.\",\"path\":\"canary/app/api-reference/directives/use-cache\",\"version\":\"canary\",\"children\":[]},{\"title\":\"use client\",\"description\":\"Learn how to use the use client directive to render a component on the client.\",\"path\":\"canary/app/api-reference/directives/use-client\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"use server\",\"description\":\"Learn how to use the use server directive to execute code on the server.\",\"path\":\"canary/app/api-reference/directives/use-server\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Components\",\"description\":\"API Reference for Next.js built-in components.\",\"path\":\"canary/app/api-reference/components\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Font\",\"description\":\"Optimizing loading web fonts with the built-in `next/font` loaders.\",\"path\":\"canary/app/api-reference/components/font\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cForm\u003e\",\"description\":\"Learn how to use the `\u003cForm\u003e` component to handle form submissions and search params updates with client-side navigation.\",\"path\":\"canary/app/api-reference/components/form\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e\",\"description\":\"Optimize Images in your Next.js Application using the built-in `next/image` Component.\",\"path\":\"canary/app/api-reference/components/image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cLink\u003e\",\"description\":\"Enable fast client-side navigation with the built-in `next/link` component.\",\"path\":\"canary/app/api-reference/components/link\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cScript\u003e\",\"description\":\"Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.\",\"path\":\"canary/app/api-reference/components/script\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"File Conventions\",\"description\":\"API Reference for Next.js Special Files.\",\"path\":\"canary/app/api-reference/file-conventions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"default.js\",\"description\":\"API Reference for the default.js file.\",\"path\":\"canary/app/api-reference/file-conventions/default\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"error.js\",\"description\":\"API reference for the error.js special file.\",\"path\":\"canary/app/api-reference/file-conventions/error\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"forbidden.js\",\"description\":\"API reference for the forbidden.js special file.\",\"path\":\"canary/app/api-reference/file-conventions/forbidden\",\"version\":\"canary\",\"children\":[]},{\"title\":\"instrumentation.js\",\"description\":\"API reference for the instrumentation.js file.\",\"path\":\"canary/app/api-reference/file-conventions/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"layout.js\",\"description\":\"API reference for the layout.js file.\",\"path\":\"canary/app/api-reference/file-conventions/layout\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"loading.js\",\"description\":\"API reference for the loading.js file.\",\"path\":\"canary/app/api-reference/file-conventions/loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"mdx-components.js\",\"description\":\"API reference for the mdx-components.js file.\",\"path\":\"canary/app/api-reference/file-conventions/mdx-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"middleware.js\",\"description\":\"API reference for the middleware.js file.\",\"path\":\"canary/app/api-reference/file-conventions/middleware\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"not-found.js\",\"description\":\"API reference for the not-found.js file.\",\"path\":\"canary/app/api-reference/file-conventions/not-found\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"page.js\",\"description\":\"API reference for the page.js file.\",\"path\":\"canary/app/api-reference/file-conventions/page\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"route.js\",\"description\":\"API reference for the route.js special file.\",\"path\":\"canary/app/api-reference/file-conventions/route\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Segment Config\",\"description\":\"Learn about how to configure options for Next.js route segments.\",\"path\":\"canary/app/api-reference/file-conventions/route-segment-config\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"template.js\",\"description\":\"API Reference for the template.js file.\",\"path\":\"canary/app/api-reference/file-conventions/template\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"unauthorized.js\",\"description\":\"API reference for the unauthorized.js special file.\",\"path\":\"canary/app/api-reference/file-conventions/unauthorized\",\"version\":\"canary\",\"children\":[]},{\"title\":\"Metadata Files\",\"description\":\"API documentation for the metadata file conventions.\",\"path\":\"canary/app/api-reference/file-conventions/metadata\",\"version\":\"$undefined\",\"children\":[{\"title\":\"favicon, icon, and apple-icon\",\"description\":\"API Reference for the Favicon, Icon and Apple Icon file conventions.\",\"path\":\"canary/app/api-reference/file-conventions/metadata/app-icons\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"manifest.json\",\"description\":\"API Reference for manifest.json file.\",\"path\":\"canary/app/api-reference/file-conventions/metadata/manifest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"opengraph-image and twitter-image\",\"description\":\"API Reference for the Open Graph Image and Twitter Image file conventions.\",\"path\":\"canary/app/api-reference/file-conventions/metadata/opengraph-image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"robots.txt\",\"description\":\"API Reference for robots.txt file.\",\"path\":\"canary/app/api-reference/file-conventions/metadata/robots\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"sitemap.xml\",\"description\":\"API Reference for the sitemap.xml file.\",\"path\":\"canary/app/api-reference/file-conventions/metadata/sitemap\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"Functions\",\"description\":\"API Reference for Next.js Functions and Hooks.\",\"path\":\"canary/app/api-reference/functions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"cacheLife\",\"description\":\"Learn how to use the cacheLife function to set the cache expiration time for a cached function or component.\",\"path\":\"canary/app/api-reference/functions/cacheLife\",\"version\":\"canary\",\"children\":[]},{\"title\":\"cacheTag\",\"description\":\"Learn how to use the cacheTag function to manage cache invalidation in your Next.js application.\",\"path\":\"canary/app/api-reference/functions/cacheTag\",\"version\":\"canary\",\"children\":[]},{\"title\":\"connection\",\"description\":\"API Reference for the connection function.\",\"path\":\"canary/app/api-reference/functions/connection\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"cookies\",\"description\":\"API Reference for the cookies function.\",\"path\":\"canary/app/api-reference/functions/cookies\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"draftMode\",\"description\":\"API Reference for the draftMode function.\",\"path\":\"canary/app/api-reference/functions/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"fetch\",\"description\":\"API reference for the extended fetch function.\",\"path\":\"canary/app/api-reference/functions/fetch\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"forbidden\",\"description\":\"API Reference for the forbidden function.\",\"path\":\"canary/app/api-reference/functions/forbidden\",\"version\":\"canary\",\"children\":[]},{\"title\":\"generateImageMetadata\",\"description\":\"Learn how to generate multiple images in a single Metadata API special file.\",\"path\":\"canary/app/api-reference/functions/generate-image-metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateMetadata\",\"description\":\"Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.\",\"path\":\"canary/app/api-reference/functions/generate-metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateSitemaps\",\"description\":\"Learn how to use the generateSiteMaps function to create multiple sitemaps for your application.\",\"path\":\"canary/app/api-reference/functions/generate-sitemaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateStaticParams\",\"description\":\"API reference for the generateStaticParams function.\",\"path\":\"canary/app/api-reference/functions/generate-static-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateViewport\",\"description\":\"API Reference for the generateViewport function.\",\"path\":\"canary/app/api-reference/functions/generate-viewport\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"API reference for the headers function.\",\"path\":\"canary/app/api-reference/functions/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ImageResponse\",\"description\":\"API Reference for the ImageResponse constructor.\",\"path\":\"canary/app/api-reference/functions/image-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextRequest\",\"description\":\"API Reference for NextRequest.\",\"path\":\"canary/app/api-reference/functions/next-request\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextResponse\",\"description\":\"API Reference for NextResponse.\",\"path\":\"canary/app/api-reference/functions/next-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"notFound\",\"description\":\"API Reference for the notFound function.\",\"path\":\"canary/app/api-reference/functions/not-found\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"permanentRedirect\",\"description\":\"API Reference for the permanentRedirect function.\",\"path\":\"canary/app/api-reference/functions/permanentRedirect\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirect\",\"description\":\"API Reference for the redirect function.\",\"path\":\"canary/app/api-reference/functions/redirect\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"revalidatePath\",\"description\":\"API Reference for the revalidatePath function.\",\"path\":\"canary/app/api-reference/functions/revalidatePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"revalidateTag\",\"description\":\"API Reference for the revalidateTag function.\",\"path\":\"canary/app/api-reference/functions/revalidateTag\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"unauthorized\",\"description\":\"API Reference for the unauthorized function.\",\"path\":\"canary/app/api-reference/functions/unauthorized\",\"version\":\"canary\",\"children\":[]},{\"title\":\"unstable_after\",\"description\":\"API Reference for the after function.\",\"path\":\"canary/app/api-reference/functions/unstable_after\",\"version\":\"unstable\",\"children\":[]},{\"title\":\"unstable_cache\",\"description\":\"API Reference for the unstable_cache function.\",\"path\":\"canary/app/api-reference/functions/unstable_cache\",\"version\":\"legacy\",\"children\":[]},{\"title\":\"unstable_expirePath\",\"description\":\"API Reference for the unstable_expirePath function.\",\"path\":\"canary/app/api-reference/functions/unstable_expirePath\",\"version\":\"unstable\",\"children\":[]},{\"title\":\"unstable_expireTag\",\"description\":\"API Reference for the unstable_expireTag function.\",\"path\":\"canary/app/api-reference/functions/unstable_expireTag\",\"version\":\"unstable\",\"children\":[]},{\"title\":\"unstable_noStore\",\"description\":\"API Reference for the unstable_noStore function.\",\"path\":\"canary/app/api-reference/functions/unstable_noStore\",\"version\":\"legacy\",\"children\":[]},{\"title\":\"unstable_rethrow\",\"description\":\"API Reference for the unstable_rethrow function.\",\"path\":\"canary/app/api-reference/functions/unstable_rethrow\",\"version\":\"unstable\",\"children\":[]},{\"title\":\"useParams\",\"description\":\"API Reference for the useParams hook.\",\"path\":\"canary/app/api-reference/functions/use-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"usePathname\",\"description\":\"API Reference for the usePathname hook.\",\"path\":\"canary/app/api-reference/functions/use-pathname\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useReportWebVitals\",\"description\":\"API Reference for the useReportWebVitals function.\",\"path\":\"canary/app/api-reference/functions/use-report-web-vitals\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useRouter\",\"description\":\"API reference for the useRouter hook.\",\"path\":\"canary/app/api-reference/functions/use-router\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSearchParams\",\"description\":\"API Reference for the useSearchParams hook.\",\"path\":\"canary/app/api-reference/functions/use-search-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSelectedLayoutSegment\",\"description\":\"API Reference for the useSelectedLayoutSegment hook.\",\"path\":\"canary/app/api-reference/functions/use-selected-layout-segment\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSelectedLayoutSegments\",\"description\":\"API Reference for the useSelectedLayoutSegments hook.\",\"path\":\"canary/app/api-reference/functions/use-selected-layout-segments\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"userAgent\",\"description\":\"The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request.\",\"path\":\"canary/app/api-reference/functions/userAgent\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuration\",\"description\":\"Learn how to configure Next.js applications.\",\"path\":\"canary/app/api-reference/config\",\"version\":\"$undefined\",\"children\":[{\"title\":\"next.config.js\",\"description\":\"Learn how to configure your application with next.config.js.\",\"path\":\"canary/app/api-reference/config/next-config-js\",\"version\":\"$undefined\",\"children\":[{\"title\":\"appDir\",\"description\":\"Enable the App Router to use layouts, streaming, and more.\",\"path\":\"canary/app/api-reference/config/next-config-js/appDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"assetPrefix\",\"description\":\"Learn how to use the assetPrefix config option to configure your CDN.\",\"path\":\"canary/app/api-reference/config/next-config-js/assetPrefix\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"authInterrupts\",\"description\":\"Learn how to enable the experimental `authInterrupts` configuration option to use `forbidden` and `unauthorized`.\",\"path\":\"canary/app/api-reference/config/next-config-js/authInterrupts\",\"version\":\"canary\",\"children\":[]},{\"title\":\"basePath\",\"description\":\"Use `basePath` to deploy a Next.js application under a sub-path of a domain.\",\"path\":\"canary/app/api-reference/config/next-config-js/basePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"cacheLife\",\"description\":\"Learn how to set up cacheLife configurations in Next.js.\",\"path\":\"canary/app/api-reference/config/next-config-js/cacheLife\",\"version\":\"canary\",\"children\":[]},{\"title\":\"compress\",\"description\":\"Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.\",\"path\":\"canary/app/api-reference/config/next-config-js/compress\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"crossOrigin\",\"description\":\"Use the `crossOrigin` option to add a crossOrigin tag on the `script` tags generated by `next/script`.\",\"path\":\"canary/app/api-reference/config/next-config-js/crossOrigin\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"cssChunking\",\"description\":\"Use the `cssChunking` option to control how CSS files are chunked in your Next.js application.\",\"path\":\"canary/app/api-reference/config/next-config-js/cssChunking\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"devIndicators\",\"description\":\"Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.\",\"path\":\"canary/app/api-reference/config/next-config-js/devIndicators\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"distDir\",\"description\":\"Set a custom build directory to use instead of the default .next directory.\",\"path\":\"canary/app/api-reference/config/next-config-js/distDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"dynamicIO\",\"description\":\"Learn how to enable the dynamicIO flag in Next.js.\",\"path\":\"canary/app/api-reference/config/next-config-js/dynamicIO\",\"version\":\"canary\",\"children\":[]},{\"title\":\"env\",\"description\":\"Learn to add and access environment variables in your Next.js application at build time.\",\"path\":\"canary/app/api-reference/config/next-config-js/env\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"eslint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"canary/app/api-reference/config/next-config-js/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"expireTime\",\"description\":\"Customize stale-while-revalidate expire time for ISR enabled pages.\",\"path\":\"canary/app/api-reference/config/next-config-js/expireTime\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"exportPathMap\",\"description\":\"Customize the pages that will be exported as HTML files when using `next export`.\",\"path\":\"canary/app/api-reference/config/next-config-js/exportPathMap\",\"version\":\"legacy\",\"children\":[]},{\"title\":\"generateBuildId\",\"description\":\"Configure the build id, which is used to identify the current build in which your application is being served.\",\"path\":\"canary/app/api-reference/config/next-config-js/generateBuildId\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateEtags\",\"description\":\"Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.\",\"path\":\"canary/app/api-reference/config/next-config-js/generateEtags\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"Add custom HTTP headers to your Next.js app.\",\"path\":\"canary/app/api-reference/config/next-config-js/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"httpAgentOptions\",\"description\":\"Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.\",\"path\":\"canary/app/api-reference/config/next-config-js/httpAgentOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"images\",\"description\":\"Custom configuration for the next/image loader\",\"path\":\"canary/app/api-reference/config/next-config-js/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"cacheHandler\",\"description\":\"Configure the Next.js cache used for storing and revalidating data to use any external service like Redis, Memcached, or others.\",\"path\":\"canary/app/api-reference/config/next-config-js/incrementalCacheHandlerPath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"inlineCss\",\"description\":\"Enable inline CSS support.\",\"path\":\"canary/app/api-reference/config/next-config-js/inlineCss\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"logging\",\"description\":\"Configure how data fetches are logged to the console when running Next.js in development mode.\",\"path\":\"canary/app/api-reference/config/next-config-js/logging\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"mdxRs\",\"description\":\"Use the new Rust compiler to compile MDX files in the App Router.\",\"path\":\"canary/app/api-reference/config/next-config-js/mdxRs\",\"version\":\"experimental.\",\"children\":[]},{\"title\":\"onDemandEntries\",\"description\":\"Configure how Next.js will dispose and keep in memory pages created in development.\",\"path\":\"canary/app/api-reference/config/next-config-js/onDemandEntries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"optimizePackageImports\",\"description\":\"API Reference for optimizePackageImports Next.js Config Option\",\"path\":\"canary/app/api-reference/config/next-config-js/optimizePackageImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"output\",\"description\":\"Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.\",\"path\":\"canary/app/api-reference/config/next-config-js/output\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"pageExtensions\",\"description\":\"Extend the default page extensions used by Next.js when resolving pages in the Pages Router.\",\"path\":\"canary/app/api-reference/config/next-config-js/pageExtensions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"poweredByHeader\",\"description\":\"Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.\",\"path\":\"canary/app/api-reference/config/next-config-js/poweredByHeader\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ppr\",\"description\":\"Learn how to enable Partial Prerendering in Next.js.\",\"path\":\"canary/app/api-reference/config/next-config-js/ppr\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"productionBrowserSourceMaps\",\"description\":\"Enables browser source map generation during the production build.\",\"path\":\"canary/app/api-reference/config/next-config-js/productionBrowserSourceMaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactCompiler\",\"description\":\"Enable the React Compiler to automatically optimize component rendering.\",\"path\":\"canary/app/api-reference/config/next-config-js/reactCompiler\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"reactMaxHeadersLength\",\"description\":\"The maximum length of the headers that are emitted by React and added to the response.\",\"path\":\"canary/app/api-reference/config/next-config-js/reactMaxHeadersLength\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactStrictMode\",\"description\":\"The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in\",\"path\":\"canary/app/api-reference/config/next-config-js/reactStrictMode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirects\",\"description\":\"Add redirects to your Next.js app.\",\"path\":\"canary/app/api-reference/config/next-config-js/redirects\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"rewrites\",\"description\":\"Add rewrites to your Next.js app.\",\"path\":\"canary/app/api-reference/config/next-config-js/rewrites\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"sassOptions\",\"description\":\"Configure Sass options.\",\"path\":\"canary/app/api-reference/config/next-config-js/sassOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverActions\",\"description\":\"Configure Server Actions behavior in your Next.js application.\",\"path\":\"canary/app/api-reference/config/next-config-js/serverActions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverComponentsHmrCache\",\"description\":\"Configure whether fetch responses in Server Components are cached across HMR refresh requests.\",\"path\":\"canary/app/api-reference/config/next-config-js/serverComponentsHmrCache\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"serverExternalPackages\",\"description\":\"Opt-out specific dependencies from the Server Components bundling and use native Node.js `require`.\",\"path\":\"canary/app/api-reference/config/next-config-js/serverExternalPackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"staleTimes\",\"description\":\"Learn how to override the invalidation time of the Client Router Cache.\",\"path\":\"canary/app/api-reference/config/next-config-js/staleTimes\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"staticGeneration*\",\"description\":\"Learn how to configure static generation in your Next.js application.\",\"path\":\"canary/app/api-reference/config/next-config-js/staticGeneration\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"trailingSlash\",\"description\":\"Configure Next.js pages to resolve with or without a trailing slash.\",\"path\":\"canary/app/api-reference/config/next-config-js/trailingSlash\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"transpilePackages\",\"description\":\"Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).\",\"path\":\"canary/app/api-reference/config/next-config-js/transpilePackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"turbo\",\"description\":\"Configure Next.js with Turbopack-specific options\",\"path\":\"canary/app/api-reference/config/next-config-js/turbo\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"typedRoutes\",\"description\":\"Enable experimental support for statically typed links.\",\"path\":\"canary/app/api-reference/config/next-config-js/typedRoutes\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"typescript\",\"description\":\"Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.\",\"path\":\"canary/app/api-reference/config/next-config-js/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"urlImports\",\"description\":\"Configure Next.js to allow importing modules from external URLs.\",\"path\":\"canary/app/api-reference/config/next-config-js/urlImports\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"useLightningcss\",\"description\":\"Enable experimental support for Lightning CSS.\",\"path\":\"canary/app/api-reference/config/next-config-js/useLightningcss\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"webpack\",\"description\":\"Learn how to customize the webpack config used by Next.js\",\"path\":\"canary/app/api-reference/config/next-config-js/webpack\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webVitalsAttribution\",\"description\":\"Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.\",\"path\":\"canary/app/api-reference/config/next-config-js/webVitalsAttribution\",\"version\":\"experimental\",\"children\":[]}]},{\"title\":\"TypeScript\",\"description\":\"Next.js provides a TypeScript-first development experience for building your React application.\",\"path\":\"canary/app/api-reference/config/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ESLint\",\"description\":\"Learn how to use and configure the ESLint plugin to catch common issues and problems in a Next.js application.\",\"path\":\"canary/app/api-reference/config/eslint\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"CLI\",\"description\":\"API Reference for the Next.js Command Line Interface (CLI) tools.\",\"path\":\"canary/app/api-reference/cli\",\"version\":\"$undefined\",\"children\":[{\"title\":\"create-next-app\",\"description\":\"Create Next.js apps using one command with the create-next-app CLI.\",\"path\":\"canary/app/api-reference/cli/create-next-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"next CLI\",\"description\":\"Learn how to run and build your application with the Next.js CLI.\",\"path\":\"canary/app/api-reference/cli/next\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Edge Runtime\",\"description\":\"API Reference for the Edge Runtime.\",\"path\":\"canary/app/api-reference/edge\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Turbopack\",\"description\":\"Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.\",\"path\":\"canary/app/api-reference/turbopack\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Getting Started\",\"description\":\"Learn how to create full-stack web applications with Next.js with the Pages Router.\",\"path\":\"canary/pages/getting-started\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Installation\",\"description\":\"How to create a new Next.js application with `create-next-app`. Set up TypeScript, ESLint,and configure your `next.config.js` file.\",\"path\":\"canary/pages/getting-started/installation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Project Structure\",\"description\":\"Learn about the folder and file conventions in a Next.js project, and how to organize your project.\",\"path\":\"canary/pages/getting-started/project-structure\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Building Your Application\",\"description\":\"Learn how to use Next.js features to build your application.\",\"path\":\"canary/pages/building-your-application\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Routing\",\"description\":\"Learn the fundamentals of routing for front-end applications with the Pages Router.\",\"path\":\"canary/pages/building-your-application/routing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Pages and Layouts\",\"description\":\"Create your first page and shared layout with the Pages Router.\",\"path\":\"canary/pages/building-your-application/routing/pages-and-layouts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Dynamic Routes\",\"description\":\"Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.\",\"path\":\"canary/pages/building-your-application/routing/dynamic-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Linking and Navigating\",\"description\":\"Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.\",\"path\":\"canary/pages/building-your-application/routing/linking-and-navigating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Redirecting\",\"description\":\"Learn the different ways to handle redirects in Next.js.\",\"path\":\"canary/pages/building-your-application/routing/redirecting\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom App\",\"description\":\"Control page initialization and add a layout that persists for all pages by overriding the default App component used by Next.js.\",\"path\":\"canary/pages/building-your-application/routing/custom-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Document\",\"description\":\"Extend the default document markup added by Next.js.\",\"path\":\"canary/pages/building-your-application/routing/custom-document\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"API Routes\",\"description\":\"Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.\",\"path\":\"canary/pages/building-your-application/routing/api-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Errors\",\"description\":\"Override and extend the built-in Error page to handle custom errors.\",\"path\":\"canary/pages/building-your-application/routing/custom-error\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Internationalization\",\"description\":\"Next.js has built-in support for internationalized routing and language detection. Learn more here.\",\"path\":\"canary/pages/building-your-application/routing/internationalization\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Middleware\",\"description\":\"Learn how to use Middleware to run code before a request is completed.\",\"path\":\"canary/pages/building-your-application/routing/middleware\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Rendering\",\"description\":\"Learn the fundamentals of rendering in React and Next.js.\",\"path\":\"canary/pages/building-your-application/rendering\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Server-side Rendering (SSR)\",\"description\":\"Use Server-side Rendering to render pages on each request.\",\"path\":\"canary/pages/building-your-application/rendering/server-side-rendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Site Generation (SSG)\",\"description\":\"Use Static Site Generation (SSG) to pre-render pages at build time.\",\"path\":\"canary/pages/building-your-application/rendering/static-site-generation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Automatic Static Optimization\",\"description\":\"Next.js automatically optimizes your app to be static HTML whenever possible. Learn how it works here.\",\"path\":\"canary/pages/building-your-application/rendering/automatic-static-optimization\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client-side Rendering (CSR)\",\"description\":\"Learn how to implement client-side rendering in the Pages Router.\",\"path\":\"canary/pages/building-your-application/rendering/client-side-rendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Edge and Node.js Runtimes\",\"description\":\"Learn more about the switchable runtimes (Edge and Node.js) in Next.js.\",\"path\":\"canary/pages/building-your-application/rendering/edge-and-nodejs-runtimes\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Data Fetching\",\"description\":\"Next.js allows you to fetch data in multiple ways, with pre-rendering, server-side rendering or static-site generation, and incremental static regeneration. Learn how to manage your application data in Next.js.\",\"path\":\"canary/pages/building-your-application/data-fetching\",\"version\":\"$undefined\",\"children\":[{\"title\":\"getStaticProps\",\"description\":\"Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js.\",\"path\":\"canary/pages/building-your-application/data-fetching/get-static-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticPaths\",\"description\":\"Fetch data and generate static pages with `getStaticPaths`. Learn more about this API for data fetching in Next.js.\",\"path\":\"canary/pages/building-your-application/data-fetching/get-static-paths\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Forms and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"canary/pages/building-your-application/data-fetching/forms-and-mutations\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getServerSideProps\",\"description\":\"Fetch data on each request with `getServerSideProps`.\",\"path\":\"canary/pages/building-your-application/data-fetching/get-server-side-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Incremental Static Regeneration (ISR)\",\"description\":\"Learn how to create or update static pages at runtime with Incremental Static Regeneration.\",\"path\":\"canary/pages/building-your-application/data-fetching/incremental-static-regeneration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client-side Fetching\",\"description\":\"Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more.\",\"path\":\"canary/pages/building-your-application/data-fetching/client-side\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Styling\",\"description\":\"Learn the different ways you can style your Next.js application.\",\"path\":\"canary/pages/building-your-application/styling\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CSS\",\"description\":\"Style your Next.js Application using CSS.\",\"path\":\"canary/pages/building-your-application/styling/css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Tailwind CSS\",\"description\":\"Style your Next.js Application using Tailwind CSS.\",\"path\":\"canary/pages/building-your-application/styling/tailwind-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CSS-in-JS\",\"description\":\"Use CSS-in-JS libraries with Next.js\",\"path\":\"canary/pages/building-your-application/styling/css-in-js\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Sass\",\"description\":\"Learn how to use Sass in your Next.js application.\",\"path\":\"canary/pages/building-your-application/styling/sass\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Optimizing\",\"description\":\"Optimize your Next.js application for best performance and user experience.\",\"path\":\"canary/pages/building-your-application/optimizing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Images\",\"description\":\"Optimize your images with the built-in `next/image` component.\",\"path\":\"canary/pages/building-your-application/optimizing/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fonts\",\"description\":\"Optimize your application's web fonts with the built-in `next/font` loaders.\",\"path\":\"canary/pages/building-your-application/optimizing/fonts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Scripts\",\"description\":\"Optimize 3rd party scripts with the built-in Script component.\",\"path\":\"canary/pages/building-your-application/optimizing/scripts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Assets\",\"description\":\"Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.\",\"path\":\"canary/pages/building-your-application/optimizing/static-assets\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Bundling\",\"description\":\"Learn how to optimize your application's server and client bundles.\",\"path\":\"canary/pages/building-your-application/optimizing/package-bundling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Analytics\",\"description\":\"Measure and track page performance using Next.js Speed Insights\",\"path\":\"canary/pages/building-your-application/optimizing/analytics\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Lazy Loading\",\"description\":\"Lazy load imported libraries and React Components to improve your application's overall loading performance.\",\"path\":\"canary/pages/building-your-application/optimizing/lazy-loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Instrumentation\",\"description\":\"Learn how to use instrumentation to run code at server startup in your Next.js app\",\"path\":\"canary/pages/building-your-application/optimizing/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"OpenTelemetry\",\"description\":\"Learn how to instrument your Next.js app with OpenTelemetry.\",\"path\":\"canary/pages/building-your-application/optimizing/open-telemetry\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Third Party Libraries\",\"description\":\"Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.\",\"path\":\"canary/pages/building-your-application/optimizing/third-party-libraries\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuring\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"canary/pages/building-your-application/configuring\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Environment Variables\",\"description\":\"Learn to add and access environment variables in your Next.js application.\",\"path\":\"canary/pages/building-your-application/configuring/environment-variables\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"src Directory\",\"description\":\"Save pages under the `src` directory as an alternative to the root `pages` directory.\",\"path\":\"canary/pages/building-your-application/configuring/src-directory\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"MDX\",\"description\":\"Learn how to configure MDX to write JSX in your markdown files.\",\"path\":\"canary/pages/building-your-application/configuring/mdx\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"AMP\",\"description\":\"With minimal config, and without leaving React, you can start adding AMP and improve the performance and speed of your pages.\",\"path\":\"canary/pages/building-your-application/configuring/amp\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Babel\",\"description\":\"Extend the babel preset added by Next.js with your own configs.\",\"path\":\"canary/pages/building-your-application/configuring/babel\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"PostCSS\",\"description\":\"Extend the PostCSS config and plugins added by Next.js with your own.\",\"path\":\"canary/pages/building-your-application/configuring/post-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Server\",\"description\":\"Start a Next.js app programmatically using a custom server.\",\"path\":\"canary/pages/building-your-application/configuring/custom-server\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Draft Mode\",\"description\":\"Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.\",\"path\":\"canary/pages/building-your-application/configuring/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Error Handling\",\"description\":\"Handle errors in your Next.js app.\",\"path\":\"canary/pages/building-your-application/configuring/error-handling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Preview Mode\",\"description\":\"Next.js has the preview mode for statically generated pages. You can learn how it works here.\",\"path\":\"canary/pages/building-your-application/configuring/preview-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Content Security Policy\",\"description\":\"Learn how to set a Content Security Policy (CSP) for your Next.js application.\",\"path\":\"canary/pages/building-your-application/configuring/content-security-policy\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Debugging\",\"description\":\"Learn how to debug your Next.js application with VS Code or Chrome DevTools.\",\"path\":\"canary/pages/building-your-application/configuring/debugging\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Testing\",\"description\":\"Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Vitest, and Jest.\",\"path\":\"canary/pages/building-your-application/testing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Vitest\",\"description\":\"Learn how to set up Next.js with Vitest and React Testing Library - two popular unit testing libraries.\",\"path\":\"canary/pages/building-your-application/testing/vitest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Jest\",\"description\":\"Learn how to set up Next.js with Jest for Unit Testing.\",\"path\":\"canary/pages/building-your-application/testing/jest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Playwright\",\"description\":\"Learn how to set up Next.js with Playwright for End-to-End (E2E) and Integration testing.\",\"path\":\"canary/pages/building-your-application/testing/playwright\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Cypress\",\"description\":\"Learn how to set up Next.js with Cypress for End-to-End (E2E) and Component Testing.\",\"path\":\"canary/pages/building-your-application/testing/cypress\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Authentication\",\"description\":\"Learn how to implement authentication in Next.js, covering best practices, securing routes, authorization techniques, and session management.\",\"path\":\"canary/pages/building-your-application/authentication\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Deploying\",\"description\":\"Learn how to deploy your Next.js app to production, either managed or self-hosted.\",\"path\":\"canary/pages/building-your-application/deploying\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Production Checklist\",\"description\":\"Recommendations to ensure the best performance and user experience before taking your Next.js application to production.\",\"path\":\"canary/pages/building-your-application/deploying/production-checklist\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Exports\",\"description\":\"Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.\",\"path\":\"canary/pages/building-your-application/deploying/static-exports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Multi-Zones\",\"description\":\"Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain.\",\"path\":\"canary/pages/building-your-application/deploying/multi-zones\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Continuous Integration (CI) Build Caching\",\"description\":\"Learn how to configure CI to cache Next.js builds\",\"path\":\"canary/pages/building-your-application/deploying/ci-build-caching\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Upgrading\",\"description\":\"Learn how to upgrade to the latest versions of Next.js.\",\"path\":\"canary/pages/building-your-application/upgrading\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Codemods\",\"description\":\"Use codemods to upgrade your Next.js codebase when new features are released.\",\"path\":\"canary/pages/building-your-application/upgrading/codemods\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"From Pages to App\",\"description\":\"Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.\",\"path\":\"canary/pages/building-your-application/upgrading/app-router-migration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Vite\",\"description\":\"Learn how to migrate your existing React application from Vite to Next.js.\",\"path\":\"canary/pages/building-your-application/upgrading/from-vite\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Create React App\",\"description\":\"Learn how to migrate your existing React application from Create React App to Next.js.\",\"path\":\"canary/pages/building-your-application/upgrading/from-create-react-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 14\",\"description\":\"Upgrade your Next.js Application from Version 13 to 14.\",\"path\":\"canary/pages/building-your-application/upgrading/version-14\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 13\",\"description\":\"Upgrade your Next.js Application from Version 12 to 13.\",\"path\":\"canary/pages/building-your-application/upgrading/version-13\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 12\",\"description\":\"Upgrade your Next.js Application from Version 11 to Version 12.\",\"path\":\"canary/pages/building-your-application/upgrading/version-12\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 11\",\"description\":\"Upgrade your Next.js Application from Version 10 to Version 11.\",\"path\":\"canary/pages/building-your-application/upgrading/version-11\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 10\",\"description\":\"Upgrade your Next.js Application from Version 9 to Version 10.\",\"path\":\"canary/pages/building-your-application/upgrading/version-10\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 9\",\"description\":\"Upgrade your Next.js Application from Version 8 to Version 9.\",\"path\":\"canary/pages/building-your-application/upgrading/version-9\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"API Reference\",\"description\":\"Next.js API Reference for the Pages Router.\",\"path\":\"canary/pages/api-reference\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Components\",\"description\":\"API Reference for Next.js built-in components in the Pages Router.\",\"path\":\"canary/pages/api-reference/components\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Font\",\"description\":\"API Reference for the Font Module\",\"path\":\"canary/pages/api-reference/components/font\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cForm\u003e\",\"description\":\"Learn how to use the `\u003cForm\u003e` component to handle form submissions and search params updates with client-side navigation.\",\"path\":\"canary/pages/api-reference/components/form\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cHead\u003e\",\"description\":\"Add custom elements to the `head` of your page with the built-in Head component.\",\"path\":\"canary/pages/api-reference/components/head\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e\",\"description\":\"Optimize Images in your Next.js Application using the built-in `next/image` Component.\",\"path\":\"canary/pages/api-reference/components/image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e (Legacy)\",\"description\":\"Backwards compatible Image Optimization with the Legacy Image component.\",\"path\":\"canary/pages/api-reference/components/image-legacy\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cLink\u003e\",\"description\":\"API reference for the \u003cLink\u003e component.\",\"path\":\"canary/pages/api-reference/components/link\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cScript\u003e\",\"description\":\"Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.\",\"path\":\"canary/pages/api-reference/components/script\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Functions\",\"description\":\"API Reference for Functions and Hooks in Pages Router.\",\"path\":\"canary/pages/api-reference/functions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"getInitialProps\",\"description\":\"Fetch dynamic data on the server for your React component with getInitialProps.\",\"path\":\"canary/pages/api-reference/functions/get-initial-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getServerSideProps\",\"description\":\"API reference for `getServerSideProps`. Learn how to fetch data on each request with Next.js.\",\"path\":\"canary/pages/api-reference/functions/get-server-side-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticPaths\",\"description\":\"API reference for `getStaticPaths`. Learn how to fetch data and generate static pages with `getStaticPaths`.\",\"path\":\"canary/pages/api-reference/functions/get-static-paths\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticProps\",\"description\":\"API reference for `getStaticProps`. Learn how to use `getStaticProps` to generate static pages with Next.js.\",\"path\":\"canary/pages/api-reference/functions/get-static-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextRequest\",\"description\":\"API Reference for NextRequest.\",\"path\":\"canary/pages/api-reference/functions/next-request\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextResponse\",\"description\":\"API Reference for NextResponse.\",\"path\":\"canary/pages/api-reference/functions/next-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useAmp\",\"description\":\"Enable AMP in a page, and control the way Next.js adds AMP to the page with the AMP config.\",\"path\":\"canary/pages/api-reference/functions/use-amp\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useReportWebVitals\",\"description\":\"useReportWebVitals\",\"path\":\"canary/pages/api-reference/functions/use-report-web-vitals\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useRouter\",\"description\":\"Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.\",\"path\":\"canary/pages/api-reference/functions/use-router\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"userAgent\",\"description\":\"The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request.\",\"path\":\"canary/pages/api-reference/functions/userAgent\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuration\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"canary/pages/api-reference/config\",\"version\":\"$undefined\",\"children\":[{\"title\":\"next.config.js Options\",\"description\":\"Learn about the options available in next.config.js for the Pages Router.\",\"path\":\"canary/pages/api-reference/config/next-config-js\",\"version\":\"$undefined\",\"children\":[{\"title\":\"assetPrefix\",\"description\":\"Learn how to use the assetPrefix config option to configure your CDN.\",\"path\":\"canary/pages/api-reference/config/next-config-js/assetPrefix\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"basePath\",\"description\":\"Use `basePath` to deploy a Next.js application under a sub-path of a domain.\",\"path\":\"canary/pages/api-reference/config/next-config-js/basePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"bundlePagesRouterDependencies\",\"description\":\"Enable automatic dependency bundling for Pages Router\",\"path\":\"canary/pages/api-reference/config/next-config-js/bundlePagesRouterDependencies\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"compress\",\"description\":\"Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.\",\"path\":\"canary/pages/api-reference/config/next-config-js/compress\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"crossOrigin\",\"description\":\"Use the `crossOrigin` option to add a crossOrigin tag on the `script` tags generated by `next/script` and `next/head`.\",\"path\":\"canary/pages/api-reference/config/next-config-js/crossOrigin\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"devIndicators\",\"description\":\"Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.\",\"path\":\"canary/pages/api-reference/config/next-config-js/devIndicators\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"distDir\",\"description\":\"Set a custom build directory to use instead of the default .next directory.\",\"path\":\"canary/pages/api-reference/config/next-config-js/distDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"env\",\"description\":\"Learn to add and access environment variables in your Next.js application at build time.\",\"path\":\"canary/pages/api-reference/config/next-config-js/env\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"eslint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"canary/pages/api-reference/config/next-config-js/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"exportPathMap\",\"description\":\"Customize the pages that will be exported as HTML files when using `next export`.\",\"path\":\"canary/pages/api-reference/config/next-config-js/exportPathMap\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateBuildId\",\"description\":\"Configure the build id, which is used to identify the current build in which your application is being served.\",\"path\":\"canary/pages/api-reference/config/next-config-js/generateBuildId\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateEtags\",\"description\":\"Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.\",\"path\":\"canary/pages/api-reference/config/next-config-js/generateEtags\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"Add custom HTTP headers to your Next.js app.\",\"path\":\"canary/pages/api-reference/config/next-config-js/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"httpAgentOptions\",\"description\":\"Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.\",\"path\":\"canary/pages/api-reference/config/next-config-js/httpAgentOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"images\",\"description\":\"Custom configuration for the next/image loader\",\"path\":\"canary/pages/api-reference/config/next-config-js/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"onDemandEntries\",\"description\":\"Configure how Next.js will dispose and keep in memory pages created in development.\",\"path\":\"canary/pages/api-reference/config/next-config-js/onDemandEntries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"optimizePackageImports\",\"description\":\"API Reference for optimizePackageImports Next.js Config Option\",\"path\":\"canary/pages/api-reference/config/next-config-js/optimizePackageImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"output\",\"description\":\"Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.\",\"path\":\"canary/pages/api-reference/config/next-config-js/output\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"pageExtensions\",\"description\":\"Extend the default page extensions used by Next.js when resolving pages in the Pages Router.\",\"path\":\"canary/pages/api-reference/config/next-config-js/pageExtensions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"poweredByHeader\",\"description\":\"Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.\",\"path\":\"canary/pages/api-reference/config/next-config-js/poweredByHeader\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"productionBrowserSourceMaps\",\"description\":\"Enables browser source map generation during the production build.\",\"path\":\"canary/pages/api-reference/config/next-config-js/productionBrowserSourceMaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactStrictMode\",\"description\":\"The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in\",\"path\":\"canary/pages/api-reference/config/next-config-js/reactStrictMode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirects\",\"description\":\"Add redirects to your Next.js app.\",\"path\":\"canary/pages/api-reference/config/next-config-js/redirects\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"rewrites\",\"description\":\"Add rewrites to your Next.js app.\",\"path\":\"canary/pages/api-reference/config/next-config-js/rewrites\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Runtime Config\",\"description\":\"Add client and server runtime configuration to your Next.js app.\",\"path\":\"canary/pages/api-reference/config/next-config-js/runtime-configuration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverExternalPackages\",\"description\":\"Opt-out specific dependencies from the dependency bundling enabled by `bundlePagesRouterDependencies`.\",\"path\":\"canary/pages/api-reference/config/next-config-js/serverExternalPackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"trailingSlash\",\"description\":\"Configure Next.js pages to resolve with or without a trailing slash.\",\"path\":\"canary/pages/api-reference/config/next-config-js/trailingSlash\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"transpilePackages\",\"description\":\"Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).\",\"path\":\"canary/pages/api-reference/config/next-config-js/transpilePackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"turbo\",\"description\":\"Configure Next.js with Turbopack-specific options\",\"path\":\"canary/pages/api-reference/config/next-config-js/turbo\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"typescript\",\"description\":\"Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.\",\"path\":\"canary/pages/api-reference/config/next-config-js/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"urlImports\",\"description\":\"Configure Next.js to allow importing modules from external URLs.\",\"path\":\"canary/pages/api-reference/config/next-config-js/urlImports\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"useLightningcss\",\"description\":\"Enable experimental support for Lightning CSS.\",\"path\":\"canary/pages/api-reference/config/next-config-js/useLightningcss\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"webpack\",\"description\":\"Learn how to customize the webpack config used by Next.js\",\"path\":\"canary/pages/api-reference/config/next-config-js/webpack\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webVitalsAttribution\",\"description\":\"Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.\",\"path\":\"canary/pages/api-reference/config/next-config-js/webVitalsAttribution\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"TypeScript\",\"description\":\"Next.js provides a TypeScript-first development experience for building your React application.\",\"path\":\"canary/pages/api-reference/config/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ESLint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"canary/pages/api-reference/config/eslint\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"CLI\",\"description\":\"API Reference for the Next.js Command Line Interface (CLI) tools.\",\"path\":\"canary/pages/api-reference/cli\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CLI\",\"description\":\"Create Next.js apps using one command with the create-next-app CLI.\",\"path\":\"canary/pages/api-reference/cli/create-next-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"next CLI\",\"description\":\"Learn how to run and build your application with the Next.js CLI.\",\"path\":\"canary/pages/api-reference/cli/next\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Edge Runtime\",\"description\":\"API Reference for the Edge Runtime.\",\"path\":\"canary/pages/api-reference/edge\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Turbopack\",\"description\":\"Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.\",\"path\":\"canary/pages/api-reference/turbopack\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Architecture\",\"description\":\"How Next.js Works\",\"path\":\"canary/architecture\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Accessibility\",\"description\":\"The built-in accessibility features of Next.js.\",\"path\":\"canary/architecture/accessibility\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fast Refresh\",\"description\":\"Fast Refresh is a hot module reloading experience that gives you instantaneous feedback on edits made to your React components.\",\"path\":\"canary/architecture/fast-refresh\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Next.js Compiler\",\"description\":\"Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.\",\"path\":\"canary/architecture/nextjs-compiler\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Supported Browsers\",\"description\":\"Browser support and which JavaScript features are supported by Next.js.\",\"path\":\"canary/architecture/supported-browsers\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Community\",\"description\":\"Get involved in the Next.js community.\",\"path\":\"canary/community\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Contribution Guide\",\"description\":\"Learn how to contribute to Next.js Documentation\",\"path\":\"canary/community/contribution-guide\",\"version\":\"$undefined\",\"children\":[]}]}],\"stable\":[{\"title\":\"Getting Started\",\"description\":\"Learn how to create full-stack web applications with the Next.js App Router.\",\"path\":\"app/getting-started\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Installation\",\"description\":\"Learn how to create a new Next.js application with `create-next-app`, and set up TypeScript, ESLint, and Module Path Aliases.\",\"path\":\"app/getting-started/installation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Project Structure\",\"description\":\"Learn about the folder and file conventions in a Next.js project, and how to organize your project.\",\"path\":\"app/getting-started/project-structure\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Building Your Application\",\"description\":\"Learn how to use Next.js features to build your application.\",\"path\":\"app/building-your-application\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Routing\",\"description\":\"Learn the fundamentals of routing for front-end applications.\",\"path\":\"app/building-your-application/routing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Defining Routes\",\"description\":\"Learn how to create your first route in Next.js.\",\"path\":\"app/building-your-application/routing/defining-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Pages\",\"description\":\"Create your first page in Next.js\",\"path\":\"app/building-your-application/routing/pages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Layouts and Templates\",\"description\":\"Create your first shared layout in Next.js.\",\"path\":\"app/building-your-application/routing/layouts-and-templates\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Linking and Navigating\",\"description\":\"Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.\",\"path\":\"app/building-your-application/routing/linking-and-navigating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Error Handling\",\"description\":\"Learn how to display expected errors and handle uncaught exceptions.\",\"path\":\"app/building-your-application/routing/error-handling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Loading UI and Streaming\",\"description\":\"Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.\",\"path\":\"app/building-your-application/routing/loading-ui-and-streaming\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Redirecting\",\"description\":\"Learn the different ways to handle redirects in Next.js.\",\"path\":\"app/building-your-application/routing/redirecting\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Groups\",\"description\":\"Route Groups can be used to partition your Next.js application into different sections.\",\"path\":\"app/building-your-application/routing/route-groups\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Dynamic Routes\",\"description\":\"Dynamic Routes can be used to programmatically generate route segments from dynamic data.\",\"path\":\"app/building-your-application/routing/dynamic-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Parallel Routes\",\"description\":\"Simultaneously render one or more pages in the same view that can be navigated independently. A pattern for highly dynamic applications.\",\"path\":\"app/building-your-application/routing/parallel-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Intercepting Routes\",\"description\":\"Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals.\",\"path\":\"app/building-your-application/routing/intercepting-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Handlers\",\"description\":\"Create custom request handlers for a given route using the Web's Request and Response APIs.\",\"path\":\"app/building-your-application/routing/route-handlers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Middleware\",\"description\":\"Learn how to use Middleware to run code before a request is completed.\",\"path\":\"app/building-your-application/routing/middleware\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Internationalization\",\"description\":\"Add support for multiple languages with internationalized routing and localized content.\",\"path\":\"app/building-your-application/routing/internationalization\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Data Fetching\",\"description\":\"Learn how to fetch, cache, revalidate, and mutate data with Next.js.\",\"path\":\"app/building-your-application/data-fetching\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Data Fetching and Caching\",\"description\":\"Learn best practices for fetching data on the server or client in Next.js.\",\"path\":\"app/building-your-application/data-fetching/fetching\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Server Actions and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"app/building-your-application/data-fetching/server-actions-and-mutations\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Incremental Static Regeneration (ISR)\",\"description\":\"Learn how to create or update static pages at runtime with Incremental Static Regeneration.\",\"path\":\"app/building-your-application/data-fetching/incremental-static-regeneration\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Rendering\",\"description\":\"Learn the differences between Next.js rendering environments, strategies, and runtimes.\",\"path\":\"app/building-your-application/rendering\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Server Components\",\"description\":\"Learn how you can use React Server Components to render parts of your application on the server.\",\"path\":\"app/building-your-application/rendering/server-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client Components\",\"description\":\"Learn how to use Client Components to render parts of your application on the client.\",\"path\":\"app/building-your-application/rendering/client-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Composition Patterns\",\"description\":\"Recommended patterns for using Server and Client Components.\",\"path\":\"app/building-your-application/rendering/composition-patterns\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Partial Prerendering\",\"description\":\"Learn how to combine the benefits of static and dynamic rendering with Partial Prerendering.\",\"path\":\"app/building-your-application/rendering/partial-prerendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Runtimes\",\"description\":\"Learn about the switchable runtimes (Edge and Node.js) in Next.js.\",\"path\":\"app/building-your-application/rendering/edge-and-nodejs-runtimes\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Caching\",\"description\":\"An overview of caching mechanisms in Next.js.\",\"path\":\"app/building-your-application/caching\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Styling\",\"description\":\"Learn the different ways you can style your Next.js application.\",\"path\":\"app/building-your-application/styling\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CSS\",\"description\":\"Style your Next.js Application with CSS Modules, Global Styles, and external stylesheets.\",\"path\":\"app/building-your-application/styling/css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Tailwind CSS\",\"description\":\"Style your Next.js Application using Tailwind CSS.\",\"path\":\"app/building-your-application/styling/tailwind-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Sass\",\"description\":\"Style your Next.js application using Sass.\",\"path\":\"app/building-your-application/styling/sass\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CSS-in-JS\",\"description\":\"Use CSS-in-JS libraries with Next.js\",\"path\":\"app/building-your-application/styling/css-in-js\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Optimizing\",\"description\":\"Optimize your Next.js application for best performance and user experience.\",\"path\":\"app/building-your-application/optimizing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Images\",\"description\":\"Optimize your images with the built-in `next/image` component.\",\"path\":\"app/building-your-application/optimizing/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Videos\",\"description\":\"Recommendations and best practices for optimizing videos in your Next.js application.\",\"path\":\"app/building-your-application/optimizing/videos\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fonts\",\"description\":\"Optimize your application's web fonts with the built-in `next/font` loaders.\",\"path\":\"app/building-your-application/optimizing/fonts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Metadata\",\"description\":\"Use the Metadata API to define metadata in any layout or page.\",\"path\":\"app/building-your-application/optimizing/metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Scripts\",\"description\":\"Optimize 3rd party scripts with the built-in Script component.\",\"path\":\"app/building-your-application/optimizing/scripts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Package Bundling\",\"description\":\"Learn how to optimize your application's server and client bundles.\",\"path\":\"app/building-your-application/optimizing/package-bundling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Lazy Loading\",\"description\":\"Lazy load imported libraries and React Components to improve your application's loading performance.\",\"path\":\"app/building-your-application/optimizing/lazy-loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Analytics\",\"description\":\"Measure and track page performance using Next.js Speed Insights\",\"path\":\"app/building-your-application/optimizing/analytics\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Instrumentation\",\"description\":\"Learn how to use instrumentation to run code at server startup in your Next.js app\",\"path\":\"app/building-your-application/optimizing/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"OpenTelemetry\",\"description\":\"Learn how to instrument your Next.js app with OpenTelemetry.\",\"path\":\"app/building-your-application/optimizing/open-telemetry\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Assets\",\"description\":\"Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.\",\"path\":\"app/building-your-application/optimizing/static-assets\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Third Party Libraries\",\"description\":\"Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.\",\"path\":\"app/building-your-application/optimizing/third-party-libraries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Memory Usage\",\"description\":\"Optimize memory used by your application in development and production.\",\"path\":\"app/building-your-application/optimizing/memory-usage\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuring\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"app/building-your-application/configuring\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Environment Variables\",\"description\":\"Learn to add and access environment variables in your Next.js application.\",\"path\":\"app/building-your-application/configuring/environment-variables\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"MDX\",\"description\":\"Learn how to configure MDX and use it in your Next.js apps.\",\"path\":\"app/building-your-application/configuring/mdx\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"src Directory\",\"description\":\"Save pages under the `src` directory as an alternative to the root `pages` directory.\",\"path\":\"app/building-your-application/configuring/src-directory\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Server\",\"description\":\"Start a Next.js app programmatically using a custom server.\",\"path\":\"app/building-your-application/configuring/custom-server\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Draft Mode\",\"description\":\"Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with App Router here.\",\"path\":\"app/building-your-application/configuring/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Content Security Policy\",\"description\":\"Learn how to set a Content Security Policy (CSP) for your Next.js application.\",\"path\":\"app/building-your-application/configuring/content-security-policy\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Debugging\",\"description\":\"Learn how to debug your Next.js application with VS Code, Chrome DevTools, or Firefox DevTools.\",\"path\":\"app/building-your-application/configuring/debugging\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Progressive Web Applications (PWA)\",\"description\":\"Learn how to build a Progressive Web Application (PWA) with Next.js.\",\"path\":\"app/building-your-application/configuring/progressive-web-apps\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Testing\",\"description\":\"Learn how to set up Next.js with four commonly used testing tools — Cypress, Playwright, Vitest, and Jest.\",\"path\":\"app/building-your-application/testing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Vitest\",\"description\":\"Learn how to set up Vitest with Next.js for Unit Testing.\",\"path\":\"app/building-your-application/testing/vitest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Jest\",\"description\":\"Learn how to set up Jest with Next.js for Unit Testing and Snapshot Testing.\",\"path\":\"app/building-your-application/testing/jest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Playwright\",\"description\":\"Learn how to set up Playwright with Next.js for End-to-End (E2E) Testing.\",\"path\":\"app/building-your-application/testing/playwright\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Cypress\",\"description\":\"Learn how to set up Cypress with Next.js for End-to-End (E2E) and Component Testing.\",\"path\":\"app/building-your-application/testing/cypress\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Authentication\",\"description\":\"Learn how to implement authentication in your Next.js application.\",\"path\":\"app/building-your-application/authentication\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Deploying\",\"description\":\"Learn how to deploy your Next.js app to production, either managed or self-hosted.\",\"path\":\"app/building-your-application/deploying\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Production Checklist\",\"description\":\"Recommendations to ensure the best performance and user experience before taking your Next.js application to production.\",\"path\":\"app/building-your-application/deploying/production-checklist\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Exports\",\"description\":\"Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.\",\"path\":\"app/building-your-application/deploying/static-exports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Multi-Zones\",\"description\":\"Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain.\",\"path\":\"app/building-your-application/deploying/multi-zones\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Upgrading\",\"description\":\"Learn how to upgrade to the latest versions of Next.js.\",\"path\":\"app/building-your-application/upgrading\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Codemods\",\"description\":\"Use codemods to upgrade your Next.js codebase when new features are released.\",\"path\":\"app/building-your-application/upgrading/codemods\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 15\",\"description\":\"Upgrade your Next.js Application from Version 14 to 15.\",\"path\":\"app/building-your-application/upgrading/version-15\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 14\",\"description\":\"Upgrade your Next.js Application from Version 13 to 14.\",\"path\":\"app/building-your-application/upgrading/version-14\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"App Router Migration\",\"description\":\"Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.\",\"path\":\"app/building-your-application/upgrading/app-router-migration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Create React App\",\"description\":\"Learn how to migrate your existing React application from Create React App to Next.js.\",\"path\":\"app/building-your-application/upgrading/from-create-react-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Vite\",\"description\":\"Learn how to migrate your existing React application from Vite to Next.js.\",\"path\":\"app/building-your-application/upgrading/from-vite\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Examples\",\"description\":\"Examples of popular Next.js UI patterns and use cases.\",\"path\":\"app/building-your-application/examples\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"API Reference\",\"description\":\"Next.js API Reference for the App Router.\",\"path\":\"app/api-reference\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Directives\",\"description\":\"Directives are used to modify the behavior of your Next.js application.\",\"path\":\"app/api-reference/directives\",\"version\":\"$undefined\",\"children\":[{\"title\":\"use client\",\"description\":\"Learn how to use the use client directive to render a component on the client.\",\"path\":\"app/api-reference/directives/use-client\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"use server\",\"description\":\"Learn how to use the use server directive to execute code on the server.\",\"path\":\"app/api-reference/directives/use-server\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Components\",\"description\":\"API Reference for Next.js built-in components.\",\"path\":\"app/api-reference/components\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Font\",\"description\":\"Optimizing loading web fonts with the built-in `next/font` loaders.\",\"path\":\"app/api-reference/components/font\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cForm\u003e\",\"description\":\"Learn how to use the `\u003cForm\u003e` component to handle form submissions and search params updates with client-side navigation.\",\"path\":\"app/api-reference/components/form\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e\",\"description\":\"Optimize Images in your Next.js Application using the built-in `next/image` Component.\",\"path\":\"app/api-reference/components/image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cLink\u003e\",\"description\":\"Enable fast client-side navigation with the built-in `next/link` component.\",\"path\":\"app/api-reference/components/link\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cScript\u003e\",\"description\":\"Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.\",\"path\":\"app/api-reference/components/script\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"File Conventions\",\"description\":\"API Reference for Next.js Special Files.\",\"path\":\"app/api-reference/file-conventions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"default.js\",\"description\":\"API Reference for the default.js file.\",\"path\":\"app/api-reference/file-conventions/default\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"error.js\",\"description\":\"API reference for the error.js special file.\",\"path\":\"app/api-reference/file-conventions/error\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"instrumentation.js\",\"description\":\"API reference for the instrumentation.js file.\",\"path\":\"app/api-reference/file-conventions/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"layout.js\",\"description\":\"API reference for the layout.js file.\",\"path\":\"app/api-reference/file-conventions/layout\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"loading.js\",\"description\":\"API reference for the loading.js file.\",\"path\":\"app/api-reference/file-conventions/loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"mdx-components.js\",\"description\":\"API reference for the mdx-components.js file.\",\"path\":\"app/api-reference/file-conventions/mdx-components\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"middleware.js\",\"description\":\"API reference for the middleware.js file.\",\"path\":\"app/api-reference/file-conventions/middleware\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"not-found.js\",\"description\":\"API reference for the not-found.js file.\",\"path\":\"app/api-reference/file-conventions/not-found\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"page.js\",\"description\":\"API reference for the page.js file.\",\"path\":\"app/api-reference/file-conventions/page\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"route.js\",\"description\":\"API reference for the route.js special file.\",\"path\":\"app/api-reference/file-conventions/route\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Route Segment Config\",\"description\":\"Learn about how to configure options for Next.js route segments.\",\"path\":\"app/api-reference/file-conventions/route-segment-config\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"template.js\",\"description\":\"API Reference for the template.js file.\",\"path\":\"app/api-reference/file-conventions/template\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Metadata Files\",\"description\":\"API documentation for the metadata file conventions.\",\"path\":\"app/api-reference/file-conventions/metadata\",\"version\":\"$undefined\",\"children\":[{\"title\":\"favicon, icon, and apple-icon\",\"description\":\"API Reference for the Favicon, Icon and Apple Icon file conventions.\",\"path\":\"app/api-reference/file-conventions/metadata/app-icons\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"manifest.json\",\"description\":\"API Reference for manifest.json file.\",\"path\":\"app/api-reference/file-conventions/metadata/manifest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"opengraph-image and twitter-image\",\"description\":\"API Reference for the Open Graph Image and Twitter Image file conventions.\",\"path\":\"app/api-reference/file-conventions/metadata/opengraph-image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"robots.txt\",\"description\":\"API Reference for robots.txt file.\",\"path\":\"app/api-reference/file-conventions/metadata/robots\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"sitemap.xml\",\"description\":\"API Reference for the sitemap.xml file.\",\"path\":\"app/api-reference/file-conventions/metadata/sitemap\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"Functions\",\"description\":\"API Reference for Next.js Functions and Hooks.\",\"path\":\"app/api-reference/functions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"connection\",\"description\":\"API Reference for the connection function.\",\"path\":\"app/api-reference/functions/connection\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"cookies\",\"description\":\"API Reference for the cookies function.\",\"path\":\"app/api-reference/functions/cookies\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"draftMode\",\"description\":\"API Reference for the draftMode function.\",\"path\":\"app/api-reference/functions/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"fetch\",\"description\":\"API reference for the extended fetch function.\",\"path\":\"app/api-reference/functions/fetch\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateImageMetadata\",\"description\":\"Learn how to generate multiple images in a single Metadata API special file.\",\"path\":\"app/api-reference/functions/generate-image-metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateMetadata\",\"description\":\"Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.\",\"path\":\"app/api-reference/functions/generate-metadata\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateSitemaps\",\"description\":\"Learn how to use the generateSiteMaps function to create multiple sitemaps for your application.\",\"path\":\"app/api-reference/functions/generate-sitemaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateStaticParams\",\"description\":\"API reference for the generateStaticParams function.\",\"path\":\"app/api-reference/functions/generate-static-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateViewport\",\"description\":\"API Reference for the generateViewport function.\",\"path\":\"app/api-reference/functions/generate-viewport\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"API reference for the headers function.\",\"path\":\"app/api-reference/functions/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ImageResponse\",\"description\":\"API Reference for the ImageResponse constructor.\",\"path\":\"app/api-reference/functions/image-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextRequest\",\"description\":\"API Reference for NextRequest.\",\"path\":\"app/api-reference/functions/next-request\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextResponse\",\"description\":\"API Reference for NextResponse.\",\"path\":\"app/api-reference/functions/next-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"notFound\",\"description\":\"API Reference for the notFound function.\",\"path\":\"app/api-reference/functions/not-found\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"permanentRedirect\",\"description\":\"API Reference for the permanentRedirect function.\",\"path\":\"app/api-reference/functions/permanentRedirect\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirect\",\"description\":\"API Reference for the redirect function.\",\"path\":\"app/api-reference/functions/redirect\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"revalidatePath\",\"description\":\"API Reference for the revalidatePath function.\",\"path\":\"app/api-reference/functions/revalidatePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"revalidateTag\",\"description\":\"API Reference for the revalidateTag function.\",\"path\":\"app/api-reference/functions/revalidateTag\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"unstable_after\",\"description\":\"API Reference for the after function.\",\"path\":\"app/api-reference/functions/unstable_after\",\"version\":\"unstable\",\"children\":[]},{\"title\":\"unstable_cache\",\"description\":\"API Reference for the unstable_cache function.\",\"path\":\"app/api-reference/functions/unstable_cache\",\"version\":\"legacy\",\"children\":[]},{\"title\":\"unstable_noStore\",\"description\":\"API Reference for the unstable_noStore function.\",\"path\":\"app/api-reference/functions/unstable_noStore\",\"version\":\"legacy\",\"children\":[]},{\"title\":\"unstable_rethrow\",\"description\":\"API Reference for the unstable_rethrow function.\",\"path\":\"app/api-reference/functions/unstable_rethrow\",\"version\":\"unstable\",\"children\":[]},{\"title\":\"useParams\",\"description\":\"API Reference for the useParams hook.\",\"path\":\"app/api-reference/functions/use-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"usePathname\",\"description\":\"API Reference for the usePathname hook.\",\"path\":\"app/api-reference/functions/use-pathname\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useReportWebVitals\",\"description\":\"API Reference for the useReportWebVitals function.\",\"path\":\"app/api-reference/functions/use-report-web-vitals\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useRouter\",\"description\":\"API reference for the useRouter hook.\",\"path\":\"app/api-reference/functions/use-router\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSearchParams\",\"description\":\"API Reference for the useSearchParams hook.\",\"path\":\"app/api-reference/functions/use-search-params\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSelectedLayoutSegment\",\"description\":\"API Reference for the useSelectedLayoutSegment hook.\",\"path\":\"app/api-reference/functions/use-selected-layout-segment\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useSelectedLayoutSegments\",\"description\":\"API Reference for the useSelectedLayoutSegments hook.\",\"path\":\"app/api-reference/functions/use-selected-layout-segments\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"userAgent\",\"description\":\"The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request.\",\"path\":\"app/api-reference/functions/userAgent\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"next.config.js Options\",\"description\":\"Learn how to configure your application with next.config.js.\",\"path\":\"app/api-reference/next-config-js\",\"version\":\"$undefined\",\"children\":[{\"title\":\"appDir\",\"description\":\"Enable the App Router to use layouts, streaming, and more.\",\"path\":\"app/api-reference/next-config-js/appDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"assetPrefix\",\"description\":\"Learn how to use the assetPrefix config option to configure your CDN.\",\"path\":\"app/api-reference/next-config-js/assetPrefix\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"basePath\",\"description\":\"Use `basePath` to deploy a Next.js application under a sub-path of a domain.\",\"path\":\"app/api-reference/next-config-js/basePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"compress\",\"description\":\"Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.\",\"path\":\"app/api-reference/next-config-js/compress\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"crossOrigin\",\"description\":\"Use the `crossOrigin` option to add a crossOrigin tag on the `script` tags generated by `next/script`.\",\"path\":\"app/api-reference/next-config-js/crossOrigin\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"cssChunking\",\"description\":\"Use the `cssChunking` option to control how CSS files are chunked in your Next.js application.\",\"path\":\"app/api-reference/next-config-js/cssChunking\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"devIndicators\",\"description\":\"Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.\",\"path\":\"app/api-reference/next-config-js/devIndicators\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"distDir\",\"description\":\"Set a custom build directory to use instead of the default .next directory.\",\"path\":\"app/api-reference/next-config-js/distDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"env\",\"description\":\"Learn to add and access environment variables in your Next.js application at build time.\",\"path\":\"app/api-reference/next-config-js/env\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"eslint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"app/api-reference/next-config-js/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"expireTime\",\"description\":\"Customize stale-while-revalidate expire time for ISR enabled pages.\",\"path\":\"app/api-reference/next-config-js/expireTime\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"exportPathMap\",\"description\":\"Customize the pages that will be exported as HTML files when using `next export`.\",\"path\":\"app/api-reference/next-config-js/exportPathMap\",\"version\":\"legacy\",\"children\":[]},{\"title\":\"generateBuildId\",\"description\":\"Configure the build id, which is used to identify the current build in which your application is being served.\",\"path\":\"app/api-reference/next-config-js/generateBuildId\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateEtags\",\"description\":\"Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.\",\"path\":\"app/api-reference/next-config-js/generateEtags\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"Add custom HTTP headers to your Next.js app.\",\"path\":\"app/api-reference/next-config-js/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"httpAgentOptions\",\"description\":\"Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.\",\"path\":\"app/api-reference/next-config-js/httpAgentOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"images\",\"description\":\"Custom configuration for the next/image loader\",\"path\":\"app/api-reference/next-config-js/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"cacheHandler\",\"description\":\"Configure the Next.js cache used for storing and revalidating data to use any external service like Redis, Memcached, or others.\",\"path\":\"app/api-reference/next-config-js/incrementalCacheHandlerPath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"logging\",\"description\":\"Configure how data fetches are logged to the console when running Next.js in development mode.\",\"path\":\"app/api-reference/next-config-js/logging\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"mdxRs\",\"description\":\"Use the new Rust compiler to compile MDX files in the App Router.\",\"path\":\"app/api-reference/next-config-js/mdxRs\",\"version\":\"experimental.\",\"children\":[]},{\"title\":\"onDemandEntries\",\"description\":\"Configure how Next.js will dispose and keep in memory pages created in development.\",\"path\":\"app/api-reference/next-config-js/onDemandEntries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"optimizePackageImports\",\"description\":\"API Reference for optimizePackageImports Next.js Config Option\",\"path\":\"app/api-reference/next-config-js/optimizePackageImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"output\",\"description\":\"Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.\",\"path\":\"app/api-reference/next-config-js/output\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"pageExtensions\",\"description\":\"Extend the default page extensions used by Next.js when resolving pages in the Pages Router.\",\"path\":\"app/api-reference/next-config-js/pageExtensions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"poweredByHeader\",\"description\":\"Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.\",\"path\":\"app/api-reference/next-config-js/poweredByHeader\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"ppr\",\"description\":\"Learn how to enable Partial Prerendering in Next.js.\",\"path\":\"app/api-reference/next-config-js/ppr\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"productionBrowserSourceMaps\",\"description\":\"Enables browser source map generation during the production build.\",\"path\":\"app/api-reference/next-config-js/productionBrowserSourceMaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactCompiler\",\"description\":\"Enable the React Compiler to automatically optimize component rendering.\",\"path\":\"app/api-reference/next-config-js/reactCompiler\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"reactMaxHeadersLength\",\"description\":\"The maximum length of the headers that are emitted by React and added to the response.\",\"path\":\"app/api-reference/next-config-js/reactMaxHeadersLength\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactStrictMode\",\"description\":\"The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in\",\"path\":\"app/api-reference/next-config-js/reactStrictMode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirects\",\"description\":\"Add redirects to your Next.js app.\",\"path\":\"app/api-reference/next-config-js/redirects\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"rewrites\",\"description\":\"Add rewrites to your Next.js app.\",\"path\":\"app/api-reference/next-config-js/rewrites\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"sassOptions\",\"description\":\"Configure Sass options.\",\"path\":\"app/api-reference/next-config-js/sassOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverActions\",\"description\":\"Configure Server Actions behavior in your Next.js application.\",\"path\":\"app/api-reference/next-config-js/serverActions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverComponentsHmrCache\",\"description\":\"Configure whether fetch responses in Server Components are cached across HMR refresh requests.\",\"path\":\"app/api-reference/next-config-js/serverComponentsHmrCache\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"serverExternalPackages\",\"description\":\"Opt-out specific dependencies from the Server Components bundling and use native Node.js `require`.\",\"path\":\"app/api-reference/next-config-js/serverExternalPackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"staleTimes\",\"description\":\"Learn how to override the invalidation time of the Client Router Cache.\",\"path\":\"app/api-reference/next-config-js/staleTimes\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"staticGeneration*\",\"description\":\"Learn how to configure static generation in your Next.js application.\",\"path\":\"app/api-reference/next-config-js/staticGeneration\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"trailingSlash\",\"description\":\"Configure Next.js pages to resolve with or without a trailing slash.\",\"path\":\"app/api-reference/next-config-js/trailingSlash\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"transpilePackages\",\"description\":\"Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).\",\"path\":\"app/api-reference/next-config-js/transpilePackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"turbo\",\"description\":\"Configure Next.js with Turbopack-specific options\",\"path\":\"app/api-reference/next-config-js/turbo\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"typedRoutes\",\"description\":\"Enable experimental support for statically typed links.\",\"path\":\"app/api-reference/next-config-js/typedRoutes\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"typescript\",\"description\":\"Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.\",\"path\":\"app/api-reference/next-config-js/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"urlImports\",\"description\":\"Configure Next.js to allow importing modules from external URLs.\",\"path\":\"app/api-reference/next-config-js/urlImports\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"useLightningcss\",\"description\":\"Enable experimental support for Lightning CSS.\",\"path\":\"app/api-reference/next-config-js/useLightningcss\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"webpack\",\"description\":\"Learn how to customize the webpack config used by Next.js\",\"path\":\"app/api-reference/next-config-js/webpack\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webVitalsAttribution\",\"description\":\"Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.\",\"path\":\"app/api-reference/next-config-js/webVitalsAttribution\",\"version\":\"experimental\",\"children\":[]}]},{\"title\":\"CLI\",\"description\":\"API Reference for the Next.js Command Line Interface (CLI) tools.\",\"path\":\"app/api-reference/cli\",\"version\":\"$undefined\",\"children\":[{\"title\":\"create-next-app\",\"description\":\"Create Next.js apps using one command with the create-next-app CLI.\",\"path\":\"app/api-reference/cli/create-next-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"next CLI\",\"description\":\"Learn how to run and build your application with the Next.js CLI.\",\"path\":\"app/api-reference/cli/next\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Edge Runtime\",\"description\":\"API Reference for the Edge Runtime.\",\"path\":\"app/api-reference/edge\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Getting Started\",\"description\":\"Learn how to create full-stack web applications with Next.js with the Pages Router.\",\"path\":\"pages/getting-started\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Installation\",\"description\":\"How to create a new Next.js application with `create-next-app`. Set up TypeScript, ESLint,and configure your `next.config.js` file.\",\"path\":\"pages/getting-started/installation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Project Structure\",\"description\":\"Learn about the folder and file conventions in a Next.js project, and how to organize your project.\",\"path\":\"pages/getting-started/project-structure\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Building Your Application\",\"description\":\"Learn how to use Next.js features to build your application.\",\"path\":\"pages/building-your-application\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Routing\",\"description\":\"Learn the fundamentals of routing for front-end applications with the Pages Router.\",\"path\":\"pages/building-your-application/routing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Pages and Layouts\",\"description\":\"Create your first page and shared layout with the Pages Router.\",\"path\":\"pages/building-your-application/routing/pages-and-layouts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Dynamic Routes\",\"description\":\"Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.\",\"path\":\"pages/building-your-application/routing/dynamic-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Linking and Navigating\",\"description\":\"Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.\",\"path\":\"pages/building-your-application/routing/linking-and-navigating\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Redirecting\",\"description\":\"Learn the different ways to handle redirects in Next.js.\",\"path\":\"pages/building-your-application/routing/redirecting\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom App\",\"description\":\"Control page initialization and add a layout that persists for all pages by overriding the default App component used by Next.js.\",\"path\":\"pages/building-your-application/routing/custom-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Document\",\"description\":\"Extend the default document markup added by Next.js.\",\"path\":\"pages/building-your-application/routing/custom-document\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"API Routes\",\"description\":\"Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.\",\"path\":\"pages/building-your-application/routing/api-routes\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Errors\",\"description\":\"Override and extend the built-in Error page to handle custom errors.\",\"path\":\"pages/building-your-application/routing/custom-error\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Internationalization\",\"description\":\"Next.js has built-in support for internationalized routing and language detection. Learn more here.\",\"path\":\"pages/building-your-application/routing/internationalization\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Middleware\",\"description\":\"Learn how to use Middleware to run code before a request is completed.\",\"path\":\"pages/building-your-application/routing/middleware\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Rendering\",\"description\":\"Learn the fundamentals of rendering in React and Next.js.\",\"path\":\"pages/building-your-application/rendering\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Server-side Rendering (SSR)\",\"description\":\"Use Server-side Rendering to render pages on each request.\",\"path\":\"pages/building-your-application/rendering/server-side-rendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Site Generation (SSG)\",\"description\":\"Use Static Site Generation (SSG) to pre-render pages at build time.\",\"path\":\"pages/building-your-application/rendering/static-site-generation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Automatic Static Optimization\",\"description\":\"Next.js automatically optimizes your app to be static HTML whenever possible. Learn how it works here.\",\"path\":\"pages/building-your-application/rendering/automatic-static-optimization\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client-side Rendering (CSR)\",\"description\":\"Learn how to implement client-side rendering in the Pages Router.\",\"path\":\"pages/building-your-application/rendering/client-side-rendering\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Edge and Node.js Runtimes\",\"description\":\"Learn more about the switchable runtimes (Edge and Node.js) in Next.js.\",\"path\":\"pages/building-your-application/rendering/edge-and-nodejs-runtimes\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Data Fetching\",\"description\":\"Next.js allows you to fetch data in multiple ways, with pre-rendering, server-side rendering or static-site generation, and incremental static regeneration. Learn how to manage your application data in Next.js.\",\"path\":\"pages/building-your-application/data-fetching\",\"version\":\"$undefined\",\"children\":[{\"title\":\"getStaticProps\",\"description\":\"Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js.\",\"path\":\"pages/building-your-application/data-fetching/get-static-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticPaths\",\"description\":\"Fetch data and generate static pages with `getStaticPaths`. Learn more about this API for data fetching in Next.js.\",\"path\":\"pages/building-your-application/data-fetching/get-static-paths\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Forms and Mutations\",\"description\":\"Learn how to handle form submissions and data mutations with Next.js.\",\"path\":\"pages/building-your-application/data-fetching/forms-and-mutations\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getServerSideProps\",\"description\":\"Fetch data on each request with `getServerSideProps`.\",\"path\":\"pages/building-your-application/data-fetching/get-server-side-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Incremental Static Regeneration (ISR)\",\"description\":\"Learn how to create or update static pages at runtime with Incremental Static Regeneration.\",\"path\":\"pages/building-your-application/data-fetching/incremental-static-regeneration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Client-side Fetching\",\"description\":\"Learn about client-side data fetching, and how to use SWR, a data fetching React hook library that handles caching, revalidation, focus tracking, refetching on interval and more.\",\"path\":\"pages/building-your-application/data-fetching/client-side\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Styling\",\"description\":\"Learn the different ways you can style your Next.js application.\",\"path\":\"pages/building-your-application/styling\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CSS\",\"description\":\"Style your Next.js Application using CSS.\",\"path\":\"pages/building-your-application/styling/css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Tailwind CSS\",\"description\":\"Style your Next.js Application using Tailwind CSS.\",\"path\":\"pages/building-your-application/styling/tailwind-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CSS-in-JS\",\"description\":\"Use CSS-in-JS libraries with Next.js\",\"path\":\"pages/building-your-application/styling/css-in-js\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Sass\",\"description\":\"Learn how to use Sass in your Next.js application.\",\"path\":\"pages/building-your-application/styling/sass\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Optimizing\",\"description\":\"Optimize your Next.js application for best performance and user experience.\",\"path\":\"pages/building-your-application/optimizing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Images\",\"description\":\"Optimize your images with the built-in `next/image` component.\",\"path\":\"pages/building-your-application/optimizing/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fonts\",\"description\":\"Optimize your application's web fonts with the built-in `next/font` loaders.\",\"path\":\"pages/building-your-application/optimizing/fonts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Scripts\",\"description\":\"Optimize 3rd party scripts with the built-in Script component.\",\"path\":\"pages/building-your-application/optimizing/scripts\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Assets\",\"description\":\"Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.\",\"path\":\"pages/building-your-application/optimizing/static-assets\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Bundling\",\"description\":\"Learn how to optimize your application's server and client bundles.\",\"path\":\"pages/building-your-application/optimizing/package-bundling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Analytics\",\"description\":\"Measure and track page performance using Next.js Speed Insights\",\"path\":\"pages/building-your-application/optimizing/analytics\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Lazy Loading\",\"description\":\"Lazy load imported libraries and React Components to improve your application's overall loading performance.\",\"path\":\"pages/building-your-application/optimizing/lazy-loading\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Instrumentation\",\"description\":\"Learn how to use instrumentation to run code at server startup in your Next.js app\",\"path\":\"pages/building-your-application/optimizing/instrumentation\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"OpenTelemetry\",\"description\":\"Learn how to instrument your Next.js app with OpenTelemetry.\",\"path\":\"pages/building-your-application/optimizing/open-telemetry\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Third Party Libraries\",\"description\":\"Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.\",\"path\":\"pages/building-your-application/optimizing/third-party-libraries\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Configuring\",\"description\":\"Learn how to configure your Next.js application.\",\"path\":\"pages/building-your-application/configuring\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Environment Variables\",\"description\":\"Learn to add and access environment variables in your Next.js application.\",\"path\":\"pages/building-your-application/configuring/environment-variables\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"src Directory\",\"description\":\"Save pages under the `src` directory as an alternative to the root `pages` directory.\",\"path\":\"pages/building-your-application/configuring/src-directory\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"MDX\",\"description\":\"Learn how to configure MDX to write JSX in your markdown files.\",\"path\":\"pages/building-your-application/configuring/mdx\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"AMP\",\"description\":\"With minimal config, and without leaving React, you can start adding AMP and improve the performance and speed of your pages.\",\"path\":\"pages/building-your-application/configuring/amp\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Babel\",\"description\":\"Extend the babel preset added by Next.js with your own configs.\",\"path\":\"pages/building-your-application/configuring/babel\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"PostCSS\",\"description\":\"Extend the PostCSS config and plugins added by Next.js with your own.\",\"path\":\"pages/building-your-application/configuring/post-css\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Custom Server\",\"description\":\"Start a Next.js app programmatically using a custom server.\",\"path\":\"pages/building-your-application/configuring/custom-server\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Draft Mode\",\"description\":\"Next.js has draft mode to toggle between static and dynamic pages. You can learn how it works with Pages Router.\",\"path\":\"pages/building-your-application/configuring/draft-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Error Handling\",\"description\":\"Handle errors in your Next.js app.\",\"path\":\"pages/building-your-application/configuring/error-handling\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Preview Mode\",\"description\":\"Next.js has the preview mode for statically generated pages. You can learn how it works here.\",\"path\":\"pages/building-your-application/configuring/preview-mode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Content Security Policy\",\"description\":\"Learn how to set a Content Security Policy (CSP) for your Next.js application.\",\"path\":\"pages/building-your-application/configuring/content-security-policy\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Debugging\",\"description\":\"Learn how to debug your Next.js application with VS Code or Chrome DevTools.\",\"path\":\"pages/building-your-application/configuring/debugging\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Testing\",\"description\":\"Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Vitest, and Jest.\",\"path\":\"pages/building-your-application/testing\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Vitest\",\"description\":\"Learn how to set up Next.js with Vitest and React Testing Library - two popular unit testing libraries.\",\"path\":\"pages/building-your-application/testing/vitest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Jest\",\"description\":\"Learn how to set up Next.js with Jest for Unit Testing.\",\"path\":\"pages/building-your-application/testing/jest\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Playwright\",\"description\":\"Learn how to set up Next.js with Playwright for End-to-End (E2E) and Integration testing.\",\"path\":\"pages/building-your-application/testing/playwright\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Cypress\",\"description\":\"Learn how to set up Next.js with Cypress for End-to-End (E2E) and Component Testing.\",\"path\":\"pages/building-your-application/testing/cypress\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Authentication\",\"description\":\"Learn how to implement authentication in Next.js, covering best practices, securing routes, authorization techniques, and session management.\",\"path\":\"pages/building-your-application/authentication\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Deploying\",\"description\":\"Learn how to deploy your Next.js app to production, either managed or self-hosted.\",\"path\":\"pages/building-your-application/deploying\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Production Checklist\",\"description\":\"Recommendations to ensure the best performance and user experience before taking your Next.js application to production.\",\"path\":\"pages/building-your-application/deploying/production-checklist\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Static Exports\",\"description\":\"Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.\",\"path\":\"pages/building-your-application/deploying/static-exports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Multi-Zones\",\"description\":\"Learn how to build micro-frontends using Next.js Multi-Zones to deploy multiple Next.js apps under a single domain.\",\"path\":\"pages/building-your-application/deploying/multi-zones\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Continuous Integration (CI) Build Caching\",\"description\":\"Learn how to configure CI to cache Next.js builds\",\"path\":\"pages/building-your-application/deploying/ci-build-caching\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Upgrading\",\"description\":\"Learn how to upgrade to the latest versions of Next.js.\",\"path\":\"pages/building-your-application/upgrading\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Codemods\",\"description\":\"Use codemods to upgrade your Next.js codebase when new features are released.\",\"path\":\"pages/building-your-application/upgrading/codemods\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"From Pages to App\",\"description\":\"Learn how to upgrade your existing Next.js application from the Pages Router to the App Router.\",\"path\":\"pages/building-your-application/upgrading/app-router-migration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Vite\",\"description\":\"Learn how to migrate your existing React application from Vite to Next.js.\",\"path\":\"pages/building-your-application/upgrading/from-vite\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Migrating from Create React App\",\"description\":\"Learn how to migrate your existing React application from Create React App to Next.js.\",\"path\":\"pages/building-your-application/upgrading/from-create-react-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 14\",\"description\":\"Upgrade your Next.js Application from Version 13 to 14.\",\"path\":\"pages/building-your-application/upgrading/version-14\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 13\",\"description\":\"Upgrade your Next.js Application from Version 12 to 13.\",\"path\":\"pages/building-your-application/upgrading/version-13\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 12\",\"description\":\"Upgrade your Next.js Application from Version 11 to Version 12.\",\"path\":\"pages/building-your-application/upgrading/version-12\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 11\",\"description\":\"Upgrade your Next.js Application from Version 10 to Version 11.\",\"path\":\"pages/building-your-application/upgrading/version-11\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 10\",\"description\":\"Upgrade your Next.js Application from Version 9 to Version 10.\",\"path\":\"pages/building-your-application/upgrading/version-10\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Version 9\",\"description\":\"Upgrade your Next.js Application from Version 8 to Version 9.\",\"path\":\"pages/building-your-application/upgrading/version-9\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"API Reference\",\"description\":\"Next.js API Reference for the Pages Router.\",\"path\":\"pages/api-reference\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Components\",\"description\":\"API Reference for Next.js built-in components in the Pages Router.\",\"path\":\"pages/api-reference/components\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Font\",\"description\":\"API Reference for the Font Module\",\"path\":\"pages/api-reference/components/font\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cForm\u003e\",\"description\":\"Learn how to use the `\u003cForm\u003e` component to handle form submissions and search params updates with client-side navigation.\",\"path\":\"pages/api-reference/components/form\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cHead\u003e\",\"description\":\"Add custom elements to the `head` of your page with the built-in Head component.\",\"path\":\"pages/api-reference/components/head\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e\",\"description\":\"Optimize Images in your Next.js Application using the built-in `next/image` Component.\",\"path\":\"pages/api-reference/components/image\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cImage\u003e (Legacy)\",\"description\":\"Backwards compatible Image Optimization with the Legacy Image component.\",\"path\":\"pages/api-reference/components/image-legacy\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cLink\u003e\",\"description\":\"API reference for the \u003cLink\u003e component.\",\"path\":\"pages/api-reference/components/link\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"\u003cScript\u003e\",\"description\":\"Optimize third-party scripts in your Next.js application using the built-in `next/script` Component.\",\"path\":\"pages/api-reference/components/script\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Functions\",\"description\":\"API Reference for Functions and Hooks in Pages Router.\",\"path\":\"pages/api-reference/functions\",\"version\":\"$undefined\",\"children\":[{\"title\":\"getInitialProps\",\"description\":\"Fetch dynamic data on the server for your React component with getInitialProps.\",\"path\":\"pages/api-reference/functions/get-initial-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getServerSideProps\",\"description\":\"API reference for `getServerSideProps`. Learn how to fetch data on each request with Next.js.\",\"path\":\"pages/api-reference/functions/get-server-side-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticPaths\",\"description\":\"API reference for `getStaticPaths`. Learn how to fetch data and generate static pages with `getStaticPaths`.\",\"path\":\"pages/api-reference/functions/get-static-paths\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"getStaticProps\",\"description\":\"API reference for `getStaticProps`. Learn how to use `getStaticProps` to generate static pages with Next.js.\",\"path\":\"pages/api-reference/functions/get-static-props\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextRequest\",\"description\":\"API Reference for NextRequest.\",\"path\":\"pages/api-reference/functions/next-request\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"NextResponse\",\"description\":\"API Reference for NextResponse.\",\"path\":\"pages/api-reference/functions/next-response\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useAmp\",\"description\":\"Enable AMP in a page, and control the way Next.js adds AMP to the page with the AMP config.\",\"path\":\"pages/api-reference/functions/use-amp\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useReportWebVitals\",\"description\":\"useReportWebVitals\",\"path\":\"pages/api-reference/functions/use-report-web-vitals\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"useRouter\",\"description\":\"Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.\",\"path\":\"pages/api-reference/functions/use-router\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"userAgent\",\"description\":\"The userAgent helper extends the Web Request API with additional properties and methods to interact with the user agent object from the request.\",\"path\":\"pages/api-reference/functions/userAgent\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"next.config.js Options\",\"description\":\"Learn about the options available in next.config.js for the Pages Router.\",\"path\":\"pages/api-reference/next-config-js\",\"version\":\"$undefined\",\"children\":[{\"title\":\"assetPrefix\",\"description\":\"Learn how to use the assetPrefix config option to configure your CDN.\",\"path\":\"pages/api-reference/next-config-js/assetPrefix\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"basePath\",\"description\":\"Use `basePath` to deploy a Next.js application under a sub-path of a domain.\",\"path\":\"pages/api-reference/next-config-js/basePath\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"bundlePagesRouterDependencies\",\"description\":\"Enable automatic dependency bundling for Pages Router\",\"path\":\"pages/api-reference/next-config-js/bundlePagesRouterDependencies\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"compress\",\"description\":\"Next.js provides gzip compression to compress rendered content and static files, it only works with the server target. Learn more about it here.\",\"path\":\"pages/api-reference/next-config-js/compress\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"crossOrigin\",\"description\":\"Use the `crossOrigin` option to add a crossOrigin tag on the `script` tags generated by `next/script` and `next/head`.\",\"path\":\"pages/api-reference/next-config-js/crossOrigin\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"devIndicators\",\"description\":\"Optimized pages include an indicator to let you know if it's being statically optimized. You can opt-out of it here.\",\"path\":\"pages/api-reference/next-config-js/devIndicators\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"distDir\",\"description\":\"Set a custom build directory to use instead of the default .next directory.\",\"path\":\"pages/api-reference/next-config-js/distDir\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"env\",\"description\":\"Learn to add and access environment variables in your Next.js application at build time.\",\"path\":\"pages/api-reference/next-config-js/env\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"eslint\",\"description\":\"Next.js reports ESLint errors and warnings during builds by default. Learn how to opt-out of this behavior here.\",\"path\":\"pages/api-reference/next-config-js/eslint\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"exportPathMap\",\"description\":\"Customize the pages that will be exported as HTML files when using `next export`.\",\"path\":\"pages/api-reference/next-config-js/exportPathMap\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateBuildId\",\"description\":\"Configure the build id, which is used to identify the current build in which your application is being served.\",\"path\":\"pages/api-reference/next-config-js/generateBuildId\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"generateEtags\",\"description\":\"Next.js will generate etags for every page by default. Learn more about how to disable etag generation here.\",\"path\":\"pages/api-reference/next-config-js/generateEtags\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"headers\",\"description\":\"Add custom HTTP headers to your Next.js app.\",\"path\":\"pages/api-reference/next-config-js/headers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"httpAgentOptions\",\"description\":\"Next.js will automatically use HTTP Keep-Alive by default. Learn more about how to disable HTTP Keep-Alive here.\",\"path\":\"pages/api-reference/next-config-js/httpAgentOptions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"images\",\"description\":\"Custom configuration for the next/image loader\",\"path\":\"pages/api-reference/next-config-js/images\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"onDemandEntries\",\"description\":\"Configure how Next.js will dispose and keep in memory pages created in development.\",\"path\":\"pages/api-reference/next-config-js/onDemandEntries\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"optimizePackageImports\",\"description\":\"API Reference for optimizePackageImports Next.js Config Option\",\"path\":\"pages/api-reference/next-config-js/optimizePackageImports\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"output\",\"description\":\"Next.js automatically traces which files are needed by each page to allow for easy deployment of your application. Learn how it works here.\",\"path\":\"pages/api-reference/next-config-js/output\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"pageExtensions\",\"description\":\"Extend the default page extensions used by Next.js when resolving pages in the Pages Router.\",\"path\":\"pages/api-reference/next-config-js/pageExtensions\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"poweredByHeader\",\"description\":\"Next.js will add the `x-powered-by` header by default. Learn to opt-out of it here.\",\"path\":\"pages/api-reference/next-config-js/poweredByHeader\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"productionBrowserSourceMaps\",\"description\":\"Enables browser source map generation during the production build.\",\"path\":\"pages/api-reference/next-config-js/productionBrowserSourceMaps\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"reactStrictMode\",\"description\":\"The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in\",\"path\":\"pages/api-reference/next-config-js/reactStrictMode\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"redirects\",\"description\":\"Add redirects to your Next.js app.\",\"path\":\"pages/api-reference/next-config-js/redirects\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"rewrites\",\"description\":\"Add rewrites to your Next.js app.\",\"path\":\"pages/api-reference/next-config-js/rewrites\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Runtime Config\",\"description\":\"Add client and server runtime configuration to your Next.js app.\",\"path\":\"pages/api-reference/next-config-js/runtime-configuration\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"serverExternalPackages\",\"description\":\"Opt-out specific dependencies from the dependency bundling enabled by `bundlePagesRouterDependencies`.\",\"path\":\"pages/api-reference/next-config-js/serverExternalPackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"trailingSlash\",\"description\":\"Configure Next.js pages to resolve with or without a trailing slash.\",\"path\":\"pages/api-reference/next-config-js/trailingSlash\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"transpilePackages\",\"description\":\"Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).\",\"path\":\"pages/api-reference/next-config-js/transpilePackages\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"turbo\",\"description\":\"Configure Next.js with Turbopack-specific options\",\"path\":\"pages/api-reference/next-config-js/turbo\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"typescript\",\"description\":\"Next.js reports TypeScript errors by default. Learn to opt-out of this behavior here.\",\"path\":\"pages/api-reference/next-config-js/typescript\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"urlImports\",\"description\":\"Configure Next.js to allow importing modules from external URLs.\",\"path\":\"pages/api-reference/next-config-js/urlImports\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"useLightningcss\",\"description\":\"Enable experimental support for Lightning CSS.\",\"path\":\"pages/api-reference/next-config-js/useLightningcss\",\"version\":\"experimental\",\"children\":[]},{\"title\":\"webpack\",\"description\":\"Learn how to customize the webpack config used by Next.js\",\"path\":\"pages/api-reference/next-config-js/webpack\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"webVitalsAttribution\",\"description\":\"Learn how to use the webVitalsAttribution option to pinpoint the source of Web Vitals issues.\",\"path\":\"pages/api-reference/next-config-js/webVitalsAttribution\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Edge Runtime\",\"description\":\"API Reference for the Edge Runtime.\",\"path\":\"pages/api-reference/edge\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"CLI\",\"description\":\"API Reference for the Next.js Command Line Interface (CLI) tools.\",\"path\":\"pages/api-reference/cli\",\"version\":\"$undefined\",\"children\":[{\"title\":\"CLI\",\"description\":\"Create Next.js apps using one command with the create-next-app CLI.\",\"path\":\"pages/api-reference/cli/create-next-app\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"next CLI\",\"description\":\"Learn how to run and build your application with the Next.js CLI.\",\"path\":\"pages/api-reference/cli/next\",\"version\":\"$undefined\",\"children\":[]}]}]},{\"title\":\"Architecture\",\"description\":\"How Next.js Works\",\"path\":\"architecture\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Accessibility\",\"description\":\"The built-in accessibility features of Next.js.\",\"path\":\"architecture/accessibility\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Fast Refresh\",\"description\":\"Fast Refresh is a hot module reloading experience that gives you instantaneous feedback on edits made to your React components.\",\"path\":\"architecture/fast-refresh\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Next.js Compiler\",\"description\":\"Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.\",\"path\":\"architecture/nextjs-compiler\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Supported Browsers\",\"description\":\"Browser support and which JavaScript features are supported by Next.js.\",\"path\":\"architecture/supported-browsers\",\"version\":\"$undefined\",\"children\":[]},{\"title\":\"Turbopack\",\"description\":\"Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.\",\"path\":\"architecture/turbopack\",\"version\":\"$undefined\",\"children\":[]}]},{\"title\":\"Community\",\"description\":\"Get involved in the Next.js community.\",\"path\":\"community\",\"version\":\"$undefined\",\"children\":[{\"title\":\"Contribution Guide\",\"description\":\"Learn how to contribute to Next.js Documentation\",\"path\":\"community/contribution-guide\",\"version\":\"$undefined\",\"children\":[]}]}]},\"versions\":{\"13\":\"v13.5.7\",\"14\":\"v14.2.18\",\"canary\":\"v15.0.4-canary.31\",\"stable\":\"v15.0.3\"}}]}],[\"$\",\"div\",null,{\"className\":\"relative mx-auto max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10\",\"children\":[[\"$\",\"div\",null,{\"className\":\"sticky top-[121px] hidden h-[calc(100vh-121px)] w-[284px] md:flex md:shrink-0 md:flex-col md:justify-between\",\"children\":[\"$\",\"$L20\",null,{\"items\":\"$0:f:0:1:2:children:2:children:1:props:children:1:0:props:children:props:items\",\"versions\":\"$0:f:0:1:2:children:2:children:1:props:children:1:0:props:children:props:versions\"}]}],[\"$\",\"div\",null,{\"id\":\"geist-skip-nav\",\"ref\":\"$undefined\",\"tabIndex\":-1}],[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(next-site)\",\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]]}],{\"children\":[[\"slug\",\"app/building-your-application/upgrading/codemods\",\"oc\"],[\"$\",\"$d\",\"c\",{\"children\":[null,[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(next-site)\",\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$d\",\"c\",{\"children\":[\"$L21\",null,[\"$\",\"$L22\",null,{\"children\":\"$L23\"}]]}],{},null]},null]},null]},null]},null],[\"$\",\"$d\",\"h\",{\"children\":[null,[\"$\",\"$d\",\"DXsiNufOXn81eKq_gM6jm\",{\"children\":[[\"$\",\"$L24\",null,{\"children\":\"$L25\"}],[\"$\",\"$L26\",null,{\"children\":\"$L27\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$28\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script><script>self.__next_f.push([1,"29:I[52143,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"ActiveHashProvider\"]\n2a:I[52143,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"stati"])</script><script>self.__next_f.push([1,"c/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"ActiveHashObserver\"]\n2b:I[5264,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"TableOfContents\"]\n2c:I[4290,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?d"])</script><script>self.__next_f.push([1,"pl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"VercelCta\"]\n2d:I[45545,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq4"])</script><script>self.__next_f.push([1,"6\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"ScrollToTopButton\"]\n2e:I[76910,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"\"]\n2f:I[54090,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl"])</script><script>self.__next_f.push([1,"=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"CodeBlock\"]\n30:I[75275,[\"6331\",\"static/chunks/6331-d83ee10a77237ab4.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"8712\",\"static/chunks/8712-fa4df1cfff9bc4eb.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7145\",\"static/chunks/7145-d075405183f82412.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2175\",\"static/chunks/2175-933f014a1846c93d.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"326\",\"static/chunks/326-64072635e094e712.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"810\",\"static/chunks/810-b696c806382c7085.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2545\",\"static/chunks/2545-d418110fec010f0b.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1028\",\"static/chunks/1028-08bba3f96af80970.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"1407\",\"static/chunks/1407-770519d989c5d022.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"4908\",\"static/chunks/4908-b27ad39d34749056.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"7090\",\"static/chunks/7090-d0f93ba3d5e9b696.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2324\",\"static/chunks/2324-1a80130b314230ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"5275\",\"static/chunks/5275-731e12407a1c8f39.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-a3b2ee2c061bc2ef.js?dpl=dpl_A94AMRojTrsJaESsxoTj8KmPdq46\"],\"Feedback\"]\n"])</script><script>self.__next_f.push([1,"21:[\"$\",\"$L29\",null,{\"children\":[\"$\",\"$L2a\",null,{\"containerAttr\":\"data-docs-container\",\"itemAttr\":\"data-docs-heading\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"order-last hidden w-56 shrink-0 lg:block\",\"children\":[\"$\",\"div\",null,{\"className\":\"sticky top-[126px] h-[calc(100vh-121px)]\",\"children\":[[\"$\",\"$L2b\",null,{\"headings\":[{\"level\":2,\"slug\":\"usage\",\"text\":\"Usage\"},{\"level\":2,\"slug\":\"codemods\",\"text\":\"Codemods\"},{\"level\":3,\"slug\":\"150\",\"text\":\"15.0\"},{\"level\":4,\"slug\":\"transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge\",\"text\":\"Transform App Router Route Segment Config runtime value from experimental-edge to edge\"},{\"level\":5,\"slug\":\"app-dir-runtime-config-experimental-edge\",\"text\":\"app-dir-runtime-config-experimental-edge\"},{\"level\":4,\"slug\":\"migrate-to-async-dynamic-apis\",\"text\":\"Migrate to async Dynamic APIs\"},{\"level\":5,\"slug\":\"next-async-request-api\",\"text\":\"next-async-request-api\"},{\"level\":4,\"slug\":\"replace-geo-and-ip-properties-of-nextrequest-with-vercelfunctions\",\"text\":\"Replace geo and ip properties of NextRequest with @vercel/functions\"},{\"level\":5,\"slug\":\"next-request-geo-ip\",\"text\":\"next-request-geo-ip\"},{\"level\":3,\"slug\":\"140\",\"text\":\"14.0\"},{\"level\":4,\"slug\":\"migrate-imageresponse-imports\",\"text\":\"Migrate ImageResponse imports\"},{\"level\":5,\"slug\":\"next-og-import\",\"text\":\"next-og-import\"},{\"level\":4,\"slug\":\"use-viewport-export\",\"text\":\"Use viewport export\"},{\"level\":5,\"slug\":\"metadata-to-viewport-export\",\"text\":\"metadata-to-viewport-export\"},{\"level\":3,\"slug\":\"132\",\"text\":\"13.2\"},{\"level\":4,\"slug\":\"use-built-in-font\",\"text\":\"Use Built-in Font\"},{\"level\":5,\"slug\":\"built-in-next-font\",\"text\":\"built-in-next-font\"},{\"level\":3,\"slug\":\"130\",\"text\":\"13.0\"},{\"level\":4,\"slug\":\"rename-next-image-imports\",\"text\":\"Rename Next Image Imports\"},{\"level\":5,\"slug\":\"next-image-to-legacy-image\",\"text\":\"next-image-to-legacy-image\"},{\"level\":4,\"slug\":\"migrate-to-the-new-image-component\",\"text\":\"Migrate to the New Image Component\"},{\"level\":5,\"slug\":\"next-image-experimental\",\"text\":\"next-image-experimental\"},{\"level\":4,\"slug\":\"remove-a-tags-from-link-components\",\"text\":\"Remove \u003ca\u003e Tags From Link Components\"},{\"level\":5,\"slug\":\"new-link\",\"text\":\"new-link\"},{\"level\":3,\"slug\":\"11\",\"text\":\"11\"},{\"level\":4,\"slug\":\"migrate-from-cra\",\"text\":\"Migrate from CRA\"},{\"level\":5,\"slug\":\"cra-to-next\",\"text\":\"cra-to-next\"},{\"level\":3,\"slug\":\"10\",\"text\":\"10\"},{\"level\":4,\"slug\":\"add-react-imports\",\"text\":\"Add React imports\"},{\"level\":5,\"slug\":\"add-missing-react-import\",\"text\":\"add-missing-react-import\"},{\"level\":3,\"slug\":\"9\",\"text\":\"9\"},{\"level\":4,\"slug\":\"transform-anonymous-components-into-named-components\",\"text\":\"Transform Anonymous Components into Named Components\"},{\"level\":5,\"slug\":\"name-default-component\",\"text\":\"name-default-component\"},{\"level\":3,\"slug\":\"8\",\"text\":\"8\"},{\"level\":4,\"slug\":\"transform-amp-hoc-into-page-config\",\"text\":\"Transform AMP HOC into page config\"},{\"level\":5,\"slug\":\"withamp-to-config\",\"text\":\"withamp-to-config\"},{\"level\":3,\"slug\":\"6\",\"text\":\"6\"},{\"level\":4,\"slug\":\"use-withrouter\",\"text\":\"Use withRouter\"},{\"level\":5,\"slug\":\"url-to-withrouter\",\"text\":\"url-to-withrouter\"}]}],null,[\"$\",\"$L2c\",null,{}],[\"$\",\"$L2d\",null,{}]]}]}],[\"$\",\"article\",null,{\"className\":\"mt-4 w-full min-w-0 max-w-6xl px-1 md:px-6\",\"style\":{\"minHeight\":\"calc(100vh - 103px)\"},\"data-docs-container\":\"\",\"children\":[[\"$\",\"div\",null,{\"className\":\"-mt-4 mb-7 md:mb-10 md:mt-2\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2 text-sm\",\"children\":[[\"$\",\"$d\",\"app/building-your-application\",{\"children\":[[\"$\",\"$L2e\",null,{\"className\":\"text-gray-700 hover:text-gray-600\",\"href\":\"/docs/app/building-your-application\",\"children\":\"Building Your Application\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-700\",\"children\":[\"$\",\"svg\",null,{\"className\":\"with-icon_icon__MHUeb\",\"data-testid\":\"geist-icon\",\"fill\":\"none\",\"height\":24,\"shapeRendering\":\"geometricPrecision\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.5,\"viewBox\":\"0 0 24 24\",\"width\":24,\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath d=\\\"M9 18l6-6-6-6\\\"/\u003e\"},\"style\":{\"color\":\"currentColor\",\"verticalAlign\":\"$undefined\",\"width\":18,\"height\":18}}]}]]}],[\"$\",\"$d\",\"app/building-your-application/upgrading\",{\"children\":[[\"$\",\"$L2e\",null,{\"className\":\"text-gray-700 hover:text-gray-600\",\"href\":\"/docs/app/building-your-application/upgrading\",\"children\":\"Upgrading\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-700\",\"children\":[\"$\",\"svg\",null,{\"className\":\"with-icon_icon__MHUeb\",\"data-testid\":\"geist-icon\",\"fill\":\"none\",\"height\":24,\"shapeRendering\":\"geometricPrecision\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.5,\"viewBox\":\"0 0 24 24\",\"width\":24,\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath d=\\\"M9 18l6-6-6-6\\\"/\u003e\"},\"style\":{\"color\":\"currentColor\",\"verticalAlign\":\"$undefined\",\"width\":18,\"height\":18}}]}]]}],[\"$\",\"$d\",\"app/building-your-application/upgrading/codemods\",{\"children\":[\"$\",\"span\",null,{\"className\":\"text-gray-1000 shrink-0\",\"children\":\"Codemods\"}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"prose prose-vercel max-w-none\",\"data-docs\":true,\"children\":[null,[\"$\",\"h1\",null,{\"className\":\"break-words\",\"children\":[\"Codemods\",null]}],null,[[\"$\",\"p\",null,{\"children\":\"Codemods are transformations that run on your codebase programmatically. This allows a large number of changes to be programmatically applied without having to manually go through every file.\"}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Next.js provides Codemod transformations to help upgrade your Next.js codebase when an API is updated or deprecated.\"}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"usage\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#usage\",\"children\":[\"Usage\",[\"$\",\"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 your terminal, navigate (\",[\"$\",\"code\",null,{\"children\":\"cd\"}],\") into your project's folder, then run:\"]}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"transfor\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"m\"}],[\"$\",\"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-keyword)\"},\"children\":\"\u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"pat\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"h\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"\u003e\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Replacing \",[\"$\",\"code\",null,{\"children\":\"\u003ctransform\u003e\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"\u003cpath\u003e\"}],\" with appropriate values.\"]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"transform\"}],\" - name of transform\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"path\"}],\" - files or directory to transform\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"--dry\"}],\" Do a dry-run, no code will be edited\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[[\"$\",\"code\",null,{\"children\":\"--print\"}],\" Prints the changed output for comparison\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h2\",null,{\"id\":\"codemods\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#codemods\",\"children\":[\"Codemods\",[\"$\",\"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\",[\"$\",\"h3\",null,{\"id\":\"150\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#150\",\"children\":[\"15.0\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#transform-app-router-route-segment-config-runtime-value-from-experimental-edge-to-edge\",\"children\":[\"Transform App Router Route Segment Config \",[\"$\",\"code\",null,{\"children\":\"runtime\"}],\" value from \",[\"$\",\"code\",null,{\"children\":\"experimental-edge\"}],\" to \",[\"$\",\"code\",null,{\"children\":\"edge\"}],[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"app-dir-runtime-config-experimental-edge\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#app-dir-runtime-config-experimental-edge\",\"children\":[[\"$\",\"code\",null,{\"children\":\"app-dir-runtime-config-experimental-edge\"}],[\"$\",\"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\"}],\": This codemod is App Router specific.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"app-dir-runtime-config-experimental-edge\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This codemod transforms \",[\"$\",\"a\",null,{\"href\":\"https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#runtime\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[[\"Route Segment Config \",[\"$\",\"code\",null,{\"children\":\"runtime\"}]],[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"with-icon_icon__MHUeb\",\"data-testid\":\"geist-icon\",\"fill\":\"none\",\"height\":24,\"shapeRendering\":\"geometricPrecision\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.5,\"viewBox\":\"0 0 24 24\",\"width\":24,\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath d=\\\"M7 17L17 7\\\"/\u003e\u003cpath d=\\\"M7 7h10v10\\\"/\u003e\"},\"style\":{\"color\":\"currentColor\",\"verticalAlign\":\"$undefined\",\"width\":14,\"height\":14}}]}]]}],\" value \",[\"$\",\"code\",null,{\"children\":\"experimental-edge\"}],\" to \",[\"$\",\"code\",null,{\"children\":\"edge\"}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"ts\",\"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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"runtime\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'experimental-edge'\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"ts\",\"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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"runtime\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'edge'\"}]]}]}],\"\\n\",[\"$\",\"h4\",null,{\"id\":\"migrate-to-async-dynamic-apis\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#migrate-to-async-dynamic-apis\",\"children\":[\"Migrate to async Dynamic APIs\",[\"$\",\"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\":[\"APIs that opted into dynamic rendering that previously supported synchronous access are now asynchronous. You can read more about this breaking change in the \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/app/building-your-application/upgrading/version-15\",\"children\":\"upgrade guide\"}],\".\"]}],\"\\n\",[\"$\",\"h5\",null,{\"id\":\"next-async-request-api\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#next-async-request-api\",\"children\":[[\"$\",\"code\",null,{\"children\":\"next-async-request-api\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"next-async-request-api\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This codemod will transform dynamic APIs (\",[\"$\",\"code\",null,{\"children\":\"cookies()\"}],\", \",[\"$\",\"code\",null,{\"children\":\"headers()\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"draftMode()\"}],\" from \",[\"$\",\"code\",null,{\"children\":\"next/headers\"}],\") that are now asynchronous to be properly awaited or wrapped with \",[\"$\",\"code\",null,{\"children\":\"React.use()\"}],\" if applicable.\\nWhen an automatic migration isn't possible, the codemod will either add a typecast (if a TypeScript file) or a comment to inform the user that it needs to be manually reviewed \u0026 updated.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"tsx\",\"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\":\" { cookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" headers } \"}],[\"$\",\"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\":\"'next/headers'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"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\":\"token\"}],[\"$\",\"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\":\"cookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"()\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".get\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'token'\"}],[\"$\",\"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\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"useToken\"}],[\"$\",\"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\":\"token\"}],[\"$\",\"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\":\"cookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"()\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".get\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'token'\"}],[\"$\",\"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\":\" token\"}]]}],\"\\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\":\"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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"name\"}],[\"$\",\"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\":\"cookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"()\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".get\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'name'\"}],[\"$\",\"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\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getHeader\"}],[\"$\",\"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\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"headers\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"()\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".get\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'x-foo'\"}],[\"$\",\"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\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"tsx\",\"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\":\" { use } \"}],[\"$\",\"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\":\"'react'\"}]]}],\"\\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\":\" { cookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" headers\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"type\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" UnsafeUnwrappedCookies } \"}],[\"$\",\"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\":\"'next/headers'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"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\":\"token\"}],[\"$\",\"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\":\"cookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"())\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".get\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'token'\"}],[\"$\",\"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\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"useToken\"}],[\"$\",\"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\":\"token\"}],[\"$\",\"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\":\"use\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"cookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"())\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".get\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'token'\"}],[\"$\",\"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\":\" token\"}]]}],\"\\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\":\"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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"name\"}],[\"$\",\"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\":\"cookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"())\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".get\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'name'\"}],[\"$\",\"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\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"getHeader\"}],[\"$\",\"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\":\" (\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"headers\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"() \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"as\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"UnsafeUnwrappedCookies\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".get\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'x-foo'\"}],[\"$\",\"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 we detect property access on the \",[\"$\",\"code\",null,{\"children\":\"params\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"searchParams\"}],\" props in the page / route entries (\",[\"$\",\"code\",null,{\"children\":\"page.js\"}],\", \",[\"$\",\"code\",null,{\"children\":\"layout.js\"}],\", \",[\"$\",\"code\",null,{\"children\":\"route.js\"}],\", or \",[\"$\",\"code\",null,{\"children\":\"default.js\"}],\") or the \",[\"$\",\"code\",null,{\"children\":\"generateMetadata\"}],\" / \",[\"$\",\"code\",null,{\"children\":\"generateViewport\"}],\" APIs,\\nit will attempt to transform the callsite from a sync to an async function, and await the property access. If it can't be made async (such as with a client component), it will use \",[\"$\",\"code\",null,{\"children\":\"React.use\"}],\" to unwrap the promise .\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"tsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// page.tsx\"}]}],\"\\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\":\" params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" searchParams\"}],[\"$\",\"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-keyword)\"},\"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\":\" 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\":\"string\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" }\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { [key\"}],[\"$\",\"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\":\"string\"}],[\"$\",\"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-constant)\"},\"children\":\"string\"}],[\"$\",\"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-constant)\"},\"children\":\"string\"}],[\"$\",\"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-constant)\"},\"children\":\"undefined\"}],[\"$\",\"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\":[[\"$\",\"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\":\"value\"}],[\"$\",\"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\":\" searchParams\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"if\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (value \"}],[\"$\",\"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\":\"'foo'\"}],[\"$\",\"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\":\"// ...\"}]]}],\"\\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\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"generateMetadata\"}],[\"$\",\"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\":\" { 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\":\"string\"}],[\"$\",\"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\":\" title\"}],[\"$\",\"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\":\"`My Page - \"}],[\"$\",\"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-token-string-expression)\"},\"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\",[\"$\",\"p\",null,{\"children\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"tsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// page.tsx\"}]}],\"\\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\":\"(props\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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\":\" 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\":\"string\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" }\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\":\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { [key\"}],[\"$\",\"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\":\"string\"}],[\"$\",\"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-constant)\"},\"children\":\"string\"}],[\"$\",\"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-constant)\"},\"children\":\"string\"}],[\"$\",\"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-constant)\"},\"children\":\"undefined\"}],[\"$\",\"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\":[[\"$\",\"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\":\"value\"}],[\"$\",\"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-constant)\"},\"children\":\"props\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".searchParams\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"if\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (value \"}],[\"$\",\"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\":\"'foo'\"}],[\"$\",\"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\":\"// ...\"}]]}],\"\\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\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"generateMetadata\"}],[\"$\",\"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\":\" { 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\":\"string\"}],[\"$\",\"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\":\"slug\"}],[\"$\",\"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-constant)\"},\"children\":\"props\"}],[\"$\",\"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\":\"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\":\" title\"}],[\"$\",\"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\":\"`My Page - \"}],[\"$\",\"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-token-string-expression)\"},\"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\",[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Good to know:\"}],\" When this codemod identifies a spot that might require manual intervention, but we aren't able to determine the exact fix, it will add a comment or typecast to the code to inform the user that it needs to be manually updated. These comments are prefixed with \",[\"$\",\"strong\",null,{\"children\":\"@next/codemod\"}],\", and typecasts are prefixed with \",[\"$\",\"code\",null,{\"children\":\"UnsafeUnwrapped\"}],\".\\nYour build will error until these comments are explicitly removed. \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/messages/sync-dynamic-apis\",\"children\":\"Read more\"}],\".\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h4\",null,{\"id\":\"replace-geo-and-ip-properties-of-nextrequest-with-vercelfunctions\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#replace-geo-and-ip-properties-of-nextrequest-with-vercelfunctions\",\"children\":[\"Replace \",[\"$\",\"code\",null,{\"children\":\"geo\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"ip\"}],\" properties of \",[\"$\",\"code\",null,{\"children\":\"NextRequest\"}],\" with \",[\"$\",\"code\",null,{\"children\":\"@vercel/functions\"}],[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"next-request-geo-ip\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#next-request-geo-ip\",\"children\":[[\"$\",\"code\",null,{\"children\":\"next-request-geo-ip\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"next-request-geo-ip\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This codemod installs \",[\"$\",\"code\",null,{\"children\":\"@vercel/functions\"}],\" and transforms \",[\"$\",\"code\",null,{\"children\":\"geo\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"ip\"}],\" properties of \",[\"$\",\"code\",null,{\"children\":\"NextRequest\"}],\" with corresponding \",[\"$\",\"code\",null,{\"children\":\"@vercel/functions\"}],\" features.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"ts\",\"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\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"type\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { NextRequest } \"}],[\"$\",\"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\":\"'next/server'\"}]]}],\"\\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\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"GET\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(req\"}],[\"$\",\"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\":\"NextRequest\"}],[\"$\",\"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\":\"geo\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"ip\"}],[\"$\",\"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\":\" req\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"ts\",\"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\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"type\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" { NextRequest } \"}],[\"$\",\"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\":\"'next/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\":\" { geolocation\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" ipAddress } \"}],[\"$\",\"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\":\"'@vercel/functions'\"}]]}],\"\\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\":\"function\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"GET\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(req\"}],[\"$\",\"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\":\"NextRequest\"}],[\"$\",\"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\":\"geo\"}],[\"$\",\"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\":\"geolocation\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(req)\"}]]}],\"\\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\":\"ip\"}],[\"$\",\"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\":\"ipAddress\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(req)\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"140\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#140\",\"children\":[\"14.0\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"migrate-imageresponse-imports\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#migrate-imageresponse-imports\",\"children\":[\"Migrate \",[\"$\",\"code\",null,{\"children\":\"ImageResponse\"}],\" imports\",[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"next-og-import\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#next-og-import\",\"children\":[[\"$\",\"code\",null,{\"children\":\"next-og-import\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"next-og-import\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This codemod moves transforms imports from \",[\"$\",\"code\",null,{\"children\":\"next/server\"}],\" to \",[\"$\",\"code\",null,{\"children\":\"next/og\"}],\" for usage of \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/app/building-your-application/optimizing/metadata#dynamic-image-generation\",\"children\":\"Dynamic OG Image Generation\"}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"js\",\"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\":\" { ImageResponse } \"}],[\"$\",\"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\":\"'next/server'\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"js\",\"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\":\" { ImageResponse } \"}],[\"$\",\"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\":\"'next/og'\"}]]}]}],\"\\n\",[\"$\",\"h4\",null,{\"id\":\"use-viewport-export\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#use-viewport-export\",\"children\":[\"Use \",[\"$\",\"code\",null,{\"children\":\"viewport\"}],\" export\",[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"metadata-to-viewport-export\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#metadata-to-viewport-export\",\"children\":[[\"$\",\"code\",null,{\"children\":\"metadata-to-viewport-export\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"metadata-to-viewport-export\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This codemod migrates certain viewport metadata to \",[\"$\",\"code\",null,{\"children\":\"viewport\"}],\" export.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"js\",\"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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"metadata\"}],[\"$\",\"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\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" title\"}],[\"$\",\"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\":\"'My App'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" themeColor\"}],[\"$\",\"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\":\"'dark'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" viewport\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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\":\" width\"}],[\"$\",\"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\":\"1\"}],[\"$\",\"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\",[\"$\",\"p\",null,{\"children\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"js\",\"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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"metadata\"}],[\"$\",\"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\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" title\"}],[\"$\",\"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\":\"'My App'\"}],[\"$\",\"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\":\" \"}],\"\\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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"viewport\"}],[\"$\",\"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\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"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\":\"1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" themeColor\"}],[\"$\",\"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\":\"'dark'\"}],[\"$\",\"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\",[\"$\",\"h3\",null,{\"id\":\"132\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#132\",\"children\":[\"13.2\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"use-built-in-font\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#use-built-in-font\",\"children\":[\"Use Built-in Font\",[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"built-in-next-font\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#built-in-next-font\",\"children\":[[\"$\",\"code\",null,{\"children\":\"built-in-next-font\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"built-in-next-font\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"This codemod uninstalls the \",[\"$\",\"code\",null,{\"children\":\"@next/font\"}],\" package and transforms \",[\"$\",\"code\",null,{\"children\":\"@next/font\"}],\" imports into the built-in \",[\"$\",\"code\",null,{\"children\":\"next/font\"}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"js\",\"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\":\" { Inter } \"}],[\"$\",\"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\":\"'@next/font/google'\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"js\",\"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\":\" { Inter } \"}],[\"$\",\"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\":\"'next/font/google'\"}]]}]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"130\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#130\",\"children\":[\"13.0\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"rename-next-image-imports\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#rename-next-image-imports\",\"children\":[\"Rename Next Image Imports\",[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"next-image-to-legacy-image\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#next-image-to-legacy-image\",\"children\":[[\"$\",\"code\",null,{\"children\":\"next-image-to-legacy-image\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"next-image-to-legacy-image\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Safely renames \",[\"$\",\"code\",null,{\"children\":\"next/image\"}],\" imports in existing Next.js 10, 11, or 12 applications to \",[\"$\",\"code\",null,{\"children\":\"next/legacy/image\"}],\" in Next.js 13. Also renames \",[\"$\",\"code\",null,{\"children\":\"next/future/image\"}],\" to \",[\"$\",\"code\",null,{\"children\":\"next/image\"}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"pages/index.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\":\" Image1 \"}],[\"$\",\"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\":\"'next/image'\"}]]}],\"\\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\":\" Image2 \"}],[\"$\",\"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\":\"'next/future/image'\"}]]}],\"\\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\":\"Home\"}],[\"$\",\"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\"}],[\"$\",\"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\":\"Image1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/test.jpg\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"200\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"height\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"300\\\"\"}],[\"$\",\"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\":\"Image2\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/test.png\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"500\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"height\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"400\\\"\"}],[\"$\",\"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\":\" )\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"pages/index.js\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// 'next/image' becomes 'next/legacy/image'\"}]}],\"\\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\":\" Image1 \"}],[\"$\",\"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\":\"'next/legacy/image'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// 'next/future/image' becomes 'next/image'\"}]}],\"\\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\":\" Image2 \"}],[\"$\",\"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\":\"'next/image'\"}]]}],\"\\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\":\"Home\"}],[\"$\",\"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\"}],[\"$\",\"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\":\"Image1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/test.jpg\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"200\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"height\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"300\\\"\"}],[\"$\",\"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\":\"Image2\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/test.png\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"500\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"height\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"400\\\"\"}],[\"$\",\"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\":\" )\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h4\",null,{\"id\":\"migrate-to-the-new-image-component\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#migrate-to-the-new-image-component\",\"children\":[\"Migrate to the New Image Component\",[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"next-image-experimental\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#next-image-experimental\",\"children\":[[\"$\",\"code\",null,{\"children\":\"next-image-experimental\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"next-image-experimental\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Dangerously migrates from \",[\"$\",\"code\",null,{\"children\":\"next/legacy/image\"}],\" to the new \",[\"$\",\"code\",null,{\"children\":\"next/image\"}],\" by adding inline styles and removing unused props.\"]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Removes \",[\"$\",\"code\",null,{\"children\":\"layout\"}],\" prop and adds \",[\"$\",\"code\",null,{\"children\":\"style\"}],\".\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Removes \",[\"$\",\"code\",null,{\"children\":\"objectFit\"}],\" prop and adds \",[\"$\",\"code\",null,{\"children\":\"style\"}],\".\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Removes \",[\"$\",\"code\",null,{\"children\":\"objectPosition\"}],\" prop and adds \",[\"$\",\"code\",null,{\"children\":\"style\"}],\".\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Removes \",[\"$\",\"code\",null,{\"children\":\"lazyBoundary\"}],\" prop.\"]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"Removes \",[\"$\",\"code\",null,{\"children\":\"lazyRoot\"}],\" prop.\"]}],\"\\n\"]}],\"\\n\",[\"$\",\"h4\",null,{\"id\":\"remove-a-tags-from-link-components\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#remove-a-tags-from-link-components\",\"children\":[\"Remove \",[\"$\",\"code\",null,{\"children\":\"\u003ca\u003e\"}],\" Tags From Link 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\",[\"$\",\"h5\",null,{\"id\":\"new-link\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#new-link\",\"children\":[[\"$\",\"code\",null,{\"children\":\"new-link\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod@latest\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"new-link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\".\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Remove \",[\"$\",\"code\",null,{\"children\":\"\u003ca\u003e\"}],\" tags inside \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/app/api-reference/components/link\",\"children\":\"Link Components\"}],\", or add a \",[\"$\",\"code\",null,{\"children\":\"legacyBehavior\"}],\" prop to Links that cannot be auto-fixed.\"]}],\"\\n\",null,\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"href\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/about\\\"\"}],[\"$\",\"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\":\"a\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003eAbout\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"a\"}],[\"$\",\"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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// transforms into\"}]}],\"\\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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"href\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/about\\\"\"}],[\"$\",\"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\":\" About\"}]}],\"\\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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"href\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/about\\\"\"}],[\"$\",\"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\":\"a\"}],[\"$\",\"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-constant)\"},\"children\":\"console\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".log\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'clicked'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")}\u003eAbout\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"a\"}],[\"$\",\"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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// transforms into\"}]}],\"\\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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"href\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/about\\\"\"}],[\"$\",\"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-constant)\"},\"children\":\"console\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".log\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'clicked'\"}],[\"$\",\"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\":\" About\"}]}],\"\\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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"In cases where auto-fixing can't be applied, the \",[\"$\",\"code\",null,{\"children\":\"legacyBehavior\"}],\" prop is added. This allows your app to keep functioning using the old behavior for that particular link.\"]}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"jsx\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"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-function)\"},\"children\":\"Component\"}],[\"$\",\"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\":\"=\u003e\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \u003c\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"a\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003eAbout\u003c/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"a\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"href\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/about\\\"\"}],[\"$\",\"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\":\"Component\"}],[\"$\",\"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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// becomes\"}]}],\"\\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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"href\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"\\\"/about\\\"\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"legacyBehavior\"}],[\"$\",\"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\":\"Component\"}],[\"$\",\"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\":\"Link\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003e\"}]]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"11\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#11\",\"children\":[\"11\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"migrate-from-cra\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#migrate-from-cra\",\"children\":[\"Migrate from CRA\",[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"cra-to-next\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#cra-to-next\",\"children\":[[\"$\",\"code\",null,{\"children\":\"cra-to-next\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"cra-to-next\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Migrates a Create React App project to Next.js; creating a Pages Router and necessary config to match behavior. Client-side only rendering is leveraged initially to prevent breaking compatibility due to \",[\"$\",\"code\",null,{\"children\":\"window\"}],\" usage during SSR and can be enabled seamlessly to allow the gradual adoption of Next.js specific features.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Please share any feedback related to this transform \",[\"$\",\"a\",null,{\"href\":\"https://github.com/vercel/next.js/discussions/25858\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"in this discussion\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"with-icon_icon__MHUeb\",\"data-testid\":\"geist-icon\",\"fill\":\"none\",\"height\":24,\"shapeRendering\":\"geometricPrecision\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.5,\"viewBox\":\"0 0 24 24\",\"width\":24,\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath d=\\\"M7 17L17 7\\\"/\u003e\u003cpath d=\\\"M7 7h10v10\\\"/\u003e\"},\"style\":{\"color\":\"currentColor\",\"verticalAlign\":\"$undefined\",\"width\":14,\"height\":14}}]}]]}],\".\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"10\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#10\",\"children\":[\"10\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"add-react-imports\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#add-react-imports\",\"children\":[\"Add React imports\",[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"add-missing-react-import\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#add-missing-react-import\",\"children\":[[\"$\",\"code\",null,{\"children\":\"add-missing-react-import\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"add-missing-react-import\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Transforms files that do not import \",[\"$\",\"code\",null,{\"children\":\"React\"}],\" to include the import in order for the new \",[\"$\",\"a\",null,{\"href\":\"https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html\",\"rel\":\"noopener noreferrer nofollow\",\"target\":\"_blank\",\"children\":[\"React JSX transform\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"with-icon_icon__MHUeb\",\"data-testid\":\"geist-icon\",\"fill\":\"none\",\"height\":24,\"shapeRendering\":\"geometricPrecision\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.5,\"viewBox\":\"0 0 24 24\",\"width\":24,\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath d=\\\"M7 17L17 7\\\"/\u003e\u003cpath d=\\\"M7 7h10v10\\\"/\u003e\"},\"style\":{\"color\":\"currentColor\",\"verticalAlign\":\"$undefined\",\"width\":14,\"height\":14}}]}]]}],\" to work.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"my-component.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\":\"class\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Home\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"extends\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"React\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Component\"}],[\"$\",\"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-function)\"},\"children\":\"render\"}],[\"$\",\"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\":\"\u003eHello World\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\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"my-component.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\":\" React \"}],[\"$\",\"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\":\"'react'\"}]]}],\"\\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\":\"class\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Home\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"extends\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"React\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Component\"}],[\"$\",\"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-function)\"},\"children\":\"render\"}],[\"$\",\"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\":\"\u003eHello World\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\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"9\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#9\",\"children\":[\"9\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"transform-anonymous-components-into-named-components\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#transform-anonymous-components-into-named-components\",\"children\":[\"Transform Anonymous Components into Named 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\",[\"$\",\"h5\",null,{\"id\":\"name-default-component\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#name-default-component\",\"children\":[[\"$\",\"code\",null,{\"children\":\"name-default-component\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"name-default-component\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"$\",\"strong\",null,{\"children\":\"Versions 9 and above.\"}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Transforms anonymous components into named components to make sure they work with \",[\"$\",\"a\",null,{\"href\":\"https://nextjs.org/blog/next-9-4#fast-refresh\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[\"Fast Refresh\",[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"with-icon_icon__MHUeb\",\"data-testid\":\"geist-icon\",\"fill\":\"none\",\"height\":24,\"shapeRendering\":\"geometricPrecision\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.5,\"viewBox\":\"0 0 24 24\",\"width\":24,\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath d=\\\"M7 17L17 7\\\"/\u003e\u003cpath d=\\\"M7 7h10v10\\\"/\u003e\"},\"style\":{\"color\":\"currentColor\",\"verticalAlign\":\"$undefined\",\"width\":14,\"height\":14}}]}]]}],\".\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"my-component.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\":\" () {\"}]]}],\"\\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\":\"\u003eHello World\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\":\"Transforms into:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"my-component.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\":\"MyComponent\"}],[\"$\",\"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\":\"\u003eHello World\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\":\"The component will have a camel-cased name based on the name of the file, and it also works with arrow functions.\"}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"8\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#8\",\"children\":[\"8\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"transform-amp-hoc-into-page-config\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#transform-amp-hoc-into-page-config\",\"children\":[\"Transform AMP HOC into page config\",[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"withamp-to-config\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#withamp-to-config\",\"children\":[[\"$\",\"code\",null,{\"children\":\"withamp-to-config\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"withamp-to-config\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Transforms the \",[\"$\",\"code\",null,{\"children\":\"withAmp\"}],\" HOC into Next.js 9 page configuration.\"]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Before\"}]}],\"\\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\":\" { withAmp } \"}],[\"$\",\"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\":\"'next/amp'\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":\" \"}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"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\":\"Home\"}],[\"$\",\"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\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003eMy AMP Page\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\":\"}\"}]}],\"\\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-function)\"},\"children\":\"withAmp\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(Home)\"}]]}]]}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// After\"}]}],\"\\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\":\"Home\"}],[\"$\",\"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\":\"h1\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"\u003eMy AMP Page\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\":\"}\"}]}],\"\\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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"config\"}],[\"$\",\"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\":\" {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" amp\"}],[\"$\",\"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-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"6\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#6\",\"children\":[\"6\",[\"$\",\"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\",[\"$\",\"h4\",null,{\"id\":\"use-withrouter\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#use-withrouter\",\"children\":[\"Use \",[\"$\",\"code\",null,{\"children\":\"withRouter\"}],[\"$\",\"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\",[\"$\",\"h5\",null,{\"id\":\"url-to-withrouter\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#url-to-withrouter\",\"children\":[[\"$\",\"code\",null,{\"children\":\"url-to-withrouter\"}],[\"$\",\"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\",[\"$\",\"$L2f\",null,{\"filename\":\"Terminal\",\"language\":\"bash\",\"switcher\":\"$undefined\",\"children\":[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"npx \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"@next/codemod\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string)\"},\"children\":\"url-to-withrouter\"}]]}]}],\"\\n\",[\"$\",\"p\",null,{\"children\":[\"Transforms the deprecated automatically injected \",[\"$\",\"code\",null,{\"children\":\"url\"}],\" property on top level pages to using \",[\"$\",\"code\",null,{\"children\":\"withRouter\"}],\" and the \",[\"$\",\"code\",null,{\"children\":\"router\"}],\" property it injects. Read more here: \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/messages/url-deprecated\",\"children\":\"https://nextjs.org/docs/messages/url-deprecated\"}]]}],\"\\n\",[\"$\",\"p\",null,{\"children\":\"For example:\"}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"From\",\"language\":\"js\",\"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\":\" React \"}],[\"$\",\"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\":\"'react'\"}]]}],\"\\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\":\"class\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"extends\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"React\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Component\"}],[\"$\",\"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-function)\"},\"children\":\"render\"}],[\"$\",\"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\":\"pathname\"}],[\"$\",\"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-constant)\"},\"children\":\"this\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"props\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".url\"}]]}],\"\\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\":\"\u003eCurrent pathname: {pathname}\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\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"To\",\"language\":\"js\",\"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\":\" React \"}],[\"$\",\"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\":\"'react'\"}]]}],\"\\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\":\" { withRouter } \"}],[\"$\",\"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\":\"'next/router'\"}]]}],\"\\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-function)\"},\"children\":\"withRouter\"}],[\"$\",\"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\":\"class\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"extends\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"React\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"Component\"}],[\"$\",\"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-function)\"},\"children\":\"render\"}],[\"$\",\"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\":\"pathname\"}],[\"$\",\"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-constant)\"},\"children\":\"this\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"props\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".router\"}]]}],\"\\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\":\"\u003eCurrent pathname: {pathname}\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\":[\"$\",\"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\":[\"This is one case. All the cases that are transformed (and tested) can be found in the \",[\"$\",\"a\",null,{\"href\":\"https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter\",\"rel\":\"noopener noreferrer\",\"target\":\"_blank\",\"children\":[[[\"$\",\"code\",null,{\"children\":\"__testfixtures__\"}],\" directory\"],[\"$\",\"span\",null,{\"className\":\"inline-flex\",\"children\":[\"$\",\"svg\",null,{\"className\":\"with-icon_icon__MHUeb\",\"data-testid\":\"geist-icon\",\"fill\":\"none\",\"height\":24,\"shapeRendering\":\"geometricPrecision\",\"stroke\":\"currentColor\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":1.5,\"viewBox\":\"0 0 24 24\",\"width\":24,\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath d=\\\"M7 17L17 7\\\"/\u003e\u003cpath d=\\\"M7 7h10v10\\\"/\u003e\"},\"style\":{\"color\":\"currentColor\",\"verticalAlign\":\"$undefined\",\"width\":14,\"height\":14}}]}]]}],\".\"]}]]]}],null,null,[\"$\",\"nav\",null,{\"aria-label\":\"pagination\",\"className\":\"pagination_pagination__aeiwF my-12 border-t border-gray-200 pt-8\",\"children\":[[\"$\",\"$L2e\",null,{\"aria-label\":\"Go to previous page: Upgrading\",\"className\":\"pagination_item__pRz03\",\"href\":\"/docs/app/building-your-application/upgrading\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK pagination_label__GgUO7\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"0.8125rem\",\"--text-line-height\":\"1.125rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":\"400\"},\"children\":\"Previous\"}],[\"$\",\"div\",null,{\"className\":\"pagination_title__uxdAV\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"1rem\",\"--text-line-height\":\"1.5rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":500},\"children\":\"Upgrading\"}],[\"$\",\"span\",null,{\"className\":\"pagination_icon__3ocd0\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M10.5 14.0607L9.96966 13.5303L5.14644 8.7071C4.75592 8.31658 4.75592 7.68341 5.14644 7.29289L9.96966 2.46966L10.5 1.93933L11.5607 2.99999L11.0303 3.53032L6.56065 7.99999L11.0303 12.4697L11.5607 13L10.5 14.0607Z\\\" fill=\\\"currentColor\\\" /\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":20,\"height\":20,\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"pagination_children__HLQ17\",\"children\":\"$undefined\"}],[\"$\",\"$L2e\",null,{\"aria-label\":\"Go to next page: Version 15\",\"className\":\"pagination_item__pRz03 pagination_align-right__0nLuq\",\"href\":\"/docs/app/building-your-application/upgrading/version-15\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK pagination_label__GgUO7\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"0.8125rem\",\"--text-line-height\":\"1.125rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":\"400\"},\"children\":\"Next\"}],[\"$\",\"div\",null,{\"className\":\"pagination_title__uxdAV\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text_wrapper__i87JK\",\"data-version\":\"v1\",\"ref\":\"$undefined\",\"style\":{\"--text-color\":\"var(--ds-gray-1000)\",\"--text-size\":\"1rem\",\"--text-line-height\":\"1.5rem\",\"--text-letter-spacing\":\"initial\",\"--text-weight\":500},\"children\":\"Version 15\"}],[\"$\",\"span\",null,{\"className\":\"pagination_icon__3ocd0\",\"children\":[\"$\",\"svg\",null,{\"className\":\"$undefined\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cpath fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M5.50001 1.93933L6.03034 2.46966L10.8536 7.29288C11.2441 7.68341 11.2441 8.31657 10.8536 8.7071L6.03034 13.5303L5.50001 14.0607L4.43935 13L4.96968 12.4697L9.43935 7.99999L4.96968 3.53032L4.43935 2.99999L5.50001 1.93933Z\\\" fill=\\\"currentColor\\\" /\u003e\"},\"data-testid\":\"geist-icon\",\"height\":16,\"strokeLinejoin\":\"round\",\"style\":{\"verticalAlign\":\"$undefined\",\"width\":20,\"height\":20,\"color\":\"currentColor\"},\"viewBox\":\"0 0 16 16\",\"width\":16}]}]]}]]}]]}],[\"$\",\"$L30\",null,{\"label\":\"next-site\",\"siteType\":\"next-site\",\"type\":\"inline\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"27:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"25:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Upgrading: Codemods | Next.js\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"Use codemods to upgrade your Next.js codebase when new features are released.\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://nextjs.org/docs/app/building-your-application/upgrading/codemods\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Upgrading: Codemods | Next.js\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"Use codemods to upgrade your Next.js codebase when new features are released.\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"https://nextjs.org/api/docs-og?title=Upgrading:%20Codemods\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:title\",\"content\":\"Upgrading: Codemods\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:description\",\"content\":\"Use codemods to upgrade your Next.js codebase when new features are released.\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:image\",\"content\":\"https://nextjs.org/api/docs-og?title=Upgrading:%20Codemods\"}],[\"$\",\"link\",\"11\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]]\n"])</script><script>self.__next_f.push([1,"23:null\n"])</script></body></html>