CINXE.COM

<!DOCTYPE html><html><head><meta charSet="utf-8" data-next-head=""/><meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)" data-next-head=""/><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" data-next-head=""/><style data-next-head="">:root{--nextra-primary-hue:212deg;--nextra-primary-saturation:100%;--nextra-primary-lightness:45%;--nextra-navbar-height:64px;--nextra-menu-height:3.75rem;--nextra-banner-height:2.5rem;--nextra-bg:250,250,250;}.dark{--nextra-primary-hue:204deg;--nextra-primary-saturation:100%;--nextra-primary-lightness:55%;--nextra-bg:17,17,17;}</style><title data-next-head="">Organize Files - Nextra</title><meta property="og:title" content="Organize Files - Nextra" data-next-head=""/><meta name="description" content="Make beautiful websites with Next.js & MDX." data-next-head=""/><meta property="og:description" content="Make beautiful websites with Next.js & MDX." data-next-head=""/><meta property="og:image" content="https://nextra.site//og?title=Organize Files" data-next-head=""/><meta name="msapplication-TileColor" content="#fff" data-next-head=""/><meta http-equiv="Content-Language" content="en" data-next-head=""/><meta name="twitter:card" content="summary_large_image" data-next-head=""/><meta name="twitter:site:domain" content="nextra.site" data-next-head=""/><meta name="twitter:url" content="https://nextra.site" data-next-head=""/><meta name="apple-mobile-web-app-title" content="Nextra" data-next-head=""/><link rel="icon" href="/favicon.svg" type="image/svg+xml" data-next-head=""/><link rel="icon" href="/favicon.png" type="image/png" data-next-head=""/><link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)" data-next-head=""/><link rel="icon" href="/favicon-dark.png" type="image/png" media="(prefers-color-scheme: dark)" data-next-head=""/><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/8b545b0ea48d5194.css" as="style"/><link rel="stylesheet" href="/_next/static/css/8b545b0ea48d5194.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-e929cc25552c3207.js" defer=""></script><script src="/_next/static/chunks/framework-39925ec89e745337.js" defer=""></script><script src="/_next/static/chunks/main-3bccaa671a13efe9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-9967617341519fcc.js" defer=""></script><script src="/_next/static/chunks/8402-e02c9f59dc02b108.js" defer=""></script><script src="/_next/static/chunks/1512-04151a96390d6bf9.js" defer=""></script><script src="/_next/static/chunks/pages/docs/guide/organize-files-6d2f50dd3c4a4ead.js" defer=""></script><script src="/_next/static/02EuseZYwilZi1jMNhUd6/_buildManifest.js" defer=""></script><script src="/_next/static/02EuseZYwilZi1jMNhUd6/_ssgManifest.js" defer=""></script><style id="__jsx-37c7cf7a4c4dcf24">svg.jsx-37c7cf7a4c4dcf24{-webkit-mask-image:-webkit-linear-gradient(30deg,black 25%,rgba(0,0,0,.2)50%,black 75%);mask-image:-webkit-linear-gradient(30deg,black 25%,rgba(0,0,0,.2)50%,black 75%);mask-image:-moz-linear-gradient(30deg,black 25%,rgba(0,0,0,.2)50%,black 75%);mask-image:-o-linear-gradient(30deg,black 25%,rgba(0,0,0,.2)50%,black 75%);mask-image:linear-gradient(60deg,black 25%,rgba(0,0,0,.2)50%,black 75%);-webkit-mask-size:400%;mask-size:400%;-webkit-mask-position:0%;mask-position:0%}svg.jsx-37c7cf7a4c4dcf24:hover{-webkit-mask-position:100%;mask-position:100%;-webkit-transition:mask-position 1s ease,-webkit-mask-position 1s ease;-moz-transition:mask-position 1s ease,-webkit-mask-position 1s ease;-o-transition:mask-position 1s ease,-webkit-mask-position 1s ease;transition:mask-position 1s ease,-webkit-mask-position 1s ease}</style></head><body><div id="__next"><script>((e,t,n,r,o,i,l,a)=>{let s=document.documentElement,u=["light","dark"];function c(t){(Array.isArray(e)?e:[e]).forEach(e=>{let n="class"===e,r=n&&i?o.map(e=>i[e]||e):o;n?(s.classList.remove(...r),s.classList.add(t)):s.setAttribute(e,t)}),a&&u.includes(t)&&(s.style.colorScheme=t)}if(r)c(r);else try{let e=localStorage.getItem(t)||n,r=l&&"system"===e?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e;c(r)}catch(e){}})("class","theme","system",null,["light","dark"],null,true,true)</script><div dir="ltr"><script>document.documentElement.setAttribute('dir','ltr')</script><script>try{if(localStorage.getItem("3.0-release")==='0'){document.body.classList.add('nextra-banner-hidden')}}catch(e){}</script><div class="nextra-banner-container max-md:_sticky _top-0 _z-20 _flex _items-center _h-[var(--nextra-banner-height)] [body.nextra-banner-hidden_&]:_hidden _text-slate-50 dark:_text-white _bg-neutral-900 dark:_bg-[linear-gradient(1deg,#383838,#212121)] _px-2 _ps-10 print:_hidden"><div class="_w-full _truncate _text-center _font-medium _text-sm"><div class="before:content-["🎉_"]">Nextra 3.0 is released. <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font] after:content-["_→"]" href="https://the-guild.dev/blog/nextra-3" target="_blank" rel="noreferrer">Read more</a></div></div><button class="_transition _p-2 _opacity-80" aria-label="Dismiss banner" type="button" data-headlessui-state=""><svg viewBox="0 0 20 20" fill="currentColor" height="16"><path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"></path></svg></button></div><div class="nextra-nav-container _sticky _top-0 _z-20 _w-full _bg-transparent print:_hidden"><div class="nextra-nav-container-blur"></div><nav class="_mx-auto _flex _h-[var(--nextra-navbar-height)] _max-w-[90rem] _items-center _justify-end _gap-4 _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)]"><a class="nextra-focus _flex _items-center hover:_opacity-75 ltr:_mr-auto rtl:_ml-auto" href="/"><svg height="20" viewBox="0 0 361 70" fill="none" xmlns="http://www.w3.org/2000/svg" class="jsx-37c7cf7a4c4dcf24"><path d="M114.913 33.2763v28.7642h-11.57V12.9496h11.059v8.3416h.575c1.129-2.7485 2.93-4.9325 5.401-6.5518 2.493-1.6193 5.572-2.429 9.237-2.429 3.388 0 6.339.7244 8.853 2.1733 2.535 1.4489 4.496 3.5476 5.88 6.2962 1.407 2.7486 2.099 6.0831 2.078 10.0035v31.2571h-11.57V32.5732c0-3.2813-.852-5.8487-2.557-7.7024-1.683-1.8537-4.016-2.7806-6.999-2.7806-2.024 0-3.824.4475-5.401 1.3424-1.556.8736-2.781 2.1413-3.676 3.8032-.873 1.662-1.31 3.6755-1.31 6.0405Zm61.407 29.723c-4.922 0-9.172-1.0227-12.752-3.0681-3.558-2.0668-6.296-4.9858-8.214-8.7572-1.917-3.7926-2.876-8.2563-2.876-13.3913 0-5.0497.959-9.4815 2.876-13.2954 1.939-3.8353 4.645-6.8182 8.118-8.9489 3.473-2.152 7.553-3.228 12.241-3.228 3.026 0 5.881.4901 8.565 1.4702 2.706.9588 5.093 2.4503 7.159 4.4744 2.088 2.0242 3.729 4.6023 4.922 7.7344 1.193 3.1108 1.79 6.8182 1.79 11.1221v3.5476h-40.238v-7.7983h29.148c-.021-2.2159-.501-4.1868-1.438-5.9126-.938-1.7472-2.248-3.1215-3.931-4.1229-1.662-1.0014-3.601-1.5021-5.817-1.5021-2.365 0-4.443.5753-6.232 1.7258-1.79 1.1293-3.186 2.6208-4.187 4.4745-.98 1.8324-1.481 3.8459-1.502 6.0405v6.8075c0 2.8551.522 5.3054 1.566 7.3508 1.044 2.0242 2.503 3.5796 4.378 4.6662 1.875 1.0654 4.07 1.598 6.584 1.598 1.683 0 3.207-.2343 4.57-.7031 1.364-.49 2.546-1.2038 3.548-2.1413 1.001-.9375 1.758-2.0987 2.269-3.4837l10.803 1.2145c-.682 2.8551-1.982 5.348-3.9 7.4787-1.896 2.1094-4.325 3.75-7.286 4.9219-2.962 1.1506-6.35 1.7258-10.164 1.7258Zm34.777-50.0497 9.908 18.1215 10.067-18.1215h12.241l-14.798 24.5455 15.054 24.5454h-12.177l-10.387-17.674-10.291 17.674h-12.273l14.957-24.5454-14.574-24.5455h12.273Zm63.878 0v8.9489h-28.221v-8.9489h28.221ZM253.722 1.18825h11.569V47.2749c0 1.5554.235 2.7486.704 3.5795.49.8097 1.129 1.3637 1.917 1.662s1.662.4474 2.621.4474c.724 0 1.385-.0532 1.981-.1598.618-.1065 1.087-.2024 1.407-.2876l1.949 9.0447c-.618.2131-1.502.4475-2.652.7031-1.13.2557-2.515.4049-4.155.4475-2.898.0852-5.508-.3516-7.831-1.3104-2.322-.9801-4.165-2.4929-5.529-4.5383-1.342-2.0455-2.003-4.6023-1.981-7.6705V1.18825Zm29.129 60.85225V12.9496h11.218v8.1818h.512c.895-2.8338 2.429-5.0177 4.602-6.5518 2.173-1.5554 4.677-2.3331 7.511-2.3331 1.321 0 2.535.1598 3.643.4794 1.108.3196 2.088.7564 2.94 1.3104l-3.579 9.588c-.618-.2983-1.3-.5433-2.046-.7351-.745-.1917-1.587-.2876-2.524-.2876-2.003 0-3.814.4474-5.434 1.3423-1.619.8949-2.908 2.1414-3.867 3.7394-.937 1.5767-1.406 3.4091-1.406 5.4971v28.8601h-11.57Zm51.222.863c-3.856 0-7.308-.9908-10.355-2.9723-3.047-1.9816-5.454-4.858-7.223-8.6293-1.768-3.7713-2.652-8.3523-2.652-13.7429 0-5.4546.894-10.0568 2.684-13.8068 1.811-3.7713 4.251-6.6158 7.319-8.5334 3.068-1.9389 6.488-2.9084 10.259-2.9084 2.877 0 5.242.4901 7.095 1.4702 1.854.9588 3.324 2.12 4.411 3.4836 1.087 1.3424 1.928 2.6101 2.525 3.8033h.479v-8.1179h11.602v49.0909h-11.378v-7.7343h-.703c-.597 1.1931-1.46 2.4609-2.589 3.8032-1.129 1.321-2.621 2.4503-4.474 3.3878-1.854.9375-4.187 1.4063-7 1.4063Zm3.228-9.4922c2.451 0 4.539-.6605 6.265-1.9816 1.725-1.3423 3.036-3.2066 3.931-5.593s1.342-5.1669 1.342-8.3416c0-3.1747-.447-5.934-1.342-8.2777-.874-2.3438-2.174-4.1655-3.9-5.4652-1.704-1.2997-3.803-1.9496-6.296-1.9496-2.578 0-4.73.6712-6.456 2.0135s-3.025 3.196-3.899 5.5611c-.873 2.365-1.31 5.071-1.31 8.1179 0 3.0682.437 5.8061 1.31 8.2138.895 2.3863 2.205 4.272 3.931 5.6569 1.747 1.3636 3.889 2.0455 6.424 2.0455Z" fill="currentColor" class="jsx-37c7cf7a4c4dcf24"></path><path d="m64.8833 1.81335-2.8464 2.84638C47.1274 19.5692 22.9543 19.5692 8.04485 4.65972L5.19848 1.81335c-.93479-.93478-2.45037-.93478-3.38515 0-.93479.93478-.93478 2.45037 0 3.38515L4.6597 8.04487c14.9095 14.90953 14.9095 39.08263 0 53.99213l-2.84637 2.8463c-.93479.9348-.93479 2.4504 0 3.3852.93478.9348 2.45037.9348 3.38515 0l2.84637-2.8464c14.90955-14.9095 39.08255-14.9095 53.99205 0l2.8464 2.8464c.9348.9348 2.4504.9348 3.3852 0 .9347-.9348.9347-2.4504 0-3.3852l-2.8464-2.8463c-14.9095-14.9095-14.9095-39.0826 0-53.99213l2.8464-2.84637c.9347-.93478.9347-2.45037 0-3.38515-.9348-.93478-2.4504-.93478-3.3852 0Z" fill="currentColor" stroke="currentColor" stroke-width="2" class="jsx-37c7cf7a4c4dcf24"></path></svg></a><div class="_flex _gap-4 _overflow-x-auto nextra-scrollbar _py-1.5"><a class="nextra-focus _text-sm contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 max-md:_hidden _whitespace-nowrap _ring-inset _font-medium _subpixel-antialiased" aria-current="true" href="/docs">Documentation</a><button class="_text-sm contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 _text-gray-600 hover:_text-gray-800 dark:_text-gray-400 dark:hover:_text-gray-200 max-md:_hidden _items-center _whitespace-nowrap _flex _gap-1.5 _ring-inset" id="headlessui-menu-button-:Rt596:" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state="">Versions<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="_h-3.5 *:_origin-center *:_transition-transform *:_rotate-90"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><a class="nextra-focus _text-sm contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 max-md:_hidden _whitespace-nowrap _ring-inset _text-gray-600 hover:_text-gray-800 dark:_text-gray-400 dark:hover:_text-gray-200" aria-current="false" href="/blog">Blog</a><a class="nextra-focus _text-sm contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 max-md:_hidden _whitespace-nowrap _ring-inset _text-gray-600 hover:_text-gray-800 dark:_text-gray-400 dark:hover:_text-gray-200" aria-current="false" href="/about">About</a><a class="nextra-focus _text-sm contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 max-md:_hidden _whitespace-nowrap _ring-inset _text-gray-600 hover:_text-gray-800 dark:_text-gray-400 dark:hover:_text-gray-200" aria-current="false" href="/showcase">Showcase</a><a class="nextra-focus _text-sm contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 max-md:_hidden _whitespace-nowrap _ring-inset _text-gray-600 hover:_text-gray-800 dark:_text-gray-400 dark:hover:_text-gray-200" aria-current="false" href="/sponsors">Sponsors</a></div><div class="_not-prose _relative _flex _items-center _text-gray-900 dark:_text-gray-300 contrast-more:_text-gray-800 contrast-more:dark:_text-gray-300 max-md:_hidden"><input spellcheck="false" class="_rounded-lg _px-3 _py-2 _transition-colors _w-full md:_w-64 _text-base _leading-tight md:_text-sm _bg-black/[.05] dark:_bg-gray-50/10 placeholder:_text-gray-500 dark:placeholder:_text-gray-400 contrast-more:_border contrast-more:_border-current [&::-webkit-search-cancel-button]:_appearance-none" autoComplete="off" placeholder="Search documentation…" id="headlessui-combobox-input-:R1dn96:" role="combobox" type="search" aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" value=""/></div><a class="nextra-focus" href="https://github.com/shuding/nextra" target="_blank" rel="noreferrer"><svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg><span class="_sr-only">GitHub</span></a><button class="_transition nextra-hamburger _rounded md:_hidden" aria-label="Menu" type="button" data-headlessui-state=""><svg fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" class=""><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16"></path></g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16"></path><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18h16"></path></g></svg></button></nav></div><div class="_mx-auto _flex _max-w-[90rem]"><div class="[transition:background-color_1.5s_ease] _bg-transparent"></div><aside class="nextra-sidebar-container _flex _flex-col md:_top-16 md:_shrink-0 motion-reduce:_transform-none motion-reduce:_transition-none [.resizing_&]:_transition-none _transform-gpu _transition-all _ease-in-out print:_hidden md:_w-64 md:_sticky md:_self-start max-md:[transform:translate3d(0,-100%,0)]"><div class="_px-4 _pt-4 md:_hidden"><div class="_not-prose _relative _flex _items-center _text-gray-900 dark:_text-gray-300 contrast-more:_text-gray-800 contrast-more:dark:_text-gray-300"><input spellcheck="false" class="_rounded-lg _px-3 _py-2 _transition-colors _w-full md:_w-64 _text-base _leading-tight md:_text-sm _bg-black/[.05] dark:_bg-gray-50/10 placeholder:_text-gray-500 dark:placeholder:_text-gray-400 contrast-more:_border contrast-more:_border-current [&::-webkit-search-cancel-button]:_appearance-none" autoComplete="off" placeholder="Search documentation…" id="headlessui-combobox-input-:R5msr6:" role="combobox" type="search" aria-expanded="false" aria-autocomplete="list" data-headlessui-state="" value=""/></div></div><div class="_overflow-y-auto _p-4 _grow md:_h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] nextra-scrollbar"><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 nextra-menu-desktop max-md:_hidden"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs">Introduction</a></li><li class="open"><a class="nextra-focus _items-center _justify-between _gap-2 _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide">Guide<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180 *:ltr:_rotate-90 *:rtl:_rotate-[-270deg]"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-100" style="transition-duration:500ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1 active"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _bg-primary-100 _font-semibold _text-primary-800 dark:_bg-primary-400/10 dark:_text-primary-600 contrast-more:_border-primary-500 contrast-more:dark:_border-primary-500" href="/docs/guide/organize-files">Organize Files</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/markdown">Markdown</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/syntax-highlighting">Syntax Highlighting</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/link">Next.js Link</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/image">Next.js Image</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/ssg">Next.js SSG</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/i18n">Next.js I18n</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/custom-css">Custom CSS</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/static-exports">Static Exports</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/search">Search</a></li><li class=""><a class="nextra-focus _items-center _justify-between _gap-2 _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/built-ins">Built-in Components<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/built-ins/callout">Callout</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/built-ins/cards">Cards</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/built-ins/filetree">FileTree</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/built-ins/steps">Steps</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/built-ins/table">Table</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/built-ins/tabs">Tabs</a></li></ul></div></div></li><li class=""><a class="nextra-focus _items-center _justify-between _gap-2 _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced">Advanced<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/npm2yarn">Npm2Yarn</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/mermaid">Mermaid</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/tailwind-css">Tailwind CSS</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/latex">LaTeX</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/table">Rendering Tables</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/typescript">TypeScript</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/remote">Remote Content</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/playground">Playground</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/customize-the-cascade-layers">Customize the Cascade Layers</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/guide/advanced/twoslash-support">Twoslash Support</a></li></ul></div></div></li></ul></div></div></li><li class="[word-break:break-word] [&:not(:first-child)]:_mt-5 _mb-2 _px-2 _py-1.5 _text-sm _font-semibold _text-gray-900 dark:_text-gray-100">Themes</li><li class=""><a class="nextra-focus _items-center _justify-between _gap-2 _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/docs-theme">Docs Theme<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/docs-theme/start">Get Started</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/docs-theme/page-configuration">Page Configuration</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/docs-theme/theme-configuration">Theme Configuration</a></li><li class=""><a class="nextra-focus _items-center _justify-between _gap-2 _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/docs-theme/built-ins">Built-in Components<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/docs-theme/built-ins/bleed">Bleed</a></li></ul></div></div></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/docs-theme/api">API</a></li></ul></div></div></li><li class=""><a class="nextra-focus _items-center _justify-between _gap-2 _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/blog-theme">Blog Theme<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="18" class="_shrink-0 _rounded-sm _p-0.5 hover:_bg-gray-800/5 dark:hover:_bg-gray-100/5 motion-reduce:*:_transition-none *:_origin-center *:_transition-transform *:rtl:_-rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a><div class="_transform-gpu _transition-all _ease-in-out motion-reduce:_transition-none _opacity-0 _overflow-hidden" style="height:0;transition-duration:300ms"><div><ul class="_flex _flex-col _gap-1 _relative before:_absolute before:_inset-y-1 before:_w-px before:_bg-gray-200 before:_content-[""] dark:before:_bg-neutral-800 ltr:_pl-3 ltr:before:_left-0 rtl:_pr-3 rtl:before:_right-0 _pt-1 ltr:_ml-3 rtl:_mr-3"><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/blog-theme/start">Get Started</a></li></ul></div></div></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/docs/custom-theme">Custom Theme</a></li><li class="[word-break:break-word] [&:not(:first-child)]:_mt-5 _mb-2 _px-2 _py-1.5 _text-sm _font-semibold _text-gray-900 dark:_text-gray-100">More</li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="/about">About Nextra</a></li><li class="_flex _flex-col _gap-1"><a class="nextra-focus _flex _rounded _px-2 _py-1.5 _text-sm _transition-colors [word-break:break-word] _cursor-pointer contrast-more:_border _text-gray-500 hover:_bg-gray-100 hover:_text-gray-900 dark:_text-neutral-400 dark:hover:_bg-primary-100/5 dark:hover:_text-gray-50 contrast-more:_text-gray-900 contrast-more:dark:_text-gray-50 contrast-more:_border-transparent contrast-more:hover:_border-gray-900 contrast-more:dark:hover:_border-gray-50" href="https://nextjs.org?utm_source=nextra.site&utm_medium=referral&utm_campaign=sidebar" target="_blank" rel="noreferrer">Next.js Docs ↗</a></li></ul></div></div></div><div class="nextra-sidebar-footer _sticky _bottom-0 _flex _items-center _gap-2 _py-4 _mx-3 _px-1" data-toggle-animation="off"><div class="_grow _flex _flex-col"><button title="Change theme" class="_h-7 _rounded-md _px-2 _text-xs _font-medium _transition-colors _text-gray-600 dark:_text-gray-400" id="headlessui-listbox-button-:R6tsr6:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="_flex _items-center _gap-2 _capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">Light</span></div></button></div><button class="_transition max-md:_hidden _rounded-md _p-2 _text-gray-600 dark:_text-gray-400" title="Hide sidebar" type="button" data-headlessui-state=""><svg viewBox="0 0 16 16" fill="currentColor" height="12" class=""><path d="M4.177 7.823l2.396-2.396A.25.25 0 017 5.604v4.792a.25.25 0 01-.427.177L4.177 8.177a.25.25 0 010-.354z"></path><path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25H9.5v-13H1.75zm12.5 13H11v-13h3.25a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25z"></path></svg></button></div></aside><nav class="nextra-toc _order-last max-xl:_hidden _w-64 _shrink-0 print:_hidden" aria-label="table of contents"><div class="_grid _grid-rows-[min-content_1fr_min-content] _sticky _top-[--nextra-navbar-height] _pt-6 _text-sm _max-h-[calc(100vh-var(--nextra-navbar-height))]"><p class="_mx-4 _font-semibold _tracking-tight _pb-2 _shadow-[0_12px_16px_rgb(var(--nextra-bg))] contrast-more:_shadow-none _z-[1]">On This Page</p><ul class="_px-4 nextra-scrollbar _overscroll-y-contain _overflow-y-auto _hyphens-auto _py-1.5"><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#default-behavior" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Default Behavior</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#_metajs" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words"><code class="nextra-code" dir="ltr">_meta.js</code></a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#allowed-extensions" class="nextra-focus _ms-4 _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Allowed Extensions</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#sorting-pages-alphabetically" class="nextra-focus _ms-4 _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Sorting Pages Alphabetically</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#usage-with-next-sitemap" class="nextra-focus _ms-4 _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Usage with <code class="nextra-code" dir="ltr">next-sitemap</code></a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#allowed-keys-values" class="nextra-focus _ms-4 _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Allowed Keys Values</a></li><li class="_my-2 _scroll-my-6 _scroll-py-6"><a href="#example" class="nextra-focus _font-semibold _block _transition-colors _subpixel-antialiased _text-gray-500 hover:_text-gray-900 dark:_text-gray-400 dark:hover:_text-gray-300 contrast-more:_text-gray-900 contrast-more:_underline contrast-more:dark:_text-gray-50 _break-words">Example</a></li></ul><div class="nextra-toc-footer _pt-4 _flex _flex-col _items-start _gap-2 _pb-4 _mx-4"><a class="nextra-focus _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" href="https://github.com/shuding/nextra/issues/new?title=Feedback%20for%20%E2%80%9COrganize%20Files%E2%80%9D&labels=feedback" target="_blank" rel="noreferrer">Question? Give us feedback →</a><a class="nextra-focus _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" href="https://github.com/shuding/nextra/tree/main/docs/pages/docs/guide/organize-files.mdx">Edit this page on GitHub →</a><button class="_transition _flex _items-center _gap-1.5 _whitespace-nowrap _opacity-0 _text-xs _font-medium _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100" aria-hidden="true" type="button" disabled="" data-headlessui-state="disabled" data-disabled="">Scroll to top<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="16" class="_-rotate-90 _border _rounded-full _border-current"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div></nav><div id="reach-skip-nav"></div><article class="_w-full _break-words nextra-content _flex _min-h-[calc(100vh-var(--nextra-navbar-height))] _min-w-0 _justify-center _pb-8 _pr-[calc(env(safe-area-inset-right)-1.5rem)]"><main class="_w-full _min-w-0 _max-w-6xl _px-6 _pt-4 md:_px-12"><div class="nextra-breadcrumb _mt-1.5 _flex _items-center _gap-1 _overflow-hidden _text-sm _text-gray-500 dark:_text-gray-400 contrast-more:_text-current"><a class="_whitespace-nowrap _transition-colors _min-w-6 _overflow-hidden _text-ellipsis nextra-focus _ring-inset hover:_text-gray-900 dark:hover:_text-gray-100" title="Documentation" href="/docs">Documentation</a><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="_shrink-0 rtl:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><a class="_whitespace-nowrap _transition-colors _min-w-6 _overflow-hidden _text-ellipsis nextra-focus _ring-inset hover:_text-gray-900 dark:hover:_text-gray-100" title="Guide" href="/docs/guide">Guide</a><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" height="14" class="_shrink-0 rtl:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="_whitespace-nowrap _transition-colors _font-medium _text-gray-700 contrast-more:_font-bold contrast-more:_text-current dark:_text-gray-100 contrast-more:dark:_text-current" title="Organize Files">Organize Files</span></div><h1 class="_mt-2 _text-4xl _font-bold _tracking-tight _text-slate-900 dark:_text-slate-100">Organize Files</h1> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Nextra first collects all your Markdown files and configurations from the <code class="nextra-code" dir="ltr">pages</code> directory, and then generates the “page map information” of your entire site, to render things such as the <em>navigation bar</em> and <em>sidebar</em> below:</p> <br/> <figure><img alt="Example of Nextra Theme Docs" loading="lazy" width="1671" height="1034" decoding="async" data-nimg="1" style="color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='none' style='filter: url(%23b);' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAMFBMVEXx8fKFhXnZ2dg2Nzzw8PALDxT4+Pg1NTrl5eULDhMLDRENERb7+/vz8/P4+Pj9/f5BjjzDAAAADnRSTlP7BTb+kcSRyB7ThYaQkVgn3wEAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAtSURBVHicHcGBDQAgCAOwwQBBDfz/rYktZJd7HYEsklwCxafQ6e4ZRYaZxc0HEasA41NgB3UAAAAASUVORK5CYII='/%3E%3C/svg%3E")" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frouting%401x.d02ee37d.png&w=1920&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frouting%401x.d02ee37d.png&w=3840&q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Frouting%401x.d02ee37d.png&w=3840&q=75"/><figcaption><p class="[&:not(:first-child)]:_mt-6 _leading-7">Example: <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="/docs/docs-theme">Nextra Docs Theme</a> has sidebar and navbar generated automatically from Markdown files.</p></figcaption></figure> <h2 id="default-behavior" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Default Behavior<a href="#default-behavior" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="[&:not(:first-child)]:_mt-6 _leading-7">By default, the page map contains all <code class="nextra-code" dir="ltr">.md</code> and <code class="nextra-code" dir="ltr">.mdx</code> filenames and the directory structure, sorted alphabetically. Then, Nextra will use the <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://github.com/vercel/title" target="_blank" rel="noreferrer">title</a> package to get formatted page names from filenames.</p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">For example if you have the following structure:</p> <div class="nextra-filetree _mt-6 _select-none _text-sm _text-gray-800 dark:_text-gray-300 _not-prose"><ul class="_inline-block _rounded-lg _border _px-4 _py-2 _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400"><li class="_flex _list-none _flex-col"><button class="_transition _inline-flex _items-center _py-1" title="pages" type="button" data-headlessui-state=""><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h4a2 2 0 0 1 2 2v1M5 19h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">pages</span></button><ul><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">contact.md</span></span></li><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">index.mdx</span></span></li><li class="_flex _list-none _flex-col"><button class="_transition _inline-flex _items-center _py-1" title="about" type="button" data-headlessui-state=""><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h4a2 2 0 0 1 2 2v1M5 19h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">about</span></button><ul><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">legal.md</span></span></li><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">index.mdx</span></span></li></ul></li></ul></li></ul></div> <p class="[&:not(:first-child)]:_mt-6 _leading-7">The resolved page map will be (note that all names were sorted alphabetically):</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">[</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> "name"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"About"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> "children"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: [{ </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">"name"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Index"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }, { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">"name"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Legal"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }]</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">"name"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Contact"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">"name"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Index"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-2"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div></div> <p class="[&:not(:first-child)]:_mt-6 _leading-7">And the global page map will be imported to each page by Nextra. Then, configured theme will render the actual UI with that page map.</p> <h2 id="_metajs" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400"><code class="nextra-code" dir="ltr">_meta.js</code><a href="#_metajs" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="[&:not(:first-child)]:_mt-6 _leading-7">It’s very common to customize each page’s title, rather than just relying on filenames. Having a page titled “Index” lacks clarity. It is preferable to assign a meaningful title that accurately represents the content, such as “Home”.</p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">That’s where <code class="nextra-code" dir="ltr">_meta.js</code> files comes in. You can have an <code class="nextra-code" dir="ltr">_meta.js</code> file in each directory, and it will be used to override the default configuration of each page:</p> <div class="nextra-filetree _mt-6 _select-none _text-sm _text-gray-800 dark:_text-gray-300 _not-prose"><ul class="_inline-block _rounded-lg _border _px-4 _py-2 _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400"><li class="_flex _list-none _flex-col"><button class="_transition _inline-flex _items-center _py-1" title="pages" type="button" data-headlessui-state=""><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h4a2 2 0 0 1 2 2v1M5 19h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">pages</span></button><ul><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">_meta.js</span></span></li><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">contact.md</span></span></li><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">index.mdx</span></span></li><li class="_flex _list-none _flex-col"><button class="_transition _inline-flex _items-center _py-1" title="about" type="button" data-headlessui-state=""><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4l2 2h4a2 2 0 0 1 2 2v1M5 19h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">about</span></button><ul><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">_meta.js</span></span></li><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">legal.md</span></span></li><li class="_flex _list-none"><span class="_inline-flex _cursor-default _items-center _py-1"><span class="_w-5 _shrink-0"></span><span class="_w-5 _shrink-0"></span><svg width="1em" height="1em" viewBox="0 0 24 24" class="_shrink-0"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 0 1 .707.293l5.414 5.414a1 1 0 0 1 .293.707V19a2 2 0 0 1-2 2Z"></path></svg><span class="_ml-1">index.mdx</span></span></li></ul></li></ul></li></ul></div> <h3 id="allowed-extensions" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl">Allowed Extensions<a href="#allowed-extensions" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">It’s possible to use the <code class="nextra-code" dir="ltr">.jsx</code>, <code class="nextra-code" dir="ltr">.ts</code> and <code class="nextra-code" dir="ltr">.tsx</code> extensions for <code class="nextra-code" dir="ltr">_meta</code> files as well (e.g. <code class="nextra-code" dir="ltr">_meta.ts</code>).</p> <h3 id="sorting-pages-alphabetically" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl">Sorting Pages Alphabetically<a href="#sorting-pages-alphabetically" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">You can use ESLint’s built-in <code class="nextra-code" dir="ltr">sort-keys</code> rule, append <code class="nextra-code" dir="ltr">/* eslint sort-keys: error */</code> comment at the top of your <code class="nextra-code" dir="ltr">_meta</code> file, and you will receive ESLint’s errors about incorrect order.</p> <h3 id="usage-with-next-sitemap" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl">Usage with <code class="nextra-code" dir="ltr">next-sitemap</code><a href="#usage-with-next-sitemap" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">If you are using <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://github.com/iamvishnusankar/next-sitemap" target="_blank" rel="noreferrer">next-sitemap</a>, you will probably need to add <code class="nextra-code" dir="ltr"><span data-line=""><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">exclude</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'*/_meta'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">]</span></span></code> to your <code class="nextra-code" dir="ltr">next-sitemap.config.js</code> file, as it is <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://github.com/vercel/next.js/issues/8974#issuecomment-542525837" target="_blank" rel="noreferrer">tricky to exclude <code class="nextra-code" dir="ltr">_meta</code> files from the build</a>.</p> <h3 id="allowed-keys-values" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-8 _text-2xl">Allowed Keys Values<a href="#allowed-keys-values" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h3> <p class="[&:not(:first-child)]:_mt-6 _leading-7">The type of your <code class="nextra-code" dir="ltr">_meta</code> keys should be always <code class="nextra-code" dir="ltr">string</code> and not <code class="nextra-code" dir="ltr">number</code> since <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://dev.to/frehner/the-order-of-js-object-keys-458d" target="_blank" rel="noreferrer">numbers are always ordered first</a> for JavaScript objects.</p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Following:</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><svg viewBox="0 0 24 24" fill="currentColor" class="_h-4 _w-auto _max-w-6 _shrink-0"><path d="M21.8182 0H2.18182C0.976364 0 0 0.976364 0 2.18182V21.8182C0 23.0236 0.976364 24 2.18182 24H21.8182C23.0236 24 24 23.0236 24 21.8182V2.18182C24 0.976364 23.0236 0 21.8182 0ZM12 17.8691C12 19.8076 10.8109 20.8942 8.83636 20.8942C6.88582 20.8942 5.64327 19.7542 5.64327 17.9105H7.75636C7.76182 18.5945 8.16982 19.0265 8.80036 19.0265C9.44836 19.0265 9.79636 18.6185 9.79636 17.8505V11.9978H12V17.8691ZM17.9793 20.8942C15.7876 20.8942 14.4087 19.8622 14.3716 18.1931H16.4727C16.5262 18.8236 17.1556 19.2251 18.0687 19.2251C18.8913 19.2251 19.4564 18.8291 19.4564 18.2585C19.4564 17.7785 19.0778 17.52 18.0873 17.3225L16.9473 17.0945C15.3622 16.7945 14.5462 15.9305 14.5462 14.568C14.5462 12.8749 15.9033 11.7644 17.9913 11.7644C20.0204 11.7644 21.4244 12.8629 21.4604 14.4655H19.4258C19.3778 13.8535 18.7953 13.4269 18.0196 13.4269C17.2462 13.4269 16.7367 13.7935 16.7367 14.3695C16.7367 14.844 17.1207 15.12 18.0327 15.3L19.1476 15.516C20.8593 15.8465 21.6273 16.62 21.6273 17.9945C21.6284 19.8022 20.2484 20.8942 17.9793 20.8942Z"></path></svg><span class="_truncate">pages/_meta.js</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> foo: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 1992_10_21</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">''</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Will be converted to:</p>  <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><svg viewBox="0 0 24 24" fill="currentColor" class="_h-4 _w-auto _max-w-6 _shrink-0"><path d="M21.8182 0H2.18182C0.976364 0 0 0.976364 0 2.18182V21.8182C0 23.0236 0.976364 24 2.18182 24H21.8182C23.0236 24 24 23.0236 24 21.8182V2.18182C24 0.976364 23.0236 0 21.8182 0ZM12 17.8691C12 19.8076 10.8109 20.8942 8.83636 20.8942C6.88582 20.8942 5.64327 19.7542 5.64327 17.9105H7.75636C7.76182 18.5945 8.16982 19.0265 8.80036 19.0265C9.44836 19.0265 9.79636 18.6185 9.79636 17.8505V11.9978H12V17.8691ZM17.9793 20.8942C15.7876 20.8942 14.4087 19.8622 14.3716 18.1931H16.4727C16.5262 18.8236 17.1556 19.2251 18.0687 19.2251C18.8913 19.2251 19.4564 18.8291 19.4564 18.2585C19.4564 17.7785 19.0778 17.52 18.0873 17.3225L16.9473 17.0945C15.3622 16.7945 14.5462 15.9305 14.5462 14.568C14.5462 12.8749 15.9033 11.7644 17.9913 11.7644C20.0204 11.7644 21.4244 12.8629 21.4604 14.4655H19.4258C19.3778 13.8535 18.7953 13.4269 18.0196 13.4269C17.2462 13.4269 16.7367 13.7935 16.7367 14.3695C16.7367 14.844 17.1207 15.12 18.0327 15.3L19.1476 15.516C20.8593 15.8465 21.6273 16.62 21.6273 17.9945C21.6284 19.8022 20.2484 20.8942 17.9793 20.8942Z"></path></svg><span class="_truncate">pages/_meta.js</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> '19921021'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> foo: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">''</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <h2 id="example" class="_font-semibold _tracking-tight _text-slate-900 dark:_text-slate-100 _mt-10 _border-b _pb-1 _text-3xl _border-neutral-200/70 contrast-more:_border-neutral-400 dark:_border-primary-100/10 contrast-more:dark:_border-neutral-400">Example<a href="#example" class="nextra-focus subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Put this in your <code class="nextra-code" dir="ltr">pages/_meta.js</code> file:</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><svg viewBox="0 0 24 24" fill="currentColor" class="_h-4 _w-auto _max-w-6 _shrink-0"><path d="M21.8182 0H2.18182C0.976364 0 0 0.976364 0 2.18182V21.8182C0 23.0236 0.976364 24 2.18182 24H21.8182C23.0236 24 24 23.0236 24 21.8182V2.18182C24 0.976364 23.0236 0 21.8182 0ZM12 17.8691C12 19.8076 10.8109 20.8942 8.83636 20.8942C6.88582 20.8942 5.64327 19.7542 5.64327 17.9105H7.75636C7.76182 18.5945 8.16982 19.0265 8.80036 19.0265C9.44836 19.0265 9.79636 18.6185 9.79636 17.8505V11.9978H12V17.8691ZM17.9793 20.8942C15.7876 20.8942 14.4087 19.8622 14.3716 18.1931H16.4727C16.5262 18.8236 17.1556 19.2251 18.0687 19.2251C18.8913 19.2251 19.4564 18.8291 19.4564 18.2585C19.4564 17.7785 19.0778 17.52 18.0873 17.3225L16.9473 17.0945C15.3622 16.7945 14.5462 15.9305 14.5462 14.568C14.5462 12.8749 15.9033 11.7644 17.9913 11.7644C20.0204 11.7644 21.4244 12.8629 21.4604 14.4655H19.4258C19.3778 13.8535 18.7953 13.4269 18.0196 13.4269C17.2462 13.4269 16.7367 13.7935 16.7367 14.3695C16.7367 14.844 17.1207 15.12 18.0327 15.3L19.1476 15.516C20.8593 15.8465 21.6273 16.62 21.6273 17.9945C21.6284 19.8022 20.2484 20.8942 17.9793 20.8942Z"></path></svg><span class="_truncate">pages/_meta.js</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> index: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'My Homepage'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> contact: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Contact Us'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> about: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'About Us'</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <p class="[&:not(:first-child)]:_mt-6 _leading-7">It tells Nextra the order of each page, and the correct title.</p> <p class="[&:not(:first-child)]:_mt-6 _leading-7">Alternatively, you can do it with <code class="nextra-code" dir="ltr">title</code> property and have other configurations in there as well:</p> <div class="nextra-code _relative [&:not(:first-child)]:_mt-6"><div class="_px-4 _text-xs _text-gray-700 dark:_text-gray-200 _bg-gray-100 dark:_bg-neutral-900 _flex _items-center _h-12 _gap-2 _rounded-t-md _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _border-b-0"><svg viewBox="0 0 24 24" fill="currentColor" class="_h-4 _w-auto _max-w-6 _shrink-0"><path d="M21.8182 0H2.18182C0.976364 0 0 0.976364 0 2.18182V21.8182C0 23.0236 0.976364 24 2.18182 24H21.8182C23.0236 24 24 23.0236 24 21.8182V2.18182C24 0.976364 23.0236 0 21.8182 0ZM12 17.8691C12 19.8076 10.8109 20.8942 8.83636 20.8942C6.88582 20.8942 5.64327 19.7542 5.64327 17.9105H7.75636C7.76182 18.5945 8.16982 19.0265 8.80036 19.0265C9.44836 19.0265 9.79636 18.6185 9.79636 17.8505V11.9978H12V17.8691ZM17.9793 20.8942C15.7876 20.8942 14.4087 19.8622 14.3716 18.1931H16.4727C16.5262 18.8236 17.1556 19.2251 18.0687 19.2251C18.8913 19.2251 19.4564 18.8291 19.4564 18.2585C19.4564 17.7785 19.0778 17.52 18.0873 17.3225L16.9473 17.0945C15.3622 16.7945 14.5462 15.9305 14.5462 14.568C14.5462 12.8749 15.9033 11.7644 17.9913 11.7644C20.0204 11.7644 21.4244 12.8629 21.4604 14.4655H19.4258C19.3778 13.8535 18.7953 13.4269 18.0196 13.4269C17.2462 13.4269 16.7367 13.7935 16.7367 14.3695C16.7367 14.844 17.1207 15.12 18.0327 15.3L19.1476 15.516C20.8593 15.8465 21.6273 16.62 21.6273 17.9945C21.6284 19.8022 20.2484 20.8942 17.9793 20.8942Z"></path></svg><span class="_truncate">pages/_meta.js</span><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 _ml-auto" title="Copy code" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" height="16" class="nextra-copy-icon"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"></path></svg></button></div><pre class="nextra-focus _overflow-x-auto _subpixel-antialiased _text-[.9em] _bg-white dark:_bg-black _py-4 _ring-1 _ring-inset _ring-gray-300 dark:_ring-neutral-700 contrast-more:_ring-gray-900 contrast-more:dark:_ring-gray-50 contrast-more:_contrast-150 _rounded-b-md" tabindex="0"><code class="nextra-code" dir="ltr"><span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> index: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'My Homepage'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> contact: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Contact Us'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> about: {</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'About Us'</span></span> <span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D"> // ... extra configurations</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> }</span></span> <span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre><div class="_opacity-0 _transition [div:hover>&]:_opacity-100 focus-within:_opacity-100 _flex _gap-1 _absolute _right-4 _top-14"><button class="_transition _border _border-gray-300 dark:_border-neutral-700 contrast-more:_border-gray-900 contrast-more:dark:_border-gray-50 _rounded-md _p-1.5 md:_hidden" title="Toggle word wrap" type="button" data-headlessui-state=""><svg viewBox="0 0 24 24" fill="currentColor" height="16"><path d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button></div></div> <p class="[&:not(:first-child)]:_mt-6 _leading-7">The extra configurations are passed to the <strong>theme</strong> as additional information. Check the corresponding pages for more information:</p> <div class="nextra-cards _mt-4 _gap-4 _grid _not-prose" style="--rows:3"><a class="nextra-focus nextra-card _group _flex _flex-col _justify-start _overflow-hidden _rounded-lg _border _border-gray-200 _text-current _no-underline dark:_shadow-none hover:_shadow-gray-100 dark:hover:_shadow-none _shadow-gray-100 active:_shadow-sm active:_shadow-gray-200 _transition-all _duration-200 hover:_border-gray-300 _bg-transparent _shadow-sm dark:_border-neutral-800 hover:_bg-slate-50 hover:_shadow-md dark:hover:_border-neutral-700 dark:hover:_bg-neutral-900" href="/docs/docs-theme/page-configuration"><span class="_flex _font-semibold _items-center _gap-2 _p-4 _text-gray-700 hover:_text-gray-900 after:_content-["→"] after:_transition-transform after:_duration-75 after:group-hover:_translate-x-0.5 dark:_text-neutral-200 dark:hover:_text-neutral-50"><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6z"></path></svg>Docs Theme</span></a><a class="nextra-focus nextra-card _group _flex _flex-col _justify-start _overflow-hidden _rounded-lg _border _border-gray-200 _text-current _no-underline dark:_shadow-none hover:_shadow-gray-100 dark:hover:_shadow-none _shadow-gray-100 active:_shadow-sm active:_shadow-gray-200 _transition-all _duration-200 hover:_border-gray-300 _bg-transparent _shadow-sm dark:_border-neutral-800 hover:_bg-slate-50 hover:_shadow-md dark:hover:_border-neutral-700 dark:hover:_bg-neutral-900" href="/docs/blog-theme/start"><span class="_flex _font-semibold _items-center _gap-2 _p-4 _text-gray-700 hover:_text-gray-900 after:_content-["→"] after:_transition-transform after:_duration-75 after:group-hover:_translate-x-0.5 dark:_text-neutral-200 dark:hover:_text-neutral-50"><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"></path></svg>Blog Theme</span></a><a class="nextra-focus nextra-card _group _flex _flex-col _justify-start _overflow-hidden _rounded-lg _border _border-gray-200 _text-current _no-underline dark:_shadow-none hover:_shadow-gray-100 dark:hover:_shadow-none _shadow-gray-100 active:_shadow-sm active:_shadow-gray-200 _transition-all _duration-200 hover:_border-gray-300 _bg-transparent _shadow-sm dark:_border-neutral-800 hover:_bg-slate-50 hover:_shadow-md dark:hover:_border-neutral-700 dark:hover:_bg-neutral-900" href="/docs/custom-theme"><span class="_flex _font-semibold _items-center _gap-2 _p-4 _text-gray-700 hover:_text-gray-900 after:_content-["→"] after:_transition-transform after:_duration-75 after:group-hover:_translate-x-0.5 dark:_text-neutral-200 dark:hover:_text-neutral-50">Custom Theme</span></a></div><div class="_mt-16"></div><div class="_mb-8 _flex _items-center _border-t _pt-8 dark:_border-neutral-800 contrast-more:_border-neutral-400 dark:contrast-more:_border-neutral-400 print:_hidden"><a title="Guide" class="nextra-focus _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 _flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg ltr:_pr-4 rtl:_pl-4" href="/docs/guide"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="_inline _h-5 _shrink-0 ltr:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg>Guide</a><a title="Markdown" class="nextra-focus _text-gray-600 dark:_text-gray-400 hover:_text-gray-800 dark:hover:_text-gray-200 contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100 _flex _max-w-[50%] _items-center _gap-1 _py-4 _text-base _font-medium _transition-colors [word-break:break-word] md:_text-lg ltr:_ml-auto ltr:_pl-4 ltr:_text-right rtl:_mr-auto rtl:_pr-4 rtl:_text-left" href="/docs/guide/markdown">Markdown<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="_inline _h-5 _shrink-0 rtl:_rotate-180"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div></main></article></div><footer class="_bg-gray-100 _pb-[env(safe-area-inset-bottom)] dark:_bg-neutral-900 print:_bg-transparent"><div class="_mx-auto _flex _max-w-[90rem] _gap-2 _py-2 _px-4 _hidden"><button title="Change theme" class="_h-7 _rounded-md _px-2 _text-xs _font-medium _transition-colors _text-gray-600 dark:_text-gray-400" id="headlessui-listbox-button-:R6st6:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="_flex _items-center _gap-2 _capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">Light</span></div></button></div><hr class="dark:_border-neutral-800"/><div class="_mx-auto _flex _max-w-[90rem] _justify-center _py-12 _text-gray-600 dark:_text-gray-400 md:_justify-start _pl-[max(env(safe-area-inset-left),1.5rem)] _pr-[max(env(safe-area-inset-right),1.5rem)]"><div class="flex w-full flex-col items-center sm:items-start"><div><a class="nextra-focus flex items-center gap-1 text-current" target="_blank" rel="noreferrer" title="vercel.com homepage" href="https://vercel.com?utm_source=nextra.site"><span>Powered by</span><svg height="20" viewBox="0 0 283 64" fill="none"><title>Vercel</title><path fill="currentColor" 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"></path></svg></a></div><p class="mt-6 text-xs">© 2024 The Nextra Project.</p></div></div></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/docs/guide/organize-files","query":{},"buildId":"02EuseZYwilZi1jMNhUd6","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>