[{"id":"44f79273-0716-483d-9731-c624c8955c77","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Overview","styles":{}}],"children":[]},{"id":"54ccd6fc-8da4-420d-89cc-cd43c5971912","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Next.js uses ","styles":{"textColor":"rgb(237, 237, 237)","backgroundColor":"rgb(0, 0, 0)"}},{"type":"text","text":"file-system based routing","styles":{"bold":true}},{"type":"text","text":", meaning you can use folders and files to define routes. This page will guide you through how to create layouts and pages, and link between them.","styles":{"textColor":"rgb(237, 237, 237)","backgroundColor":"rgb(0, 0, 0)"}}],"children":[]},{"id":"3b1da84c-6f15-4a19-9430-b80fcfc32d7a","type":"divider","props":{},"children":[]},{"id":"380b9227-281b-401d-be55-4c41a3ef3260","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Next.js uses ","styles":{}},{"type":"text","text":"file-system based routing","styles":{"bold":true}},{"type":"text","text":", meaning you can use folders and files to define routes. This page will guide you through how to create layouts and pages, and link between them.","styles":{}}],"children":[]},{"id":"82d7c524-5467-4eb0-bff5-f49ac171a7ac","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Creating a page","styles":{}}],"children":[]},{"id":"756856aa-5888-426f-8c79-93fc8a77f481","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"87b28756-ca7f-4bc1-ae05-230ec1cc0d72","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"page.js special file","url":"https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/docs/light/page-special-file.png","caption":"","showPreview":true,"previewWidth":655},"children":[]},{"id":"56bbfb2a-6b7b-4a97-916a-fa41048c0684","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1c470dc3-4d56-41c8-bcec-0bbb645d6a4a","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"1ja53hbz3\",\"name\":\"app/page.tsx\",\"code\":\"export default function Page() {\\n return

Hello Next.js!

\\n}\",\"language\":\"typescript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0944e151-bc8a-4852-9461-c06cb2abe96b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Creating a layout","styles":{}}],"children":[]},{"id":"4a62baf9-5cc9-4bfc-a280-07e78be2098e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A layout is UI that is ","styles":{}},{"type":"text","text":"shared","styles":{"bold":true}},{"type":"text","text":" between multiple pages. On navigation, layouts preserve state, remain interactive, and do not rerender.","styles":{}}],"children":[]},{"id":"001cdde9-85d6-48c3-abbc-7260cba6f96b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"You can define a layout by default exporting a React component from a ","styles":{}},{"type":"text","text":"layout","styles":{"code":true}},{"type":"link","href":"/docs/app/api-reference/file-conventions/layout","content":[{"type":"text","text":" file","styles":{}}]},{"type":"text","text":". The component should accept a ","styles":{}},{"type":"text","text":"children","styles":{"code":true}},{"type":"text","text":" prop which can be a page or another ","styles":{}},{"type":"link","href":"#nesting-layouts","content":[{"type":"text","text":"layout","styles":{}}]},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"5efaa3ea-e937-4e1b-9aa5-135d0b171a55","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For example, to create a layout that accepts your index page as child, add a ","styles":{}},{"type":"text","text":"layout","styles":{"code":true}},{"type":"text","text":" file inside the ","styles":{}},{"type":"text","text":"app","styles":{"code":true}},{"type":"text","text":" directory:","styles":{}}],"children":[]},{"id":"d80ea598-8e88-4d7a-98b7-9906a5ed6874","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"layout.js special file","url":"https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/docs/light/layout-special-file.png","caption":"","showPreview":true,"previewWidth":614},"children":[]},{"id":"92d152e2-660d-42ad-b2a8-1a43a4e20a96","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"218af32b-dcc9-4ce5-8377-701194bdedbe","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"6kxwn94yz\",\"name\":\"app/layout.tsx\",\"code\":\"export default function DashboardLayout({\\n children,\\n}: {\\n children: React.ReactNode\\n}) {\\n return (\\n \\n \\n {/* Layout UI */}\\n {/* Place children where you want to render a page or nested layout */}\\n

{children}

\\n \\n \\n )\\n}\",\"language\":\"typescript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2303aa99-9922-44da-a5fc-dc28e59eb621","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The layout above is called a ","styles":{}},{"type":"link","href":"/docs/app/api-reference/file-conventions/layout#root-layout","content":[{"type":"text","text":"root layout","styles":{}}]},{"type":"text","text":" because it's defined at the root of the ","styles":{}},{"type":"text","text":"app","styles":{"code":true}},{"type":"text","text":" directory. The root layout is ","styles":{}},{"type":"text","text":"required","styles":{"bold":true}},{"type":"text","text":" and must contain ","styles":{}},{"type":"text","text":"html","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"body","styles":{"code":true}},{"type":"text","text":" tags.","styles":{}}],"children":[]},{"id":"1c95369c-3379-405c-9fd1-7ec3d7a1c1f1","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Creating a nested route","styles":{}}],"children":[]},{"id":"caf6d2a9-c68d-443c-8b2d-6a88c2ddac83","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A nested route is a route composed of multiple URL segments. For example, the ","styles":{}},{"type":"text","text":"/blog/[slug]","styles":{"code":true}},{"type":"text","text":" route is composed of three segments:","styles":{}}],"children":[]},{"id":"d702ea0b-0a1d-4e15-88df-79412144c20e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"/","styles":{"code":true}},{"type":"text","text":" (Root Segment)","styles":{}}],"children":[]},{"id":"a195500f-ef6f-4452-8aec-634fa154ee84","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"blog","styles":{"code":true}},{"type":"text","text":" (Segment)","styles":{}}],"children":[]},{"id":"e7027886-9885-4e0a-93bf-29e322d206d0","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"[slug]","styles":{"code":true}},{"type":"text","text":" (Leaf Segment)","styles":{}}],"children":[]},{"id":"0ed30a3d-76c6-4cd7-8161-480802b91d92","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In Next.js:","styles":{}}],"children":[]},{"id":"343fc066-0d84-4613-b437-eccf51a2fb67","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Folders","styles":{"bold":true}},{"type":"text","text":" are used to define the route segments that map to URL segments.","styles":{}}],"children":[]},{"id":"defeeca2-33ce-41b2-8ff5-8a590f7a3933","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Files","styles":{"bold":true}},{"type":"text","text":" (like ","styles":{}},{"type":"text","text":"page","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"layout","styles":{"code":true}},{"type":"text","text":") are used to create UI that is shown for a segment.","styles":{}}],"children":[]},{"id":"95b270a9-f819-4a1a-8099-e9a561ebd201","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"To create nested routes, you can nest folders inside each other. For example, to add a route for ","styles":{}},{"type":"text","text":"/blog","styles":{"code":true}},{"type":"text","text":", create a folder called ","styles":{}},{"type":"text","text":"blog","styles":{"code":true}},{"type":"text","text":" in the ","styles":{}},{"type":"text","text":"app","styles":{"code":true}},{"type":"text","text":" directory. Then, to make ","styles":{}},{"type":"text","text":"/blog","styles":{"code":true}},{"type":"text","text":" publicly accessible, add a ","styles":{}},{"type":"text","text":"page.tsx","styles":{"code":true}},{"type":"text","text":" file:","styles":{}}],"children":[]},{"id":"188ce566-e548-489b-82e7-d156602c6004","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"File hierarchy showing blog folder and a page.js file","url":"https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/docs/light/blog-nested-route.png","caption":"","showPreview":true,"previewWidth":717},"children":[]},{"id":"a9b070a7-0ca8-4ef8-94f0-65b2a694a33c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"df28cbc6-5457-48a9-b3a1-44ce65832d45","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"f7gry6tpc\",\"name\":\"app/blog/page.tsx\",\"code\":\"// Dummy imports\\nimport { getPosts } from '@/lib/posts'\\nimport { Post } from '@/ui/post'\\n \\nexport default async function Page() {\\n const posts = await getPosts()\\n \\n return (\\n

\\n ))}\\n

