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_G6imS94CKn5yzahWcEVibSnpDXt1 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_G6imS94CKn5yzahWcEVibSnpDXt1 2x"/><link rel="stylesheet" href="/_next/static/css/94930d6f827b22e1.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/3a4b7cc0153d49b4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/58f50fdfd3cd38b6.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/bf98005f04f1b7f7.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/bfc235d8dfd01529.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/824202e71e79374d.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/83fe6bc36ad4703d.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/4ad309783bf416a2.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/baf446a5c20b5fd4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/f4addedd731adba4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-a905a987e08406bb.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1"/><script src="/_next/static/chunks/99092f3b-dd5f932fd9583573.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/9892-4e2c134da755eb48.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/main-app-13c50f3c93ee782b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/5600-036b4f92f1d976a8.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/app/(next-site)/page-d065ed8aa15519a9.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/9916-e801c970cfe633f0.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script src="/_next/static/chunks/app/(next-site)/docs/layout-5b7f90e8227770ea.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><meta name="next-size-adjust" content=""/><title>next.config.js Options: images | Next.js</title><meta name="description" content="Custom configuration for the next/image loader"/><link rel="canonical" href="https://nextjs.org/docs/app/api-reference/next-config-js/images"/><meta property="og:title" content="next.config.js Options: images | Next.js"/><meta property="og:description" content="Custom configuration for the next/image loader"/><meta property="og:image" content="https://nextjs.org/api/docs-og?title=next.config.js%20Options:%20images"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="next.config.js Options: images"/><meta name="twitter:description" content="Custom configuration for the next/image loader"/><meta name="twitter:image" content="https://nextjs.org/api/docs-og?title=next.config.js%20Options:%20images"/><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_G6imS94CKn5yzahWcEVibSnpDXt1" 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_api-reference_next-config-js_images" 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_G6imS94CKn5yzahWcEVibSnpDXt1 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_G6imS94CKn5yzahWcEVibSnpDXt1 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_G6imS94CKn5yzahWcEVibSnpDXt1"/></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_api-reference_next-config-js_images" 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_G6imS94CKn5yzahWcEVibSnpDXt1 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_G6imS94CKn5yzahWcEVibSnpDXt1 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_G6imS94CKn5yzahWcEVibSnpDXt1"/></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="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/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/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="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="false"><a class="hover:text-gray-1000 relative 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="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/api-reference/next-config-js/images"><div aria-hidden="true" class="absolute -left-[13px] bottom-0 top-0 w-[1px] bg-blue-600"></div>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="#example-loader-configuration">Example Loader Configuration</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#akamai">Akamai</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#aws-cloudfront">AWS CloudFront</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#cloudinary">Cloudinary</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#cloudflare">Cloudflare</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#contentful">Contentful</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#fastly">Fastly</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#gumlet">Gumlet</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#imageengine">ImageEngine</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#imgix">Imgix</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#pixelbin">PixelBin</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#sanity">Sanity</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#sirv">Sirv</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#supabase">Supabase</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#thumbor">Thumbor</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#imagekitio">ImageKit.io</a></li><li><a class="hover:text-gray-1000 block leading-[1.6] text-gray-900 pl-3" href="#nitrogen-aio">Nitrogen AIO</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/api-reference">API Reference</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/api-reference/next-config-js">next.config.js Options</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">images</span></div></div><div class="prose prose-vercel max-w-none" data-docs="true"><h1 class="break-words">images</h1> <p>If you want to use a cloud provider to optimize images instead of using the Next.js built-in Image Optimization API, you can configure <code>next.config.js</code> with the following:</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">next.config.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-constant)">module</span><span style="color:var(--shiki-color-text)">.</span><span style="color:var(--shiki-token-constant)">exports</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)"> images</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)"> loader</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)">'custom'</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> loaderFile</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/image/loader.js'</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>This <code>loaderFile</code> must point to a file relative to the root of your Next.js application. The file must export a default function that returns a string, 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/image/loader.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-string-expression)">'use client'</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)">myImageLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">`https://example.com/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">?w=</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">&q=</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div><p>Alternatively, you can use the <a href="/docs/app/api-reference/components/image#loader"><code>loader</code> prop</a> to pass the function to each instance of <code>next/image</code>.</p><blockquote class="p-3 text-sm"> <p><strong>Good to know</strong>: Customizing the image loader file, which accepts a function, requires using <a href="/docs/app/building-your-application/rendering/client-components">Client Components</a> to serialize the provided function.</p> </blockquote><p>To learn more about configuring the behavior of the built-in <a href="/docs/app/building-your-application/optimizing/images">Image Optimization API</a> and the <a href="/docs/app/api-reference/components/image">Image Component</a>, see <a href="/docs/app/api-reference/components/image#configuration-options">Image Configuration Options</a> for available options.</p>  <h2 id="example-loader-configuration" data-docs-heading=""><a href="#example-loader-configuration">Example Loader Configuration<span><svg viewBox="0 0 16 16" height="0.7em" width="0.7em"> <g stroke-width="1.2" fill="none" stroke="currentColor"> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698"></path> <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698"></path> </g> </svg></span></a></h2> <ul> <li><a href="#akamai">Akamai</a></li> <li><a href="#aws-cloudfront">AWS CloudFront</a></li> <li><a href="#cloudinary">Cloudinary</a></li> <li><a href="#cloudflare">Cloudflare</a></li> <li><a href="#contentful">Contentful</a></li> <li><a href="#fastly">Fastly</a></li> <li><a href="#gumlet">Gumlet</a></li> <li><a href="#imageengine">ImageEngine</a></li> <li><a href="#imgix">Imgix</a></li> <li><a href="#pixelbin">PixelBin</a></li> <li><a href="#sanity">Sanity</a></li> <li><a href="#sirv">Sirv</a></li> <li><a href="#supabase">Supabase</a></li> <li><a href="#thumbor">Thumbor</a></li> <li><a href="#imagekitio">Imagekit</a></li> <li><a href="#nitrogen-aio">Nitrogen AIO</a></li> </ul> <h3 id="akamai" data-docs-heading=""><a href="#akamai">Akamai<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> <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)">// Docs: https://techdocs.akamai.com/ivm/reference/test-images-on-demand</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)">akamaiLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">`https://example.com/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">?imwidth=</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="aws-cloudfront" data-docs-heading=""><a href="#aws-cloudfront">AWS CloudFront<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> <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)">// Docs: https://aws.amazon.com/developer/application-security-performance/articles/image-optimization</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)">cloudfrontLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'format'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'auto'</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'width'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">width</span><span style="color:var(--shiki-token-function)">.toString</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'quality'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> (quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.toString</span><span style="color:var(--shiki-color-text)">())</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="cloudinary" data-docs-heading=""><a href="#cloudinary">Cloudinary<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> <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)">// Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg</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)">cloudinaryLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">params</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)">'f_auto'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'c_limit'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">`w_</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</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 style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">`q_</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">quality </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)">'auto'</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">`https://example.com/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-token-function)">.join</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">','</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-keyword)">}${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="cloudflare" data-docs-heading=""><a href="#cloudflare">Cloudflare<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> <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)">// Docs: https://developers.cloudflare.com/images/transform-images</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)">cloudflareLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">params</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)">`width=</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</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 style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">`quality=</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</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 style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'format=auto'</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)">`https://example.com/cdn-cgi/image/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-token-function)">.join</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">','</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="contentful" data-docs-heading=""><a href="#contentful">Contentful<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> <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)">// Docs: https://www.contentful.com/developers/docs/references/images-api/</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)">contentfulLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'fm'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'webp'</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'w'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">width</span><span style="color:var(--shiki-token-function)">.toString</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'q'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> (quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.toString</span><span style="color:var(--shiki-color-text)">())</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="fastly" data-docs-heading=""><a href="#fastly">Fastly<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> <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)">// Docs: https://developer.fastly.com/reference/io/</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)">fastlyLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'auto'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'webp'</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'width'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">width</span><span style="color:var(--shiki-token-function)">.toString</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'quality'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> (quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.toString</span><span style="color:var(--shiki-color-text)">())</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="gumlet" data-docs-heading=""><a href="#gumlet">Gumlet<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> <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)">// Docs: https://docs.gumlet.com/reference/image-transform-size</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)">gumletLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'format'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'auto'</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'w'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">width</span><span style="color:var(--shiki-token-function)">.toString</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'q'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> (quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.toString</span><span style="color:var(--shiki-color-text)">())</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="imageengine" data-docs-heading=""><a href="#imageengine">ImageEngine<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> <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)">// Docs: https://support.imageengine.io/hc/en-us/articles/360058880672-Directives</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)">imageengineLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">compression</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)">100</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">-</span><span style="color:var(--shiki-color-text)"> (quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">50</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)">params</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)">`w_</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</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 style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">`cmpr_</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">compression</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">?imgeng=/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-token-function)">.join</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'/'</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-string-expression)">`</span></span> <span class="line"><span style="color:var(--shiki-token-string-expression)">}</span></span></code></pre></div> <h3 id="imgix" data-docs-heading=""><a href="#imgix">Imgix<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> <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)">// Demo: https://static.imgix.net/daisy.png?format=auto&fit=max&w=300</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)">imgixLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">params</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)">url</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-constant)">params</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'auto'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-token-function)">.getAll</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'auto'</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.join</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">','</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)">'format'</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)">params</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'fit'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">params</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)">'fit'</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)">'max'</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)">params</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'w'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">params</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)">'w'</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)">width</span><span style="color:var(--shiki-token-function)">.toString</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)">params</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'q'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> (quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">50</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.toString</span><span style="color:var(--shiki-color-text)">())</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="pixelbin" data-docs-heading=""><a href="#pixelbin">PixelBin<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> <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)">// Doc (Resize): https://www.pixelbin.io/docs/transformations/basic/resize/#width-w</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// Doc (Optimise): https://www.pixelbin.io/docs/optimizations/quality/#image-quality-when-delivering</span></span> <span class="line"><span style="color:var(--shiki-token-comment)">// Doc (Auto Format Delivery): https://www.pixelbin.io/docs/optimizations/format/#automatic-format-selection-with-f_auto-url-parameter</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)">pixelBinLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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-string-expression)">'<your-cloud-name>'</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)">opt</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)">`t.resize(w:</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">)~t.compress(q:</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">)`</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)">`https://cdn.pixelbin.io/v2/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">name</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">opt</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">?f_auto=true`</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="sanity" data-docs-heading=""><a href="#sanity">Sanity<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> <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)">// Docs: https://www.sanity.io/docs/image-urls</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)">sanityLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">prj</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)">'zp7mbokg'</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)">dataset</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)">'production'</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`https://cdn.sanity.io/images/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">prj</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">dataset</span><span style="color:var(--shiki-token-keyword)">}${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'auto'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'format'</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'fit'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">'max'</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'w'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">width</span><span style="color:var(--shiki-token-function)">.toString</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)">if</span><span style="color:var(--shiki-color-text)"> (quality) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'q'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">quality</span><span style="color:var(--shiki-token-function)">.toString</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)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="sirv" data-docs-heading=""><a href="#sirv">Sirv<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> <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)">// Docs: https://sirv.com/help/articles/dynamic-imaging/</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)">sirvLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">params</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)">url</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-constant)">params</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'format'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-token-function)">.getAll</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'format'</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.join</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">','</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)">'optimal'</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)">params</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'w'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">params</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)">'w'</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)">width</span><span style="color:var(--shiki-token-function)">.toString</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)">params</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'q'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> (quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">85</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.toString</span><span style="color:var(--shiki-color-text)">())</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="supabase" data-docs-heading=""><a href="#supabase">Supabase<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> <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)">// Docs: https://supabase.com/docs/guides/storage/image-transformations#nextjs-loader</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)">supabaseLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'width'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">width</span><span style="color:var(--shiki-token-function)">.toString</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)">url</span><span style="color:var(--shiki-token-function)">.</span><span style="color:var(--shiki-token-constant)">searchParams</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'quality'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> (quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-function)">.toString</span><span style="color:var(--shiki-color-text)">())</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="thumbor" data-docs-heading=""><a href="#thumbor">Thumbor<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> <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)">// Docs: https://thumbor.readthedocs.io/en/latest/</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)">thumborLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">params</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)">`</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">x0`</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">`filters:quality(</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">75</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">)`</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)">`https://example.com</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-token-function)">.join</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'/'</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-keyword)">}${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="imagekitio" data-docs-heading=""><a href="#imagekitio">ImageKit.io<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> <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)">// Docs: https://imagekit.io/docs/image-transformation</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)">imageKitLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">params</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)">`w-</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</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 style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">`q-</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">quality </span><span style="color:var(--shiki-token-keyword)">||</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">80</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">`https://ik.imagekit.io/your_imagekit_id/</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">src</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">?tr=</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-token-function)">.join</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">','</span><span style="color:var(--shiki-color-text)">)</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div> <h3 id="nitrogen-aio" data-docs-heading=""><a href="#nitrogen-aio">Nitrogen AIO<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> <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)">// Docs: https://docs.n7.io/aio/intergrations/</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)">aioLoader</span><span style="color:var(--shiki-color-text)">({ src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> width</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> quality }) {</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)">url</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)">new</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-function)">URL</span><span style="color:var(--shiki-color-text)">(src</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">window</span><span style="color:var(--shiki-color-text)">.</span><span style="color:var(--shiki-token-constant)">location</span><span style="color:var(--shiki-color-text)">.href)</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)">params</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)">url</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)">const</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">aioParams</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)">params</span><span style="color:var(--shiki-token-function)">.getAll</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'aio'</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)">aioParams</span><span style="color:var(--shiki-token-function)">.push</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`w-</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-color-text)">width</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</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)">if</span><span style="color:var(--shiki-color-text)"> (quality) {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">aioParams</span><span style="color:var(--shiki-token-function)">.push</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">`q-</span><span style="color:var(--shiki-token-keyword)">${</span><span style="color:var(--shiki-token-constant)">quality</span><span style="color:var(--shiki-token-function)">.toString</span><span style="color:var(--shiki-color-text)">()</span><span style="color:var(--shiki-token-keyword)">}</span><span style="color:var(--shiki-token-string-expression)">`</span><span style="color:var(--shiki-color-text)">)</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> }</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">params</span><span style="color:var(--shiki-token-function)">.set</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">'aio'</span><span style="color:var(--shiki-token-punctuation)">,</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">aioParams</span><span style="color:var(--shiki-token-function)">.join</span><span style="color:var(--shiki-color-text)">(</span><span style="color:var(--shiki-token-string-expression)">';'</span><span style="color:var(--shiki-color-text)">))</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">return</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">url</span><span style="color:var(--shiki-color-text)">.href</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre></div></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: httpAgentOptions" class="pagination_item__pRz03" href="/docs/app/api-reference/next-config-js/httpAgentOptions"><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">httpAgentOptions</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: cacheHandler" class="pagination_item__pRz03 pagination_align-right__0nLuq" href="/docs/app/api-reference/next-config-js/incrementalCacheHandlerPath"><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">cacheHandler</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_api-reference_next-config-js_images" 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_api-reference_next-config-js_images" 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_api-reference_next-config-js_images" 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_api-reference_next-config-js_images" 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_api-reference_next-config-js_images" 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_api-reference_next-config-js_images" 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":"60512692ba118fb8e0c58cc05726b4afbb811fc09b","bound":"$@1"}"/><input type="hidden" name="$ACTION_1:1" value="[{"success":false,"error":""}]"/><input type="hidden" name="$ACTION_KEY" value="k1511711161"/><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-a905a987e08406bb.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"d:\"$Sreact.fragment\"\ne:I[35844,[],\"\"]\nf:I[92802,[],\"\"]\n10:I[6426,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"Analytics\"]\n11:I[62913,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWc"])</script><script>self.__next_f.push([1,"EVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"PrefetchCrossZoneLinksProvider\"]\n12:I[85249,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/ch"])</script><script>self.__next_f.push([1,"unks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"Header\"]\n13:I[5788,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"Provider\"]\n14:I[23732,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a"])</script><script>self.__next_f.push([1,"751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5600\",\"static/chunks/5600-036b4f92f1d976a8.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"975\",\"static/chunks/app/(next-site)/page-d065ed8aa15519a9.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"HydrateMeLater\"]\n15:I[18402,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"default\"]\n16:I[23290,[\"6674\",\"static/chunks/6674-29ca2292c"])</script><script>self.__next_f.push([1,"2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"Image\"]\n17:I[62913,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzah"])</script><script>self.__next_f.push([1,"WcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"Link\"]\n18:\"$Sreact.suspense\"\n19:I[96225,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chun"])</script><script>self.__next_f.push([1,"ks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"ExternalFooterLink\"]\n1a:I[13866,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"NewsletterForm\"]\n1b:I[85849,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static"])</script><script>self.__next_f.push([1,"/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"ThemeSwitcher\"]\n1c:I[58067,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS9"])</script><script>self.__next_f.push([1,"4CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"Cmdk\"]\n1d:I[68269,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"TrackPageView\"]\n1e:I[62913,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yza"])</script><script>self.__next_f.push([1,"hWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8096\",\"static/chunks/8096-2eb55beb8d350999.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2172\",\"static/chunks/2172-f536267f3bb28b63.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"8236\",\"static/chunks/8236-2af07fbfca1c1af3.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1629\",\"static/chunks/1629-69a0cb023ea3ef9f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7525\",\"static/chunks/7525-b9f264b43b34f46e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1080\",\"static/chunks/app/(next-site)/layout-870ad84fe688e997.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"PrefetchCrossZoneLinks\"]\n1f:I[41139,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9916\",\"static/chunks/9916-e801c970cfe633f0.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9588\",\"static/chunks/app/(next-site)/docs/layout-5b7f90e8227770ea.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"MobileNav\"]\n20:I[83415,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9916\",\"static/chunks/9916-e801c970cfe633f0.js?dpl=dpl_G6i"])</script><script>self.__next_f.push([1,"mS94CKn5yzahWcEVibSnpDXt1\",\"9588\",\"static/chunks/app/(next-site)/docs/layout-5b7f90e8227770ea.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"NavList\"]\n22:I[70781,[],\"OutletBoundary\"]\n24:I[70781,[],\"MetadataBoundary\"]\n26:I[70781,[],\"ViewportBoundary\"]\n28:I[65371,[],\"\"]\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_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\n4:HL[\"/_next/static/css/3a4b7cc0153d49b4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\n5:HL[\"/_next/static/css/58f50fdfd3cd38b6.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\n6:HL[\"/_next/static/css/bf98005f04f1b7f7.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\n7:HL[\"/_next/static/css/bfc235d8dfd01529.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\n8:HL[\"/_next/static/css/824202e71e79374d.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\n9:HL[\"/_next/static/css/83fe6bc36ad4703d.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\na:HL[\"/_next/static/css/4ad309783bf416a2.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\nb:HL[\"/_next/static/css/baf446a5c20b5fd4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\nc:HL[\"/_next/static/css/f4addedd731adba4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"SwKYzlUhmlDU-bQvn4od8\",\"p\":\"\",\"c\":[\"\",\"docs\",\"app\",\"api-reference\",\"next-config-js\",\"images\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"(next-site)\",{\"children\":[\"docs\",{\"children\":[[\"slug\",\"app/api-reference/next-config-js/images\",\"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_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3a4b7cc0153d49b4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/58f50fdfd3cd38b6.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/bf98005f04f1b7f7.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/bfc235d8dfd01529.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/824202e71e79374d.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"6\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/83fe6bc36ad4703d.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"7\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4ad309783bf416a2.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"8\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/baf446a5c20b5fd4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"9\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/f4addedd731adba4.css?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"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\":\"expirePath\",\"description\":\"API Reference for the expirePath function.\",\"path\":\"canary/app/api-reference/functions/expirePath\",\"version\":\"canary\",\"children\":[]},{\"title\":\"expireTag\",\"description\":\"API Reference for the expireTag function.\",\"path\":\"canary/app/api-reference/functions/expireTag\",\"version\":\"canary\",\"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_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.29\",\"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/api-reference/next-config-js/images\",\"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\",\"lYHB8R7K9BSFheLOsjeGB\",{\"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[6968,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"ActiveHashProvider\"]\n2a:I[6968,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"sta"])</script><script>self.__next_f.push([1,"tic/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"ActiveHashObserver\"]\n2b:I[9622,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"TableOfContents\"]\n2c:I[5804,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js"])</script><script>self.__next_f.push([1,"?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"VercelCta\"]\n2d:I[46505,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEV"])</script><script>self.__next_f.push([1,"ibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"ScrollToTopButton\"]\n2e:I[34917,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"\"]\n2f:I[37562,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f"])</script><script>self.__next_f.push([1,"1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"CodeBlock\"]\n30:I[93228,[\"6674\",\"static/chunks/6674-29ca2292c2e30e3a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"1686\",\"static/chunks/1686-6a751e2a770b3494.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5189\",\"static/chunks/5189-8520d0180c7b10ad.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"505\",\"static/chunks/505-1890a27b852a9f28.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"4056\",\"static/chunks/4056-9fa3824b33ab5ae6.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"5946\",\"static/chunks/5946-d1eec9b2fdd3b62e.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7406\",\"static/chunks/7406-cab612fa14e1f3a7.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2901\",\"static/chunks/2901-e0da18f108f1acbc.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"9503\",\"static/chunks/9503-62dfc92085fff039.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"7023\",\"static/chunks/7023-cbfefeaa2b64975d.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6911\",\"static/chunks/6911-fd55ad484417ba6a.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"6807\",\"static/chunks/6807-775e501a7f5d3c3f.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"3228\",\"static/chunks/3228-1a11c56b7add424b.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\",\"2221\",\"static/chunks/app/(next-site)/docs/%5B%5B...slug%5D%5D/page-1327f1bbc026d720.js?dpl=dpl_G6imS94CKn5yzahWcEVibSnpDXt1\"],\"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\":\"example-loader-configuration\",\"text\":\"Example Loader Configuration\"},{\"level\":3,\"slug\":\"akamai\",\"text\":\"Akamai\"},{\"level\":3,\"slug\":\"aws-cloudfront\",\"text\":\"AWS CloudFront\"},{\"level\":3,\"slug\":\"cloudinary\",\"text\":\"Cloudinary\"},{\"level\":3,\"slug\":\"cloudflare\",\"text\":\"Cloudflare\"},{\"level\":3,\"slug\":\"contentful\",\"text\":\"Contentful\"},{\"level\":3,\"slug\":\"fastly\",\"text\":\"Fastly\"},{\"level\":3,\"slug\":\"gumlet\",\"text\":\"Gumlet\"},{\"level\":3,\"slug\":\"imageengine\",\"text\":\"ImageEngine\"},{\"level\":3,\"slug\":\"imgix\",\"text\":\"Imgix\"},{\"level\":3,\"slug\":\"pixelbin\",\"text\":\"PixelBin\"},{\"level\":3,\"slug\":\"sanity\",\"text\":\"Sanity\"},{\"level\":3,\"slug\":\"sirv\",\"text\":\"Sirv\"},{\"level\":3,\"slug\":\"supabase\",\"text\":\"Supabase\"},{\"level\":3,\"slug\":\"thumbor\",\"text\":\"Thumbor\"},{\"level\":3,\"slug\":\"imagekitio\",\"text\":\"ImageKit.io\"},{\"level\":3,\"slug\":\"nitrogen-aio\",\"text\":\"Nitrogen AIO\"}]}],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/api-reference\",{\"children\":[[\"$\",\"$L2e\",null,{\"className\":\"text-gray-700 hover:text-gray-600\",\"href\":\"/docs/app/api-reference\",\"children\":\"API Reference\"}],[\"$\",\"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/api-reference/next-config-js\",{\"children\":[[\"$\",\"$L2e\",null,{\"className\":\"text-gray-700 hover:text-gray-600\",\"href\":\"/docs/app/api-reference/next-config-js\",\"children\":\"next.config.js Options\"}],[\"$\",\"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/api-reference/next-config-js/images\",{\"children\":[\"$\",\"span\",null,{\"className\":\"text-gray-1000 shrink-0\",\"children\":\"images\"}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"prose prose-vercel max-w-none\",\"data-docs\":true,\"children\":[null,[\"$\",\"h1\",null,{\"className\":\"break-words\",\"children\":[\"images\",null]}],null,[\"\\n\",[\"$\",\"p\",null,{\"children\":[\"If you want to use a cloud provider to optimize images instead of using the Next.js built-in Image Optimization API, you can configure \",[\"$\",\"code\",null,{\"children\":\"next.config.js\"}],\" with the following:\"]}],\"\\n\",[\"$\",\"$L2f\",null,{\"filename\":\"next.config.js\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"module\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"exports\"}],[\"$\",\"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\":\" images\"}],[\"$\",\"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\":\" loader\"}],[\"$\",\"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\":\"'custom'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" loaderFile\"}],[\"$\",\"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/image/loader.js'\"}],[\"$\",\"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\":[\"This \",[\"$\",\"code\",null,{\"children\":\"loaderFile\"}],\" must point to a file relative to the root of your Next.js application. The file must export a default function that returns a string, for example:\"]}],\"\\n\",[[\"$\",\"$L2f\",null,{\"filename\":\"my/image/loader.js\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'use client'\"}]}],\"\\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\":\"myImageLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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-string-expression)\"},\"children\":\"`https://example.com/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"?w=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"children\":\"\u0026q=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],[\"$\",\"p\",null,{\"children\":[\"Alternatively, you can use the \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/app/api-reference/components/image#loader\",\"children\":[[\"$\",\"code\",null,{\"children\":\"loader\"}],\" prop\"]}],\" to pass the function to each instance of \",[\"$\",\"code\",null,{\"children\":\"next/image\"}],\".\"]}],[\"$\",\"blockquote\",null,{\"className\":\"p-3 text-sm\",\"children\":[\"\\n\",[\"$\",\"p\",null,{\"children\":[[\"$\",\"strong\",null,{\"children\":\"Good to know\"}],\": Customizing the image loader file, which accepts a function, requires using \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/app/building-your-application/rendering/client-components\",\"children\":\"Client Components\"}],\" to serialize the provided function.\"]}],\"\\n\"]}],[\"$\",\"p\",null,{\"children\":[\"To learn more about configuring the behavior of the built-in \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/app/building-your-application/optimizing/images\",\"children\":\"Image Optimization API\"}],\" and the \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/app/api-reference/components/image\",\"children\":\"Image Component\"}],\", see \",[\"$\",\"$L2e\",null,{\"href\":\"/docs/app/api-reference/components/image#configuration-options\",\"children\":\"Image Configuration Options\"}],\" for available options.\"]}]],\"\\n\",null,\"\\n\",[\"$\",\"h2\",null,{\"id\":\"example-loader-configuration\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#example-loader-configuration\",\"children\":[\"Example Loader Configuration\",[\"$\",\"span\",null,{\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 16 16\",\"height\":\"0.7em\",\"width\":\"0.7em\",\"children\":[\"\\n \",[\"$\",\"g\",null,{\"strokeWidth\":\"1.2\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"children\":[\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M8.995,7.005 L8.995,7.005c1.374,1.374,1.374,3.601,0,4.975l-1.99,1.99c-1.374,1.374-3.601,1.374-4.975,0l0,0c-1.374-1.374-1.374-3.601,0-4.975 l1.748-1.698\"}],\"\\n \",[\"$\",\"path\",null,{\"fill\":\"none\",\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeMiterlimit\":\"10\",\"d\":\"M7.005,8.995 L7.005,8.995c-1.374-1.374-1.374-3.601,0-4.975l1.99-1.99c1.374-1.374,3.601-1.374,4.975,0l0,0c1.374,1.374,1.374,3.601,0,4.975 l-1.748,1.698\"}],\"\\n \"]}],\"\\n\"]}]}]]}]}],\"\\n\",[\"$\",\"ul\",null,{\"children\":[\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#akamai\",\"children\":\"Akamai\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#aws-cloudfront\",\"children\":\"AWS CloudFront\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#cloudinary\",\"children\":\"Cloudinary\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#cloudflare\",\"children\":\"Cloudflare\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#contentful\",\"children\":\"Contentful\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#fastly\",\"children\":\"Fastly\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#gumlet\",\"children\":\"Gumlet\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#imageengine\",\"children\":\"ImageEngine\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#imgix\",\"children\":\"Imgix\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#pixelbin\",\"children\":\"PixelBin\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#sanity\",\"children\":\"Sanity\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#sirv\",\"children\":\"Sirv\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#supabase\",\"children\":\"Supabase\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#thumbor\",\"children\":\"Thumbor\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#imagekitio\",\"children\":\"Imagekit\"}]}],\"\\n\",[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#nitrogen-aio\",\"children\":\"Nitrogen AIO\"}]}],\"\\n\"]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"akamai\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#akamai\",\"children\":[\"Akamai\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://techdocs.akamai.com/ivm/reference/test-images-on-demand\"}]}],\"\\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\":\"akamaiLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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-string-expression)\"},\"children\":\"`https://example.com/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"?imwidth=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"children\":\"`\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"aws-cloudfront\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#aws-cloudfront\",\"children\":[\"AWS CloudFront\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://aws.amazon.com/developer/application-security-performance/articles/image-optimization\"}]}],\"\\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\":\"cloudfrontLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"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-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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'format'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'auto'\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'width'\"}],[\"$\",\"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\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'quality'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"cloudinary\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#cloudinary\",\"children\":[\"Cloudinary\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg\"}]}],\"\\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\":\"cloudinaryLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"params\"}],[\"$\",\"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\":\"'f_auto'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'c_limit'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"`w_\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"children\":\"`\"}],[\"$\",\"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-string-expression)\"},\"children\":\"`q_\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"quality \"}],[\"$\",\"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\":\"'auto'\"}],[\"$\",\"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-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-string-expression)\"},\"children\":\"`https://example.com/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".join\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"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\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"cloudflare\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#cloudflare\",\"children\":[\"Cloudflare\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://developers.cloudflare.com/images/transform-images\"}]}],\"\\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\":\"cloudflareLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"params\"}],[\"$\",\"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\":\"`width=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"children\":\"`\"}],[\"$\",\"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-string-expression)\"},\"children\":\"`quality=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"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\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'format=auto'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"`https://example.com/cdn-cgi/image/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".join\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"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-token-string-expression)\"},\"children\":\"/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"contentful\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#contentful\",\"children\":[\"Contentful\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://www.contentful.com/developers/docs/references/images-api/\"}]}],\"\\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\":\"contentfulLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"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-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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'fm'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'webp'\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'w'\"}],[\"$\",\"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\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'q'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"fastly\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#fastly\",\"children\":[\"Fastly\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://developer.fastly.com/reference/io/\"}]}],\"\\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\":\"fastlyLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"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-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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'auto'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'webp'\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'width'\"}],[\"$\",\"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\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'quality'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"gumlet\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#gumlet\",\"children\":[\"Gumlet\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://docs.gumlet.com/reference/image-transform-size\"}]}],\"\\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\":\"gumletLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"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-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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'format'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'auto'\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'w'\"}],[\"$\",\"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\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'q'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"imageengine\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#imageengine\",\"children\":[\"ImageEngine\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://support.imageengine.io/hc/en-us/articles/360058880672-Directives\"}]}],\"\\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\":\"imageengineLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"compression\"}],[\"$\",\"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\":\"100\"}],[\"$\",\"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\":\" (quality \"}],[\"$\",\"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\":\"50\"}],[\"$\",\"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\":\"params\"}],[\"$\",\"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\":\"`w_\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"children\":\"`\"}],[\"$\",\"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-string-expression)\"},\"children\":\"`cmpr_\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"compression\"}],[\"$\",\"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-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-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"?imgeng=/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".join\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'/'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"imgix\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#imgix\",\"children\":[\"Imgix\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Demo: https://static.imgix.net/daisy.png?format=auto\u0026fit=max\u0026w=300\"}]}],\"\\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\":\"imgixLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"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-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\":\"params\"}],[\"$\",\"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\":\"url\"}],[\"$\",\"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-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'auto'\"}],[\"$\",\"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\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".getAll\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'auto'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".join\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"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\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'format'\"}],[\"$\",\"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-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'fit'\"}],[\"$\",\"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\":\"params\"}],[\"$\",\"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\":\"'fit'\"}],[\"$\",\"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\":\"'max'\"}],[\"$\",\"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-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'w'\"}],[\"$\",\"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\":\"params\"}],[\"$\",\"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\":\"'w'\"}],[\"$\",\"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\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'q'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality \"}],[\"$\",\"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\":\"50\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"pixelbin\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#pixelbin\",\"children\":[\"PixelBin\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Doc (Resize): https://www.pixelbin.io/docs/transformations/basic/resize/#width-w\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Doc (Optimise): https://www.pixelbin.io/docs/optimizations/quality/#image-quality-when-delivering\"}]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Doc (Auto Format Delivery): https://www.pixelbin.io/docs/optimizations/format/#automatic-format-selection-with-f_auto-url-parameter\"}]}],\"\\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\":\"pixelBinLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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-string-expression)\"},\"children\":\"'\u003cyour-cloud-name\u003e'\"}]]}],\"\\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\":\"opt\"}],[\"$\",\"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\":\"`t.resize(w:\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"children\":\")~t.compress(q:\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"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-string-expression)\"},\"children\":\"`https://cdn.pixelbin.io/v2/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"name\"}],[\"$\",\"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-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"opt\"}],[\"$\",\"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-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"?f_auto=true`\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"sanity\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#sanity\",\"children\":[\"Sanity\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://www.sanity.io/docs/image-urls\"}]}],\"\\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\":\"sanityLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"prj\"}],[\"$\",\"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\":\"'zp7mbokg'\"}]]}],\"\\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\":\"dataset\"}],[\"$\",\"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\":\"'production'\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`https://cdn.sanity.io/images/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"prj\"}],[\"$\",\"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-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"dataset\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"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-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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'auto'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'format'\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'fit'\"}],[\"$\",\"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-string-expression)\"},\"children\":\"'max'\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'w'\"}],[\"$\",\"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\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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\":\"if\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'q'\"}],[\"$\",\"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\":\"quality\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"sirv\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#sirv\",\"children\":[\"Sirv\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://sirv.com/help/articles/dynamic-imaging/\"}]}],\"\\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\":\"sirvLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"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-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\":\"params\"}],[\"$\",\"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\":\"url\"}],[\"$\",\"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-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'format'\"}],[\"$\",\"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\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".getAll\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'format'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".join\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"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\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'optimal'\"}],[\"$\",\"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-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'w'\"}],[\"$\",\"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\":\"params\"}],[\"$\",\"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\":\"'w'\"}],[\"$\",\"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\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'q'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality \"}],[\"$\",\"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\":\"85\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"supabase\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#supabase\",\"children\":[\"Supabase\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://supabase.com/docs/guides/storage/image-transformations#nextjs-loader\"}]}],\"\\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\":\"supabaseLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"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-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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'width'\"}],[\"$\",\"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\":\"width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"searchParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'quality'\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\")\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"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-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"thumbor\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#thumbor\",\"children\":[\"Thumbor\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://thumbor.readthedocs.io/en/latest/\"}]}],\"\\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\":\"thumborLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"params\"}],[\"$\",\"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\":\"`\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"children\":\"x0`\"}],[\"$\",\"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-string-expression)\"},\"children\":\"`filters:quality(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"quality \"}],[\"$\",\"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\":\"75\"}],[\"$\",\"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-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-string-expression)\"},\"children\":\"`https://example.com\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".join\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"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\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"imagekitio\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#imagekitio\",\"children\":[\"ImageKit.io\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://imagekit.io/docs/image-transformation\"}]}],\"\\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\":\"imageKitLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"params\"}],[\"$\",\"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\":\"`w-\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"children\":\"`\"}],[\"$\",\"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-string-expression)\"},\"children\":\"`q-\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"quality \"}],[\"$\",\"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\":\"80\"}],[\"$\",\"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-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-string-expression)\"},\"children\":\"`https://ik.imagekit.io/your_imagekit_id/\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"}\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"?tr=\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".join\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"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-token-string-expression)\"},\"children\":\"`\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}],\"\\n\",[\"$\",\"h3\",null,{\"id\":\"nitrogen-aio\",\"data-docs-heading\":\"\",\"children\":[\"$\",\"a\",null,{\"href\":\"#nitrogen-aio\",\"children\":[\"Nitrogen AIO\",[\"$\",\"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\":\"$undefined\",\"language\":\"js\",\"switcher\":\"$undefined\",\"children\":[[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-comment)\"},\"children\":\"// Docs: https://docs.n7.io/aio/intergrations/\"}]}],\"\\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\":\"aioLoader\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"({ src\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" width\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-punctuation)\"},\"children\":\",\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" quality }) {\"}]]}],\"\\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\":\"url\"}],[\"$\",\"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\":\"new\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\"URL\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(src\"}],[\"$\",\"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\":\"window\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"location\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href)\"}]]}],\"\\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\":\"params\"}],[\"$\",\"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\":\"url\"}],[\"$\",\"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\":\"const\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"aioParams\"}],[\"$\",\"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\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".getAll\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'aio'\"}],[\"$\",\"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-constant)\"},\"children\":\"aioParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".push\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`w-\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"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-token-string-expression)\"},\"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\":\"if\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" (quality) {\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"aioParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".push\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"`q-\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-keyword)\"},\"children\":\"$${\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"quality\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".toString\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"()\"}],[\"$\",\"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-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-constant)\"},\"children\":\"params\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".set\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"children\":\"'aio'\"}],[\"$\",\"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\":\"aioParams\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-function)\"},\"children\":\".join\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"(\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-string-expression)\"},\"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\":\"return\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\" \"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-token-constant)\"},\"children\":\"url\"}],[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\".href\"}]]}],\"\\n\",[\"$\",\"span\",null,{\"className\":\"line\",\"children\":[\"$\",\"span\",null,{\"style\":{\"color\":\"var(--shiki-color-text)\"},\"children\":\"}\"}]}]]}]]]}],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: httpAgentOptions\",\"className\":\"pagination_item__pRz03\",\"href\":\"/docs/app/api-reference/next-config-js/httpAgentOptions\",\"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\":\"httpAgentOptions\"}],[\"$\",\"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: cacheHandler\",\"className\":\"pagination_item__pRz03 pagination_align-right__0nLuq\",\"href\":\"/docs/app/api-reference/next-config-js/incrementalCacheHandlerPath\",\"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\":\"cacheHandler\"}],[\"$\",\"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\":\"next.config.js Options: images | Next.js\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"Custom configuration for the next/image loader\"}],[\"$\",\"link\",\"3\",{\"rel\":\"canonical\",\"href\":\"https://nextjs.org/docs/app/api-reference/next-config-js/images\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"next.config.js Options: images | Next.js\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"Custom configuration for the next/image loader\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"https://nextjs.org/api/docs-og?title=next.config.js%20Options:%20images\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:title\",\"content\":\"next.config.js Options: images\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:description\",\"content\":\"Custom configuration for the next/image loader\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:image\",\"content\":\"https://nextjs.org/api/docs-og?title=next.config.js%20Options:%20images\"}],[\"$\",\"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>