TDvorak/Devour
1
0
Fork 0
mirror of https://github.com/Dvorinka/Devour.git synced 2026-06-04 04:23:02 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
898a3c303f859ea475fc6241969fe54af26cdfd1
Devour/devour_data/docs/getting-started--layouts-and-pages---next.js.json
T
Tomas Dvorak 898a3c303f update
2026-02-24 10:33:59 +01:00

473 lines
34 KiB
JSON
Raw Blame History

{
"id": "968faffc89e2987f039a1cc2",
"source": "nextjs:routing",
"type": "html",
"title": "Getting Started: Layouts and Pages | Next.js",
"content": "App RouterGetting StartedLayouts and PagesCopy pageLayouts and PagesLast updated February 20, 2026Next.js uses file-system based routing, 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. Creating a page A page is UI that is rendered on a specific route. To create a page, add a page file inside the app directory and default export a React component. For example, to create an index page (/): app/page.tsxTypeScriptJavaScriptTypeScriptexport default function Page() { return \u003ch1\u003eHello Next.js!\u003c/h1\u003e } Creating a layout A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not rerender. You can define a layout by default exporting a React component from a layout file. The component should accept a children prop which can be a page or another layout. For example, to create a layout that accepts your index page as child, add a layout file inside the app directory: app/layout.tsxTypeScriptJavaScriptTypeScriptexport default function DashboardLayout({ children, }: { children: React.ReactNode }) { return ( \u003chtml lang=\"en\"\u003e \u003cbody\u003e {/* Layout UI */} {/* Place children where you want to render a page or nested layout */} \u003cmain\u003e{children}\u003c/main\u003e \u003c/body\u003e \u003c/html\u003e ) } The layout above is called a root layout because it's defined at the root of the app directory. The root layout is required and must contain html and body tags. Creating a nested route A nested route is a route composed of multiple URL segments. For example, the /blog/[slug] route is composed of three segments: / (Root Segment) blog (Segment) [slug] (Leaf Segment) In Next.js: Folders are used to define the route segments that map to URL segments. Files (like page and layout) are used to create UI that is shown for a segment. To create nested routes, you can nest folders inside each other. For example, to add a route for /blog, create a folder called blog in the app directory. Then, to make /blog publicly accessible, add a page.tsx file: app/blog/page.tsxTypeScriptJavaScriptTypeScript// Dummy imports import { getPosts } from '@/lib/posts' import { Post } from '@/ui/post' export default async function Page() { const posts = await getPosts() return ( \u003cul\u003e {posts.map((post) =\u003e ( \u003cPost key={post.id} post={post} /\u003e ))} \u003c/ul\u003e ) } You can continue nesting folders to create nested routes. For example, to create a route for a specific blog post, create a new [slug] folder inside blog and add a page file: app/blog/[slug]/page.tsxTypeScriptJavaScriptTypeScriptfunction generateStaticParams() {} export default function Page() { return \u003ch1\u003eHello, Blog Post Page!\u003c/h1\u003e } Wrapping a folder name in square brackets (e.g. [slug]) creates a dynamic route segment which is used to generate multiple pages from data. e.g. blog posts, product pages, etc. Nesting layouts By default, layouts in the folder hierarchy are also nested, which means they wrap child layouts via their children prop. You can nest layouts by adding layout inside specific route segments (folders). For example, to create a layout for the /blog route, add a new layout file inside the blog folder. app/blog/layout.tsxTypeScriptJavaScriptTypeScriptexport default function BlogLayout({ children, }: { children: React.ReactNode }) { return \u003csection\u003e{children}\u003c/section\u003e } If you were to combine the two layouts above, the root layout (app/layout.js) would wrap the blog layout (app/blog/layout.js), which would wrap the blog (app/blog/page.js) and blog post page (app/blog/[slug]/page.js). Creating a dynamic segment Dynamic segments 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. To create a dynamic segment, wrap the segment (folder) name in square brackets: [segmentName]. For example, in the app/blog/[slug]/page.tsx route, the [slug] is the dynamic segment. app/blog/[slug]/page.tsxTypeScriptJavaScriptTypeScriptexport default async function BlogPostPage({ params, }: { params: Promise\u003c{ slug: string }\u003e }) { const { slug } = await params const post = await getPost(slug) return ( \u003cdiv\u003e \u003ch1\u003e{post.title}\u003c/h1\u003e \u003cp\u003e{post.content}\u003c/p\u003e \u003c/div\u003e ) } Learn more about Dynamic Segments and the params props. Nested layouts within Dynamic Segments, can also access the params props. Rendering with search params In a Server Component page, you can access search parameters using the searchParams prop: app/page.tsxTypeScriptJavaScriptTypeScriptexport default async function Page({ searchParams, }: { searchParams: Promise\u003c{ [key: string]: string | string[] | undefined }\u003e }) { const filters = (await searchParams).filters } Using searchParams opts your page into dynamic rendering because it requires an incoming request to read the search parameters from. Client Components can read search params using the useSearchParams hook. Learn more about useSearchParams in statically rendered and dynamically rendered routes. What to use and when Use the searchParams prop when you need search parameters to load data for the page (e.g. pagination, filtering from a database). Use useSearchParams when search parameters are used only on the client (e.g. filtering a list already loaded via props). As a small optimization, you can use new URLSearchParams(window.location.search) in callbacks or event handlers to read search params without triggering re-renders. Linking between pages You can use the \u003cLink\u003e component to navigate between routes. \u003cLink\u003e is a built-in Next.js component that extends the HTML \u003ca\u003e tag to provide prefetching and client-side navigation. For example, to generate a list of blog posts, import \u003cLink\u003e from next/link and pass a href prop to the component: app/ui/post.tsxTypeScriptJavaScriptTypeScriptimport Link from 'next/link' export default async function Post({ post }) { const posts = await getPosts() return ( \u003cul\u003e {posts.map((post) =\u003e ( \u003cli key={post.slug}\u003e \u003cLink href={`/blog/${post.slug}`}\u003e{post.title}\u003c/Link\u003e \u003c/li\u003e ))} \u003c/ul\u003e ) } Good to know: \u003cLink\u003e is the primary way to navigate between routes in Next.js. You can also use the useRouter hook for more advanced navigation. Route Props Helpers Next.js exposes utility types that infer params and named slots from your route structure: PageProps: Props for page components, including params and searchParams. LayoutProps: Props for layout components, including children and any named slots (e.g. folders like @analytics). These are globally available helpers, generated when running either next dev, next build or next typegen. app/blog/[slug]/page.tsxexport default async function Page(props: PageProps\u003c'/blog/[slug]'\u003e) { const { slug } = await props.params return \u003ch1\u003eBlog post: {slug}\u003c/h1\u003e } app/dashboard/layout.tsxexport default function Layout(props: LayoutProps\u003c'/dashboard'\u003e) { return ( \u003csection\u003e {props.children} {/* If you have app/dashboard/@analytics, it appears as a typed slot: */} {/* {props.analytics} */} \u003c/section\u003e ) } Good to know Static routes resolve params to {}. PageProps, LayoutProps are global helpers — no imports required. Types are generated during next dev, next build or next typegen. API ReferenceLearn more about the features mentioned in this page by reading the API Reference.Linking and NavigatingLearn how the built-in navigation optimizations work, including prefetching, prerendering, and client-side navigation, and how to optimize navigation for dynamic routes and slow networks.layout.jsAPI reference for the layout.js file.page.jsAPI reference for the page.js file.Link ComponentEnable fast client-side navigation with the built-in `next/link` component.Dynamic SegmentsDynamic Route Segments can be used to programmatically generate route segments from dynamic data.PreviousProject StructureNextLinking and NavigatingWas this helpful?supported.Send",
"url": "https://nextjs.org/docs/app/building-your-application/routing",
"metadata": {
"description": "Learn how to create your first pages and layouts, and link between them with the Link component.",
"headings": [
"Layouts and Pages",
"Creating a page",
"Creating a layout",
"Creating a nested route",
"Nesting layouts",
"Creating a dynamic segment",
"Rendering with search params",
"What to use and when",
"Linking between pages",
"Route Props Helpers",
"API Reference",
"Linking and Navigating",
"layout.js",
"page.js",
"Link Component",
"Dynamic Segments",
"Resources",
"More",
"About Vercel",
"Legal",
"Subscribe to our newsletter"
],
"images": [
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Flight%2Fpage-special-file.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Fdark%2Fpage-special-file.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Flight%2Flayout-special-file.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Fdark%2Flayout-special-file.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Flight%2Fblog-nested-route.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Fdark%2Fblog-nested-route.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Flight%2Fblog-post-nested-route.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Fdark%2Fblog-post-nested-route.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Flight%2Fnested-layouts.png\u0026w=3840\u0026q=75",
"/_next/image?url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Fdocs%2Fdark%2Fnested-layouts.png\u0026w=3840\u0026q=75"
],
"links": [
"https://vercel.com/home?utm_source=next-site\u0026utm_medium=banner\u0026utm_campaign=docs_app_getting-started_layouts-and-pages",
"/",
"/showcase",
"/docs",
"/blog",
"https://vercel.com/templates/next.js?utm_source=next-site\u0026utm_medium=navbar\u0026utm_campaign=next_site_nav_templates",
"https://vercel.com/contact/sales/nextjs?utm_source=next-site\u0026utm_medium=navbar\u0026utm_campaign=next_site_nav_enterprise",
"/learn",
"/docs/app/getting-started",
"/docs/app/getting-started/installation",
"/docs/app/getting-started/project-structure",
"/docs/app/getting-started/layouts-and-pages",
"/docs/app/getting-started/linking-and-navigating",
"/docs/app/getting-started/server-and-client-components",
"/docs/app/getting-started/cache-components",
"/docs/app/getting-started/fetching-data",
"/docs/app/getting-started/updating-data",
"/docs/app/getting-started/caching-and-revalidating",
"/docs/app/getting-started/error-handling",
"/docs/app/getting-started/css",
"/docs/app/getting-started/images",
"/docs/app/getting-started/fonts",
"/docs/app/getting-started/metadata-and-og-images",
"/docs/app/getting-started/route-handlers",
"/docs/app/getting-started/proxy",
"/docs/app/getting-started/deploying",
"/docs/app/getting-started/upgrading",
"/docs/app/guides",
"/docs/app/guides/ai-agents",
"/docs/app/guides/analytics",
"/docs/app/guides/authentication",
"/docs/app/guides/backend-for-frontend",
"/docs/app/guides/caching",
"/docs/app/guides/ci-build-caching",
"/docs/app/guides/content-security-policy",
"/docs/app/guides/css-in-js",
"/docs/app/guides/custom-server",
"/docs/app/guides/data-security",
"/docs/app/guides/debugging",
"/docs/app/guides/draft-mode",
"/docs/app/guides/environment-variables",
"/docs/app/guides/forms",
"/docs/app/guides/incremental-static-regeneration",
"/docs/app/guides/instrumentation",
"/docs/app/guides/internationalization",
"/docs/app/guides/json-ld",
"/docs/app/guides/lazy-loading",
"/docs/app/guides/local-development",
"/docs/app/guides/mcp",
"/docs/app/guides/mdx",
"/docs/app/guides/memory-usage",
"/docs/app/guides/migrating",
"/docs/app/guides/migrating/app-router-migration",
"/docs/app/guides/migrating/from-create-react-app",
"/docs/app/guides/migrating/from-vite",
"/docs/app/guides/multi-tenant",
"/docs/app/guides/multi-zones",
"/docs/app/guides/open-telemetry",
"/docs/app/guides/package-bundling",
"/docs/app/guides/prefetching",
"/docs/app/guides/production-checklist",
"/docs/app/guides/progressive-web-apps",
"/docs/app/guides/public-static-pages",
"/docs/app/guides/redirecting",
"/docs/app/guides/sass",
"/docs/app/guides/scripts",
"/docs/app/guides/self-hosting",
"/docs/app/guides/single-page-applications",
"/docs/app/guides/static-exports",
"/docs/app/guides/tailwind-v3-css",
"/docs/app/guides/testing",
"/docs/app/guides/testing/cypress",
"/docs/app/guides/testing/jest",
"/docs/app/guides/testing/playwright",
"/docs/app/guides/testing/vitest",
"/docs/app/guides/third-party-libraries",
"/docs/app/guides/upgrading",
"/docs/app/guides/upgrading/codemods",
"/docs/app/guides/upgrading/version-14",
"/docs/app/guides/upgrading/version-15",
"/docs/app/guides/upgrading/version-16",
"/docs/app/guides/videos",
"/docs/app/api-reference",
"/docs/app/api-reference/directives",
"/docs/app/api-reference/directives/use-cache",
"/docs/app/api-reference/directives/use-cache-private",
"/docs/app/api-reference/directives/use-cache-remote",
"/docs/app/api-reference/directives/use-client",
"/docs/app/api-reference/directives/use-server",
"/docs/app/api-reference/components",
"/docs/app/api-reference/components/font",
"/docs/app/api-reference/components/form",
"/docs/app/api-reference/components/image",
"/docs/app/api-reference/components/link",
"/docs/app/api-reference/components/script",
"/docs/app/api-reference/file-conventions",
"/docs/app/api-reference/file-conventions/default",
"/docs/app/api-reference/file-conventions/dynamic-routes",
"/docs/app/api-reference/file-conventions/error",
"/docs/app/api-reference/file-conventions/forbidden",
"/docs/app/api-reference/file-conventions/instrumentation",
"/docs/app/api-reference/file-conventions/instrumentation-client",
"/docs/app/api-reference/file-conventions/intercepting-routes",
"/docs/app/api-reference/file-conventions/layout",
"/docs/app/api-reference/file-conventions/loading",
"/docs/app/api-reference/file-conventions/mdx-components",
"/docs/app/api-reference/file-conventions/not-found",
"/docs/app/api-reference/file-conventions/page",
"/docs/app/api-reference/file-conventions/parallel-routes",
"/docs/app/api-reference/file-conventions/proxy",
"/docs/app/api-reference/file-conventions/public-folder",
"/docs/app/api-reference/file-conventions/route",
"/docs/app/api-reference/file-conventions/route-groups",
"/docs/app/api-reference/file-conventions/route-segment-config",
"/docs/app/api-reference/file-conventions/src-folder",
"/docs/app/api-reference/file-conventions/template",
"/docs/app/api-reference/file-conventions/unauthorized",
"/docs/app/api-reference/file-conventions/metadata",
"/docs/app/api-reference/file-conventions/metadata/app-icons",
"/docs/app/api-reference/file-conventions/metadata/manifest",
"/docs/app/api-reference/file-conventions/metadata/opengraph-image",
"/docs/app/api-reference/file-conventions/metadata/robots",
"/docs/app/api-reference/file-conventions/metadata/sitemap",
"/docs/app/api-reference/functions",
"/docs/app/api-reference/functions/after",
"/docs/app/api-reference/functions/cacheLife",
"/docs/app/api-reference/functions/cacheTag",
"/docs/app/api-reference/functions/connection",
"/docs/app/api-reference/functions/cookies",
"/docs/app/api-reference/functions/draft-mode",
"/docs/app/api-reference/functions/fetch",
"/docs/app/api-reference/functions/forbidden",
"/docs/app/api-reference/functions/generate-image-metadata",
"/docs/app/api-reference/functions/generate-metadata",
"/docs/app/api-reference/functions/generate-sitemaps",
"/docs/app/api-reference/functions/generate-static-params",
"/docs/app/api-reference/functions/generate-viewport",
"/docs/app/api-reference/functions/headers",
"/docs/app/api-reference/functions/image-response",
"/docs/app/api-reference/functions/next-request",
"/docs/app/api-reference/functions/next-response",
"/docs/app/api-reference/functions/not-found",
"/docs/app/api-reference/functions/permanentRedirect",
"/docs/app/api-reference/functions/redirect",
"/docs/app/api-reference/functions/refresh",
"/docs/app/api-reference/functions/revalidatePath",
"/docs/app/api-reference/functions/revalidateTag",
"/docs/app/api-reference/functions/unauthorized",
"/docs/app/api-reference/functions/unstable_cache",
"/docs/app/api-reference/functions/unstable_noStore",
"/docs/app/api-reference/functions/unstable_rethrow",
"/docs/app/api-reference/functions/updateTag",
"/docs/app/api-reference/functions/use-link-status",
"/docs/app/api-reference/functions/use-params",
"/docs/app/api-reference/functions/use-pathname",
"/docs/app/api-reference/functions/use-report-web-vitals",
"/docs/app/api-reference/functions/use-router",
"/docs/app/api-reference/functions/use-search-params",
"/docs/app/api-reference/functions/use-selected-layout-segment",
"/docs/app/api-reference/functions/use-selected-layout-segments",
"/docs/app/api-reference/functions/userAgent",
"/docs/app/api-reference/config",
"/docs/app/api-reference/config/next-config-js",
"/docs/app/api-reference/config/next-config-js/adapterPath",
"/docs/app/api-reference/config/next-config-js/allowedDevOrigins",
"/docs/app/api-reference/config/next-config-js/appDir",
"/docs/app/api-reference/config/next-config-js/assetPrefix",
"/docs/app/api-reference/config/next-config-js/authInterrupts",
"/docs/app/api-reference/config/next-config-js/basePath",
"/docs/app/api-reference/config/next-config-js/browserDebugInfoInTerminal",
"/docs/app/api-reference/config/next-config-js/cacheComponents",
"/docs/app/api-reference/config/next-config-js/cacheHandlers",
"/docs/app/api-reference/config/next-config-js/cacheLife",
"/docs/app/api-reference/config/next-config-js/compress",
"/docs/app/api-reference/config/next-config-js/crossOrigin",
"/docs/app/api-reference/config/next-config-js/cssChunking",
"/docs/app/api-reference/config/next-config-js/deploymentId",
"/docs/app/api-reference/config/next-config-js/devIndicators",
"/docs/app/api-reference/config/next-config-js/distDir",
"/docs/app/api-reference/config/next-config-js/env",
"/docs/app/api-reference/config/next-config-js/expireTime",
"/docs/app/api-reference/config/next-config-js/exportPathMap",
"/docs/app/api-reference/config/next-config-js/generateBuildId",
"/docs/app/api-reference/config/next-config-js/generateEtags",
"/docs/app/api-reference/config/next-config-js/headers",
"/docs/app/api-reference/config/next-config-js/htmlLimitedBots",
"/docs/app/api-reference/config/next-config-js/httpAgentOptions",
"/docs/app/api-reference/config/next-config-js/images",
"/docs/app/api-reference/config/next-config-js/incrementalCacheHandlerPath",
"/docs/app/api-reference/config/next-config-js/inlineCss",
"/docs/app/api-reference/config/next-config-js/isolatedDevBuild",
"/docs/app/api-reference/config/next-config-js/logging",
"/docs/app/api-reference/config/next-config-js/mdxRs",
"/docs/app/api-reference/config/next-config-js/onDemandEntries",
"/docs/app/api-reference/config/next-config-js/optimizePackageImports",
"/docs/app/api-reference/config/next-config-js/output",
"/docs/app/api-reference/config/next-config-js/pageExtensions",
"/docs/app/api-reference/config/next-config-js/poweredByHeader",
"/docs/app/api-reference/config/next-config-js/productionBrowserSourceMaps",
"/docs/app/api-reference/config/next-config-js/proxyClientMaxBodySize",
"/docs/app/api-reference/config/next-config-js/reactCompiler",
"/docs/app/api-reference/config/next-config-js/reactMaxHeadersLength",
"/docs/app/api-reference/config/next-config-js/reactStrictMode",
"/docs/app/api-reference/config/next-config-js/redirects",
"/docs/app/api-reference/config/next-config-js/rewrites",
"/docs/app/api-reference/config/next-config-js/sassOptions",
"/docs/app/api-reference/config/next-config-js/serverActions",
"/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache",
"/docs/app/api-reference/config/next-config-js/serverExternalPackages",
"/docs/app/api-reference/config/next-config-js/staleTimes",
"/docs/app/api-reference/config/next-config-js/staticGeneration",
"/docs/app/api-reference/config/next-config-js/taint",
"/docs/app/api-reference/config/next-config-js/trailingSlash",
"/docs/app/api-reference/config/next-config-js/transpilePackages",
"/docs/app/api-reference/config/next-config-js/turbopack",
"/docs/app/api-reference/config/next-config-js/turbopackFileSystemCache",
"/docs/app/api-reference/config/next-config-js/typedRoutes",
"/docs/app/api-reference/config/next-config-js/typescript",
"/docs/app/api-reference/config/next-config-js/urlImports",
"/docs/app/api-reference/config/next-config-js/useLightningcss",
"/docs/app/api-reference/config/next-config-js/viewTransition",
"/docs/app/api-reference/config/next-config-js/webpack",
"/docs/app/api-reference/config/next-config-js/webVitalsAttribution",
"/docs/app/api-reference/config/typescript",
"/docs/app/api-reference/config/eslint",
"/docs/app/api-reference/cli",
"/docs/app/api-reference/cli/create-next-app",
"/docs/app/api-reference/cli/next",
"/docs/app/api-reference/edge",
"/docs/app/api-reference/turbopack",
"/docs/app/glossary",
"/docs/pages/getting-started",
"/docs/pages/getting-started/installation",
"/docs/pages/getting-started/project-structure",
"/docs/pages/getting-started/images",
"/docs/pages/getting-started/fonts",
"/docs/pages/getting-started/css",
"/docs/pages/getting-started/deploying",
"/docs/pages/guides",
"/docs/pages/guides/analytics",
"/docs/pages/guides/authentication",
"/docs/pages/guides/babel",
"/docs/pages/guides/ci-build-caching",
"/docs/pages/guides/content-security-policy",
"/docs/pages/guides/css-in-js",
"/docs/pages/guides/custom-server",
"/docs/pages/guides/debugging",
"/docs/pages/guides/draft-mode",
"/docs/pages/guides/environment-variables",
"/docs/pages/guides/forms",
"/docs/pages/guides/incremental-static-regeneration",
"/docs/pages/guides/instrumentation",
"/docs/pages/guides/internationalization",
"/docs/pages/guides/lazy-loading",
"/docs/pages/guides/mdx",
"/docs/pages/guides/migrating",
"/docs/pages/guides/migrating/app-router-migration",
"/docs/pages/guides/migrating/from-create-react-app",
"/docs/pages/guides/migrating/from-vite",
"/docs/pages/guides/multi-zones",
"/docs/pages/guides/open-telemetry",
"/docs/pages/guides/package-bundling",
"/docs/pages/guides/post-css",
"/docs/pages/guides/preview-mode",
"/docs/pages/guides/production-checklist",
"/docs/pages/guides/redirecting",
"/docs/pages/guides/sass",
"/docs/pages/guides/scripts",
"/docs/pages/guides/self-hosting",
"/docs/pages/guides/static-exports",
"/docs/pages/guides/tailwind-v3-css",
"/docs/pages/guides/testing",
"/docs/pages/guides/testing/cypress",
"/docs/pages/guides/testing/jest",
"/docs/pages/guides/testing/playwright",
"/docs/pages/guides/testing/vitest",
"/docs/pages/guides/third-party-libraries",
"/docs/pages/guides/upgrading",
"/docs/pages/guides/upgrading/codemods",
"/docs/pages/guides/upgrading/version-10",
"/docs/pages/guides/upgrading/version-11",
"/docs/pages/guides/upgrading/version-12",
"/docs/pages/guides/upgrading/version-13",
"/docs/pages/guides/upgrading/version-14",
"/docs/pages/guides/upgrading/version-9",
"/docs/pages/building-your-application",
"/docs/pages/building-your-application/routing",
"/docs/pages/building-your-application/routing/pages-and-layouts",
"/docs/pages/building-your-application/routing/dynamic-routes",
"/docs/pages/building-your-application/routing/linking-and-navigating",
"/docs/pages/building-your-application/routing/custom-app",
"/docs/pages/building-your-application/routing/custom-document",
"/docs/pages/building-your-application/routing/api-routes",
"/docs/pages/building-your-application/routing/custom-error",
"/docs/pages/building-your-application/rendering",
"/docs/pages/building-your-application/rendering/server-side-rendering",
"/docs/pages/building-your-application/rendering/static-site-generation",
"/docs/pages/building-your-application/rendering/automatic-static-optimization",
"/docs/pages/building-your-application/rendering/client-side-rendering",
"/docs/pages/building-your-application/data-fetching",
"/docs/pages/building-your-application/data-fetching/get-static-props",
"/docs/pages/building-your-application/data-fetching/get-static-paths",
"/docs/pages/building-your-application/data-fetching/forms-and-mutations",
"/docs/pages/building-your-application/data-fetching/get-server-side-props",
"/docs/pages/building-your-application/data-fetching/client-side",
"/docs/pages/building-your-application/configuring",
"/docs/pages/building-your-application/configuring/error-handling",
"/docs/pages/api-reference",
"/docs/pages/api-reference/components",
"/docs/pages/api-reference/components/font",
"/docs/pages/api-reference/components/form",
"/docs/pages/api-reference/components/head",
"/docs/pages/api-reference/components/image",
"/docs/pages/api-reference/components/image-legacy",
"/docs/pages/api-reference/components/link",
"/docs/pages/api-reference/components/script",
"/docs/pages/api-reference/file-conventions",
"/docs/pages/api-reference/file-conventions/instrumentation",
"/docs/pages/api-reference/file-conventions/proxy",
"/docs/pages/api-reference/file-conventions/public-folder",
"/docs/pages/api-reference/file-conventions/src-folder",
"/docs/pages/api-reference/functions",
"/docs/pages/api-reference/functions/get-initial-props",
"/docs/pages/api-reference/functions/get-server-side-props",
"/docs/pages/api-reference/functions/get-static-paths",
"/docs/pages/api-reference/functions/get-static-props",
"/docs/pages/api-reference/functions/next-request",
"/docs/pages/api-reference/functions/next-response",
"/docs/pages/api-reference/functions/use-params",
"/docs/pages/api-reference/functions/use-report-web-vitals",
"/docs/pages/api-reference/functions/use-router",
"/docs/pages/api-reference/functions/use-search-params",
"/docs/pages/api-reference/functions/userAgent",
"/docs/pages/api-reference/config",
"/docs/pages/api-reference/config/next-config-js",
"/docs/pages/api-reference/config/next-config-js/adapterPath",
"/docs/pages/api-reference/config/next-config-js/allowedDevOrigins",
"/docs/pages/api-reference/config/next-config-js/assetPrefix",
"/docs/pages/api-reference/config/next-config-js/basePath",
"/docs/pages/api-reference/config/next-config-js/bundlePagesRouterDependencies",
"/docs/pages/api-reference/config/next-config-js/compress",
"/docs/pages/api-reference/config/next-config-js/crossOrigin",
"/docs/pages/api-reference/config/next-config-js/deploymentId",
"/docs/pages/api-reference/config/next-config-js/devIndicators",
"/docs/pages/api-reference/config/next-config-js/distDir",
"/docs/pages/api-reference/config/next-config-js/env",
"/docs/pages/api-reference/config/next-config-js/exportPathMap",
"/docs/pages/api-reference/config/next-config-js/generateBuildId",
"/docs/pages/api-reference/config/next-config-js/generateEtags",
"/docs/pages/api-reference/config/next-config-js/headers",
"/docs/pages/api-reference/config/next-config-js/httpAgentOptions",
"/docs/pages/api-reference/config/next-config-js/images",
"/docs/pages/api-reference/config/next-config-js/isolatedDevBuild",
"/docs/pages/api-reference/config/next-config-js/onDemandEntries",
"/docs/pages/api-reference/config/next-config-js/optimizePackageImports",
"/docs/pages/api-reference/config/next-config-js/output",
"/docs/pages/api-reference/config/next-config-js/pageExtensions",
"/docs/pages/api-reference/config/next-config-js/poweredByHeader",
"/docs/pages/api-reference/config/next-config-js/productionBrowserSourceMaps",
"/docs/pages/api-reference/config/next-config-js/proxyClientMaxBodySize",
"/docs/pages/api-reference/config/next-config-js/reactStrictMode",
"/docs/pages/api-reference/config/next-config-js/redirects",
"/docs/pages/api-reference/config/next-config-js/rewrites",
"/docs/pages/api-reference/config/next-config-js/serverExternalPackages",
"/docs/pages/api-reference/config/next-config-js/trailingSlash",
"/docs/pages/api-reference/config/next-config-js/transpilePackages",
"/docs/pages/api-reference/config/next-config-js/turbopack",
"/docs/pages/api-reference/config/next-config-js/typescript",
"/docs/pages/api-reference/config/next-config-js/urlImports",
"/docs/pages/api-reference/config/next-config-js/useLightningcss",
"/docs/pages/api-reference/config/next-config-js/webpack",
"/docs/pages/api-reference/config/next-config-js/webVitalsAttribution",
"/docs/pages/api-reference/config/typescript",
"/docs/pages/api-reference/config/eslint",
"/docs/pages/api-reference/cli",
"/docs/pages/api-reference/cli/create-next-app",
"/docs/pages/api-reference/cli/next",
"/docs/pages/api-reference/edge",
"/docs/pages/api-reference/turbopack",
"/docs/architecture",
"/docs/architecture/accessibility",
"/docs/architecture/fast-refresh",
"/docs/architecture/nextjs-compiler",
"/docs/architecture/supported-browsers",
"/docs/community",
"/docs/community/contribution-guide",
"/docs/community/rspack",
"https://github.com/vercel/next.js/edit/canary/docs/01-app/01-getting-started/03-layouts-and-pages.mdx",
"/docs/app",
"/docs/app/api-reference/file-conventions/layout#root-layout",
"/docs/app/api-reference/file-conventions/page#params-optional",
"/docs/app/api-reference/file-conventions/layout#params-optional",
"/docs/app/api-reference/file-conventions/page#searchparams-optional",
"/docs/app/guides/caching#dynamic-rendering",
"/docs/app/api-reference/functions/use-search-params#static-rendering",
"/docs/app/api-reference/functions/use-search-params#dynamic-rendering",
"/docs/app/getting-started/linking-and-navigating#prefetching",
"/docs/app/getting-started/linking-and-navigating#client-side-transitions",
"/docs/app/api-reference/file-conventions/page#page-props-helper",
"/docs/app/api-reference/file-conventions/layout#layout-props-helper",
"/docs/app/api-reference/cli/next#next-typegen-options",
"https://vercel.com/home?utm_source=next-site\u0026utm_medium=footer\u0026utm_campaign=next-website",
"https://github.com/vercel/next.js",
"https://x.com/nextjs",
"https://bsky.app/profile/nextjs.org",
"/support-policy",
"/team",
"https://vercel.com/analytics?utm_source=next-site\u0026utm_medium=footer\u0026utm_campaign=docs_app_getting-started_layouts-and-pages",
"/conf",
"https://vercel.com/products/previews?utm_source=next-site\u0026utm_medium=footer\u0026utm_campaign=docs_app_getting-started_layouts-and-pages",
"/evals",
"https://vercel.com/templates/next.js/nextjs-commerce?utm_source=next-site\u0026utm_medium=footer\u0026utm_campaign=docs_app_getting-started_layouts-and-pages",
"https://vercel.com/contact/sales?utm_source=next-site\u0026utm_medium=footer\u0026utm_campaign=docs_app_getting-started_layouts-and-pages",
"https://community.vercel.com",
"https://github.com/vercel/next.js/releases",
"/telemetry",
"/governance",
"https://vercel.com/solutions/nextjs?utm_source=next-site\u0026utm_medium=footer\u0026utm_campaign=docs_app_getting-started_layouts-and-pages",
"https://vercel.com/oss?utm_source=next-site\u0026utm_medium=footer\u0026utm_campaign=docs_app_getting-started_layouts-and-pages",
"https://github.com/vercel",
"https://bsky.app/profile/vercel.com",
"https://x.com/vercel",
"https://vercel.com/legal/privacy-policy"
]
},
"hash": "23b98daa83b8f65605312e5823f5c37c326d3a8ba398e1596f60ef6efba7ccda",
"timestamp": "2026-02-23T11:43:59.367420728+01:00"
}
Reference in New Issue View Git Blame Copy Permalink