\\n )\\n}\",\"language\":\"typescript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"80f0c6d0-7591-4bab-851b-e314a5455326","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"You can continue nesting folders to create nested routes. For example, to create a route for a specific blog post, create a new ","styles":{}},{"type":"text","text":"[slug]","styles":{"code":true}},{"type":"text","text":" folder inside ","styles":{}},{"type":"text","text":"blog","styles":{"code":true}},{"type":"text","text":" and add a ","styles":{}},{"type":"text","text":"page","styles":{"code":true}},{"type":"text","text":" file:","styles":{}}],"children":[]},{"id":"08986719-91cd-4c4b-9050-fb381d08278e","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"File hierarchy showing blog folder with a nested slug folder and a page.js file","url":"https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/docs/light/blog-post-nested-route.png","caption":"","showPreview":true,"previewWidth":592},"children":[]},{"id":"4df573af-259e-4328-8b14-5a293843fdea","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6bdbd13a-041e-4d99-930a-0e5a5e85cb11","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"934xpg5po\",\"name\":\"app/blog/[slug]/page.tsx\",\"code\":\"function generateStaticParams() {}\\n \\nexport default function Page() {\\n return

Hello, Blog Post Page!

\\n}\",\"language\":\"typescript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c7038608-8c91-42e6-a920-59f0157d9683","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Wrapping a folder name in square brackets (e.g. ","styles":{}},{"type":"text","text":"[slug]","styles":{"code":true}},{"type":"text","text":") creates a ","styles":{}},{"type":"link","href":"/docs/app/api-reference/file-conventions/dynamic-routes","content":[{"type":"text","text":"dynamic route segment","styles":{}}]},{"type":"text","text":" which is used to generate multiple pages from data. e.g. blog posts, product pages, etc.","styles":{}}],"children":[]},{"id":"7967093a-ed5a-48f6-b83e-e5ba21486f94","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Nesting layouts","styles":{}}],"children":[]},{"id":"3bad2441-1f93-4bb9-a213-3ff33659bba0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"By default, layouts in the folder hierarchy are also nested, which means they wrap child layouts via their ","styles":{}},{"type":"text","text":"children","styles":{"code":true}},{"type":"text","text":" prop. You can nest layouts by adding ","styles":{}},{"type":"text","text":"layout","styles":{"code":true}},{"type":"text","text":" inside specific route segments (folders).","styles":{}}],"children":[]},{"id":"fee5fa48-7129-43ec-9629-5825ad213920","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For example, to create a layout for the ","styles":{}},{"type":"text","text":"/blog","styles":{"code":true}},{"type":"text","text":" route, add a new ","styles":{}},{"type":"text","text":"layout","styles":{"code":true}},{"type":"text","text":" file inside the ","styles":{}},{"type":"text","text":"blog","styles":{"code":true}},{"type":"text","text":" folder.","styles":{}}],"children":[]},{"id":"0d9a768a-8a03-42ef-854f-6c79cee18581","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"File hierarchy showing root layout wrapping the blog layout","url":"https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/docs/light/nested-layouts.png","caption":"","showPreview":true,"previewWidth":761},"children":[]},{"id":"b0f6ccc4-bebb-4ee3-b5bf-e9f0ffc5445e","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"vacmm7j8w\",\"name\":\"app/blog/layout.tsx\",\"code\":\"export default function BlogLayout({\\n children,\\n}: {\\n children: React.ReactNode\\n}) {\\n return

{children}

\\n}\",\"language\":\"typescript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9d444d1d-396d-481d-a20f-8c312e28513e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If you were to combine the two layouts above, the root layout (","styles":{}},{"type":"text","text":"app/layout.js","styles":{"code":true}},{"type":"text","text":") would wrap the blog layout (","styles":{}},{"type":"text","text":"app/blog/layout.js","styles":{"code":true}},{"type":"text","text":"), which would wrap the blog (","styles":{}},{"type":"text","text":"app/blog/page.js","styles":{"code":true}},{"type":"text","text":") and blog post page (","styles":{}},{"type":"text","text":"app/blog/[slug]/page.js","styles":{"code":true}},{"type":"text","text":").","styles":{}}],"children":[]},{"id":"2b1791e1-d064-4a8e-8c57-4d3c8809f740","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Creating a dynamic segment","styles":{}}],"children":[]},{"id":"bbe48315-93ab-424a-8203-4cdc1af8b002","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"link","href":"/docs/app/api-reference/file-conventions/dynamic-routes","content":[{"type":"text","text":"Dynamic segments","styles":{}}]},{"type":"text","text":" allow you to create routes that are generated from data. For example, instead of manually creating a route for each individual blog post, you can create a dynamic segment to generate the routes based on blog post data.","styles":{}}],"children":[]},{"id":"9bf53290-1be9-450f-9161-fa472dccc2ee","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"To create a dynamic segment, wrap the segment (folder) name in square brackets: ","styles":{}},{"type":"text","text":"[segmentName]","styles":{"code":true}},{"type":"text","text":". For example, in the ","styles":{}},{"type":"text","text":"app/blog/[slug]/page.tsx","styles":{"code":true}},{"type":"text","text":" route, the ","styles":{}},{"type":"text","text":"[slug]","styles":{"code":true}},{"type":"text","text":" is the dynamic segment.","styles":{}}],"children":[]},{"id":"1e5241b0-35ae-4667-9bbe-76be9b5856dc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"a74e3d33-92b0-4f16-8e4a-1c3e781fce89","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"ok5zauwpz\",\"name\":\"app/blog/[slug]/page.tsx\",\"code\":\"export default async function BlogPostPage({\\n params,\\n}: {\\n params: Promise<{ slug: string }>\\n}) {\\n const { slug } = await params\\n const post = await getPost(slug)\\n \\n return (\\n

\\n

{post.title}

\\n

{post.content}

\\n

\\n )\\n}\",\"language\":\"typescript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"421d1b2a-4d07-4275-b107-c7a4e5f504e5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Learn more about ","styles":{}},{"type":"link","href":"/docs/app/api-reference/file-conventions/dynamic-routes","content":[{"type":"text","text":"Dynamic Segments","styles":{}}]},{"type":"text","text":" and the ","styles":{}},{"type":"text","text":"params","styles":{"code":true}},{"type":"text","text":" props.","styles":{}}],"children":[]},{"id":"2beea2e1-b967-4d07-bfc9-caf4149e13d8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Nested ","styles":{}},{"type":"link","href":"/docs/app/api-reference/file-conventions/layout#params-optional","content":[{"type":"text","text":"layouts within Dynamic Segments","styles":{}}]},{"type":"text","text":", can also access the ","styles":{}},{"type":"text","text":"params","styles":{"code":true}},{"type":"text","text":" props.","styles":{}}],"children":[]},{"id":"1c1e80b9-7bff-4d26-a5f3-848d008b5391","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Rendering with search params","styles":{}}],"children":[]},{"id":"7fbafadf-ec3a-426c-af8f-bd866956f103","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In a Server Component ","styles":{}},{"type":"text","text":"page","styles":{"bold":true}},{"type":"text","text":", you can access search parameters using the ","styles":{}},{"type":"text","text":"searchParams","styles":{"code":true}},{"type":"text","text":" prop:","styles":{}}],"children":[]},{"id":"d663be80-e888-43bc-ba58-8af208b40210","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3e122ad4-a66f-4472-a9b5-540d66aa45ba","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"pjltxhmxz\",\"name\":\"app/page.tsx\",\"code\":\"export default async function Page({\\n searchParams,\\n}: {\\n searchParams: Promise<{ [key: string]: string | string[] | undefined }>\\n}) {\\n const filters = (await searchParams).filters\\n}\",\"language\":\"typescript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"18dea5eb-308f-4a86-95e0-a50586a20432","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Using ","styles":{}},{"type":"text","text":"searchParams","styles":{"code":true}},{"type":"text","text":" opts your page into ","styles":{}},{"type":"link","href":"/docs/app/glossary#dynamic-rendering","content":[{"type":"text","text":"dynamic rendering","styles":{"bold":true}}]},{"type":"text","text":" because it requires an incoming request to read the search parameters from.","styles":{}}],"children":[]},{"id":"074df5e3-bf2b-4ed1-aeb9-740d90c7dc2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Client Components can read search params using the ","styles":{}},{"type":"text","text":"useSearchParams","styles":{"code":true}},{"type":"text","text":" hook.","styles":{}}],"children":[]},{"id":"69f018c2-511e-4f09-abfd-a33f8cedff66","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Learn more about ","styles":{}},{"type":"text","text":"useSearchParams","styles":{"code":true}},{"type":"text","text":" in ","styles":{}},{"type":"link","href":"/docs/app/api-reference/functions/use-search-params#prerendering","content":[{"type":"text","text":"prerendered","styles":{}}]},{"type":"text","text":" and ","styles":{}},{"type":"link","href":"/docs/app/api-reference/functions/use-search-params#dynamic-rendering","content":[{"type":"text","text":"dynamically rendered","styles":{}}]},{"type":"text","text":" routes.","styles":{}}],"children":[]},{"id":"5a0a7043-5b00-45bf-8dc2-946c6dea9b4a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"What to use and when","styles":{}}],"children":[]},{"id":"6daaa122-6f5f-4444-ae79-da2839456917","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use the ","styles":{}},{"type":"text","text":"searchParams","styles":{"code":true}},{"type":"text","text":" prop when you need search parameters to ","styles":{}},{"type":"text","text":"load data for the page","styles":{"bold":true}},{"type":"text","text":" (e.g. pagination, filtering from a database).","styles":{}}],"children":[]},{"id":"71a576a4-90f9-4e09-a388-99cd72a7903f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Use ","styles":{}},{"type":"text","text":"useSearchParams","styles":{"code":true}},{"type":"text","text":" when search parameters are used ","styles":{}},{"type":"text","text":"only on the client","styles":{"bold":true}},{"type":"text","text":" (e.g. filtering a list already loaded via props).","styles":{}}],"children":[]},{"id":"a7087a15-1a1a-4210-a86c-7c78a8cbfacb","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"As a small optimization, you can use ","styles":{}},{"type":"text","text":"new URLSearchParams(window.location.search)","styles":{"code":true}},{"type":"text","text":" in ","styles":{}},{"type":"text","text":"callbacks or event handlers","styles":{"bold":true}},{"type":"text","text":" to read search params without triggering re-renders.","styles":{}}],"children":[]},{"id":"6baf5167-38d3-483d-a901-55e2eeedc9ed","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Linking between pages","styles":{}}],"children":[]},{"id":"8cdc6fa0-75bb-4969-8f2e-25f4482a9e16","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"You can use the ","styles":{}},{"type":"text","text":"","styles":{"code":true}},{"type":"link","href":"/docs/app/api-reference/components/link","content":[{"type":"text","text":" component","styles":{}}]},{"type":"text","text":" to navigate between routes. ","styles":{}},{"type":"text","text":"","styles":{"code":true}},{"type":"text","text":" is a built-in Next.js component that extends the HTML ","styles":{}},{"type":"text","text":"","styles":{"code":true}},{"type":"text","text":" tag to provide ","styles":{}},{"type":"link","href":"/docs/app/getting-started/linking-and-navigating#prefetching","content":[{"type":"text","text":"prefetching","styles":{}}]},{"type":"text","text":" and ","styles":{}},{"type":"link","href":"/docs/app/getting-started/linking-and-navigating#client-side-transitions","content":[{"type":"text","text":"client-side navigation","styles":{}}]},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"8a80d205-cc8b-4614-a122-407bc29b2ee3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For example, to generate a list of blog posts, import ","styles":{}},{"type":"text","text":"","styles":{"code":true}},{"type":"text","text":" from ","styles":{}},{"type":"text","text":"next/link","styles":{"code":true}},{"type":"text","text":" and pass a ","styles":{}},{"type":"text","text":"href","styles":{"code":true}},{"type":"text","text":" prop to the component:","styles":{}}],"children":[]},{"id":"2c8c7054-c903-4436-b9e2-46199e974a8d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6d8a551a-8943-47f9-a217-4ac027e5c0b3","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"pw35l0ufx\",\"name\":\"app/ui/post.tsx\",\"code\":\"import Link from 'next/link'\\n \\nexport default async function Post({ post }) {\\n const posts = await getPosts()\\n \\n return (\\n

\\n {post.title}\\n

Blog post: {slug}

\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"79c8c508-f1d7-47bc-b245-8fa1d1b56739","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"xwsx6m0n9\",\"name\":\"code\",\"code\":\"export default function Layout(props: LayoutProps<'/dashboard'>) {\\n return (\\n

\\n {props.children}\\n {/* If you have app/dashboard/@analytics, it appears as a typed slot: */}\\n {/* {props.analytics} */}\\n