{"results":[{"hits":[{"title":"How to set up a Next.js project","section":"System requirements","anchor":"system-requirements","content":"System requirements","path":"/docs/app/getting-started/installation","position":0,"level":952,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/getting-started/installation-1e496ca2f7a66d863132588473f14de2","_distinctSeqID":0,"_highlightResult":{"title":{"value":"How to set up a Next.js project","matchLevel":"none","matchedWords":[]},"section":{"value":"System requirements","matchLevel":"none","matchedWords":[]},"content":{"value":"System requirements","matchLevel":"none","matchedWords":[]}}},{"title":"How to set up a Next.js project","section":"System requirements","anchor":"system-requirements","content":"Node.js 18.18 or later.","path":"/docs/app/getting-started/installation","position":1,"level":952,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/getting-started/installation-22881de801362db1dfa024f2e8adb9b5","_distinctSeqID":1,"_highlightResult":{"title":{"value":"How to set up a Next.js project","matchLevel":"none","matchedWords":[]},"section":{"value":"System requirements","matchLevel":"none","matchedWords":[]},"content":{"value":"Node.js 18.18 or later.","matchLevel":"none","matchedWords":[]}}},{"title":"How to set up a Next.js project","section":"System requirements","anchor":"system-requirements","content":"macOS, Windows (including WSL), and Linux are supported.","path":"/docs/app/getting-started/installation","position":2,"level":952,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/getting-started/installation-757dc4a508056c8143c7b3f92ba5248f","_distinctSeqID":2,"_highlightResult":{"title":{"value":"How to set up a Next.js project","matchLevel":"none","matchedWords":[]},"section":{"value":"System requirements","matchLevel":"none","matchedWords":[]},"content":{"value":"macOS, Windows (including WSL), and Linux are supported.","matchLevel":"none","matchedWords":[]}}},{"title":"How to set up a Next.js project","section":"Automatic installation","anchor":"automatic-installation","content":"Automatic installation","path":"/docs/app/getting-started/installation","position":3,"level":952,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/getting-started/installation-479c4132accb6721d820181b12dd766a","_distinctSeqID":3,"_highlightResult":{"title":{"value":"How to set up a Next.js project","matchLevel":"none","matchedWords":[]},"section":{"value":"Automatic installation","matchLevel":"none","matchedWords":[]},"content":{"value":"Automatic installation","matchLevel":"none","matchedWords":[]}}},{"title":"Project Structure and Organization","content":"This page provides an overview of the folder and file conventions in Next.js, as well as tips for organizing your project.","path":"/docs/app/getting-started/project-structure","position":0,"level":953,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/getting-started/project-structure-6f826c53b32c8bdfd8996a7d292b4d8c","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Project Structure and Organization","matchLevel":"none","matchedWords":[]},"content":{"value":"This page provides an overview of the folder and file conventions in Next.js, as well as tips for organizing your project.","matchLevel":"none","matchedWords":[]}}},{"title":"Project Structure and Organization","section":"Folder and file conventions","anchor":"folder-and-file-conventions","content":"Folder and file conventions","path":"/docs/app/getting-started/project-structure","position":1,"level":953,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/getting-started/project-structure-bbbfc0cfe5ab9e6ee4b65eeb047958fb","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Project Structure and Organization","matchLevel":"none","matchedWords":[]},"section":{"value":"Folder and file conventions","matchLevel":"none","matchedWords":[]},"content":{"value":"Folder and file conventions","matchLevel":"none","matchedWords":[]}}},{"title":"Project Structure and Organization","section":"Top-level folders","anchor":"top-level-folders","content":"Top-level folders","path":"/docs/app/getting-started/project-structure","position":2,"level":953,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/getting-started/project-structure-0b94a294caf0e961920f1bfa31af6ddd","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Project Structure and Organization","matchLevel":"none","matchedWords":[]},"section":{"value":"Top-level folders","matchLevel":"none","matchedWords":[]},"content":{"value":"Top-level folders","matchLevel":"none","matchedWords":[]}}},{"title":"Project Structure and Organization","section":"Top-level folders","anchor":"top-level-folders","content":"Top-level folders are used to organize your application's code and static assets.","path":"/docs/app/getting-started/project-structure","position":3,"level":953,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/getting-started/project-structure-bca8e722ef830c68d306eab958865125","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Project Structure and Organization","matchLevel":"none","matchedWords":[]},"section":{"value":"Top-level folders","matchLevel":"none","matchedWords":[]},"content":{"value":"Top-level folders are used to organize your application's code and static assets.","matchLevel":"none","matchedWords":[]}}},{"title":"Defining Routes","content":"This page will guide you through how to define and organize routes in your Next.js application.","path":"/docs/app/building-your-application/routing/defining-routes","position":0,"level":955,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/defining-routes-dd5abe1ec5d0036ac6e2834b4631a0c3","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Defining Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"This page will guide you through how to define and organize routes in your Next.js application.","matchLevel":"none","matchedWords":[]}}},{"title":"Defining Routes","section":"Creating Routes","anchor":"creating-routes","content":"Creating Routes","path":"/docs/app/building-your-application/routing/defining-routes","position":1,"level":955,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/defining-routes-6ba15eab46cf8e879fa69c5f01edf42c","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Defining Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Creating Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"Creating Routes","matchLevel":"none","matchedWords":[]}}},{"title":"Defining Routes","section":"Creating Routes","anchor":"creating-routes","content":"Next.js uses a file-system based router where folders are used to define routes.","path":"/docs/app/building-your-application/routing/defining-routes","position":2,"level":955,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/defining-routes-07a00c7070286060637494709c5bbf3c","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Defining Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Creating Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"Next.js uses a file-system based router where folders are used to define routes.","matchLevel":"none","matchedWords":[]}}},{"title":"Defining Routes","section":"Creating Routes","anchor":"creating-routes","content":"Each folder represents a route segment that maps to a URL segment. To create a nested route, you can nest folders inside each other.","path":"/docs/app/building-your-application/routing/defining-routes","position":3,"level":955,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/defining-routes-ae2662070c8405ca895d4f783f87ed47","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Defining Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Creating Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"Each folder represents a route segment that maps to a URL segment. To create a nested route, you can nest folders inside each other.","matchLevel":"none","matchedWords":[]}}},{"title":"Pages","content":"A page is UI that is unique to a route. You can define a page by default exporting a component from a page.js file.","path":"/docs/app/building-your-application/routing/pages","position":0,"level":956,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/pages-6148564e170d63fe3453972c434f3c33","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Pages","matchLevel":"none","matchedWords":[]},"content":{"value":"A page is UI that is unique to a route. You can define a page by default exporting a component from a page.js file.","matchLevel":"none","matchedWords":[]}}},{"title":"Pages","content":"For example, to create your index page, add the page.js file inside the app directory:","path":"/docs/app/building-your-application/routing/pages","position":1,"level":956,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/pages-eb49fa60eb4132b536c11d2b99ed3ea8","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Pages","matchLevel":"none","matchedWords":[]},"content":{"value":"For example, to create your index page, add the page.js file inside the app directory:","matchLevel":"none","matchedWords":[]}}},{"title":"Pages","content":"Then, to create further pages, create a new folder and add the page.js file inside it. For example, to create a page for the /dashboard route, create a new folder called dashboard, and add the page.js file inside it:","path":"/docs/app/building-your-application/routing/pages","position":2,"level":956,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/pages-41bb65a87efdf67c03a034de757c670c","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Pages","matchLevel":"none","matchedWords":[]},"content":{"value":"Then, to create further pages, create a new folder and add the page.js file inside it. For example, to create a page for the /dashboard route, create a new folder called dashboard, and add the page.js file inside it:","matchLevel":"none","matchedWords":[]}}},{"title":"Pages","content":"Good to know:\n\nThe .js, .jsx, or .tsx file extensions can be used for Pages.\nA page is always the leaf of the route subtree.\nA page.js file is required to make a route segment publicly accessible.\nPages are Server Components by default, but can be set to a Client Component.\nPages can fetch data. View the Data Fetching section for more information.","path":"/docs/app/building-your-application/routing/pages","position":503,"level":956,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/pages-438ec699db3eafcd707084e1f172bd92","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Pages","matchLevel":"none","matchedWords":[]},"content":{"value":"Good to know:\n\nThe .js, .jsx, or .tsx file extensions can be used for Pages.\nA page is always the leaf of the route subtree.\nA page.js file is required to make a route segment publicly accessible.\nPages are Server Components by default, but can be set to a Client Component.\nPages can fetch data. View the Data Fetching section for more information.","matchLevel":"none","matchedWords":[]}}},{"title":"Layouts and Templates","content":"The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.","path":"/docs/app/building-your-application/routing/layouts-and-templates","position":0,"level":957,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/layouts-and-templates-77b3cc24d7d15dfc6933599f537957e7","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Layouts and Templates","matchLevel":"none","matchedWords":[]},"content":{"value":"The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.","matchLevel":"none","matchedWords":[]}}},{"title":"Layouts and Templates","section":"Layouts","anchor":"layouts","content":"Layouts","path":"/docs/app/building-your-application/routing/layouts-and-templates","position":1,"level":957,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/layouts-and-templates-b9392bbd8ef255db12ec583f58026f5c","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Layouts and Templates","matchLevel":"none","matchedWords":[]},"section":{"value":"Layouts","matchLevel":"none","matchedWords":[]},"content":{"value":"Layouts","matchLevel":"none","matchedWords":[]}}},{"title":"Layouts and Templates","section":"Layouts","anchor":"layouts","content":"A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.","path":"/docs/app/building-your-application/routing/layouts-and-templates","position":2,"level":957,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/layouts-and-templates-5e918623d4517f495277375d767c453b","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Layouts and Templates","matchLevel":"none","matchedWords":[]},"section":{"value":"Layouts","matchLevel":"none","matchedWords":[]},"content":{"value":"A layout is UI that is shared between multiple routes. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested.","matchLevel":"none","matchedWords":[]}}},{"title":"Layouts and Templates","section":"Layouts","anchor":"layouts","content":"You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.","path":"/docs/app/building-your-application/routing/layouts-and-templates","position":3,"level":957,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/layouts-and-templates-049a75398b70452456e5024c9cc54be7","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Layouts and Templates","matchLevel":"none","matchedWords":[]},"section":{"value":"Layouts","matchLevel":"none","matchedWords":[]},"content":{"value":"You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout (if it exists) or a page during rendering.","matchLevel":"none","matchedWords":[]}}},{"title":"Linking and Navigating","content":"There are four ways to navigate between routes in Next.js:","path":"/docs/app/building-your-application/routing/linking-and-navigating","position":0,"level":958,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/linking-and-navigating-5ff78475c5fc885f991eafee11afb4a3","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Linking and Navigating","matchLevel":"none","matchedWords":[]},"content":{"value":"There are four ways to navigate between routes in Next.js:","matchLevel":"none","matchedWords":[]}}},{"title":"Linking and Navigating","content":"Using the <Link> Component","path":"/docs/app/building-your-application/routing/linking-and-navigating","position":1,"level":958,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/linking-and-navigating-c1164cf8457ee31487dc5534d963bf35","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Linking and Navigating","matchLevel":"none","matchedWords":[]},"content":{"value":"Using the <Link> Component","matchLevel":"none","matchedWords":[]}}},{"title":"Linking and Navigating","content":"Using the useRouter hook (Client Components)","path":"/docs/app/building-your-application/routing/linking-and-navigating","position":2,"level":958,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/linking-and-navigating-5642e1aa6b84b33b0c64b4b50614290d","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Linking and Navigating","matchLevel":"none","matchedWords":[]},"content":{"value":"Using the useRouter hook (Client Components)","matchLevel":"none","matchedWords":[]}}},{"title":"Linking and Navigating","content":"Using the redirect function (Server Components)","path":"/docs/app/building-your-application/routing/linking-and-navigating","position":3,"level":958,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/linking-and-navigating-51219cda5af2b14861875273951651b7","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Linking and Navigating","matchLevel":"none","matchedWords":[]},"content":{"value":"Using the redirect function (Server Components)","matchLevel":"none","matchedWords":[]}}},{"title":"Error Handling","content":"Errors can be divided into two categories: expected errors and uncaught exceptions:","path":"/docs/app/building-your-application/routing/error-handling","position":0,"level":959,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/error-handling-8a01e65f7426b7cf72fa0965b4e0bd97","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Error Handling","matchLevel":"none","matchedWords":[]},"content":{"value":"Errors can be divided into two categories: expected errors and uncaught exceptions:","matchLevel":"none","matchedWords":[]}}},{"title":"Error Handling","content":"Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useFormState to manage these errors and return them to the client.","path":"/docs/app/building-your-application/routing/error-handling","position":1,"level":959,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/error-handling-053e763b91dce7715872a70bf2e3f43a","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Error Handling","matchLevel":"none","matchedWords":[]},"content":{"value":"Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useFormState to manage these errors and return them to the client.","matchLevel":"none","matchedWords":[]}}},{"title":"Error Handling","content":"Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.","path":"/docs/app/building-your-application/routing/error-handling","position":2,"level":959,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/error-handling-95bc0a0d483a8434602ce22bd9e07a5a","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Error Handling","matchLevel":"none","matchedWords":[]},"content":{"value":"Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.","matchLevel":"none","matchedWords":[]}}},{"title":"Error Handling","section":"Handling Expected Errors","anchor":"handling-expected-errors","content":"Handling Expected Errors","path":"/docs/app/building-your-application/routing/error-handling","position":3,"level":959,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/error-handling-893a283ed657d743b278329b7433d724","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Error Handling","matchLevel":"none","matchedWords":[]},"section":{"value":"Handling Expected Errors","matchLevel":"none","matchedWords":[]},"content":{"value":"Handling Expected Errors","matchLevel":"none","matchedWords":[]}}},{"title":"Loading UI and Streaming","content":"The special file loading.js helps you create meaningful Loading UI with React Suspense. With this convention, you can show an instant loading state from the server while the content of a route segment loads. The new content is automatically swapped in once rendering is complete.","path":"/docs/app/building-your-application/routing/loading-ui-and-streaming","position":0,"level":960,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/loading-ui-and-streaming-86659e206e8aad7d85552810b438194c","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Loading UI and Streaming","matchLevel":"none","matchedWords":[]},"content":{"value":"The special file loading.js helps you create meaningful Loading UI with React Suspense. With this convention, you can show an instant loading state from the server while the content of a route segment loads. The new content is automatically swapped in once rendering is complete.","matchLevel":"none","matchedWords":[]}}},{"title":"Loading UI and Streaming","section":"Instant Loading States","anchor":"instant-loading-states","content":"Instant Loading States","path":"/docs/app/building-your-application/routing/loading-ui-and-streaming","position":1,"level":960,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/loading-ui-and-streaming-257a3882569235a23b0aa512cc022c89","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Loading UI and Streaming","matchLevel":"none","matchedWords":[]},"section":{"value":"Instant Loading States","matchLevel":"none","matchedWords":[]},"content":{"value":"Instant Loading States","matchLevel":"none","matchedWords":[]}}},{"title":"Loading UI and Streaming","section":"Instant Loading States","anchor":"instant-loading-states","content":"An instant loading state is fallback UI that is shown immediately upon navigation. You can pre-render loading indicators such as skeletons and spinners, or a small but meaningful part of future screens such as a cover photo, title, etc. This helps users understand the app is responding and provides a better user experience.","path":"/docs/app/building-your-application/routing/loading-ui-and-streaming","position":2,"level":960,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/loading-ui-and-streaming-5d4eceae8bab2825f06df6419f16e345","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Loading UI and Streaming","matchLevel":"none","matchedWords":[]},"section":{"value":"Instant Loading States","matchLevel":"none","matchedWords":[]},"content":{"value":"An instant loading state is fallback UI that is shown immediately upon navigation. You can pre-render loading indicators such as skeletons and spinners, or a small but meaningful part of future screens such as a cover photo, title, etc. This helps users understand the app is responding and provides a better user experience.","matchLevel":"none","matchedWords":[]}}},{"title":"Loading UI and Streaming","section":"Instant Loading States","anchor":"instant-loading-states","content":"Create a loading state by adding a loading.js file inside a folder.","path":"/docs/app/building-your-application/routing/loading-ui-and-streaming","position":3,"level":960,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/loading-ui-and-streaming-ac442d3dd839af53b8e8c6529b4a6481","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Loading UI and Streaming","matchLevel":"none","matchedWords":[]},"section":{"value":"Instant Loading States","matchLevel":"none","matchedWords":[]},"content":{"value":"Create a loading state by adding a loading.js file inside a folder.","matchLevel":"none","matchedWords":[]}}},{"title":"Redirecting","content":"There are a few ways you can handle redirects in Next.js. This page will go through each available option, use cases, and how to manage large numbers of redirects.","path":"/docs/app/building-your-application/routing/redirecting","position":0,"level":961,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/redirecting-8ea7eab3b4ce1903cc823fceff5d88c5","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Redirecting","matchLevel":"none","matchedWords":[]},"content":{"value":"There are a few ways you can handle redirects in Next.js. This page will go through each available option, use cases, and how to manage large numbers of redirects.","matchLevel":"none","matchedWords":[]}}},{"title":"Redirecting","section":"redirect function","anchor":"redirect-function","content":"redirect function","path":"/docs/app/building-your-application/routing/redirecting","position":1,"level":961,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/redirecting-1dd8a22c160fa99c304da9a11408e814","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Redirecting","matchLevel":"none","matchedWords":[]},"section":{"value":"redirect function","matchLevel":"none","matchedWords":[]},"content":{"value":"redirect function","matchLevel":"none","matchedWords":[]}}},{"title":"Redirecting","section":"redirect function","anchor":"redirect-function","content":"The redirect function allows you to redirect the user to another URL. You can call redirect in Server Components, Route Handlers, and Server Actions.","path":"/docs/app/building-your-application/routing/redirecting","position":2,"level":961,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/redirecting-0bbe858a31c3672481a8eed7d0558148","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Redirecting","matchLevel":"none","matchedWords":[]},"section":{"value":"redirect function","matchLevel":"none","matchedWords":[]},"content":{"value":"The redirect function allows you to redirect the user to another URL. You can call redirect in Server Components, Route Handlers, and Server Actions.","matchLevel":"none","matchedWords":[]}}},{"title":"Redirecting","section":"redirect function","anchor":"redirect-function","content":"redirect is often used after a mutation or event. For example, creating a post:","path":"/docs/app/building-your-application/routing/redirecting","position":3,"level":961,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/redirecting-f913e6fd31df276e81395e8e0cf4720b","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Redirecting","matchLevel":"none","matchedWords":[]},"section":{"value":"redirect function","matchLevel":"none","matchedWords":[]},"content":{"value":"redirect is often used after a mutation or event. For example, creating a post:","matchLevel":"none","matchedWords":[]}}},{"title":"Route Groups","content":"In the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.","path":"/docs/app/building-your-application/routing/route-groups","position":0,"level":962,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/route-groups-477e31ae69a4f42c5dfa5e7a6225658c","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Route Groups","matchLevel":"none","matchedWords":[]},"content":{"value":"In the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.","matchLevel":"none","matchedWords":[]}}},{"title":"Route Groups","content":"This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.","path":"/docs/app/building-your-application/routing/route-groups","position":1,"level":962,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/route-groups-cd06dcdc674fec08aa431c14d816e8a1","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Route Groups","matchLevel":"none","matchedWords":[]},"content":{"value":"This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.","matchLevel":"none","matchedWords":[]}}},{"title":"Route Groups","content":"Route groups are useful for:","path":"/docs/app/building-your-application/routing/route-groups","position":2,"level":962,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/route-groups-19fd9ac71fc8e9377c4e3d869b1df4bc","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Route Groups","matchLevel":"none","matchedWords":[]},"content":{"value":"Route groups are useful for:","matchLevel":"none","matchedWords":[]}}},{"title":"Route Groups","content":"Organizing routes into groups e.g. by site section, intent, or team.","path":"/docs/app/building-your-application/routing/route-groups","position":3,"level":962,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/route-groups-ab43a4e5dd59d851cfde1998356a2477","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Route Groups","matchLevel":"none","matchedWords":[]},"content":{"value":"Organizing routes into groups e.g. by site section, intent, or team.","matchLevel":"none","matchedWords":[]}}},{"title":"Dynamic Routes","content":"When you don't know the exact segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or prerendered at build time.","path":"/docs/app/building-your-application/routing/dynamic-routes","position":0,"level":963,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/dynamic-routes-119116c16f5e2206a4cb6661ca139d89","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Dynamic Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"When you don't know the exact segment names ahead of time and want to create routes from dynamic data, you can use Dynamic Segments that are filled in at request time or prerendered at build time.","matchLevel":"none","matchedWords":[]}}},{"title":"Dynamic Routes","section":"Convention","anchor":"convention","content":"Convention","path":"/docs/app/building-your-application/routing/dynamic-routes","position":1,"level":963,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/dynamic-routes-d75cfdac13e7001d74fad55b7c75fe58","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Dynamic Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"Convention","matchLevel":"none","matchedWords":[]}}},{"title":"Dynamic Routes","section":"Convention","anchor":"convention","content":"A Dynamic Segment can be created by wrapping a folder's name in square brackets: [folderName]. For example, [id] or [slug].","path":"/docs/app/building-your-application/routing/dynamic-routes","position":2,"level":963,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/dynamic-routes-e4365f951c2d5185c4d95273ab8d27c7","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Dynamic Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"A Dynamic Segment can be created by wrapping a folder's name in square brackets: [folderName]. For example, [id] or [slug].","matchLevel":"none","matchedWords":[]}}},{"title":"Dynamic Routes","section":"Convention","anchor":"convention","content":"Dynamic Segments are passed as the params prop to layout, page, route, and generateMetadata functions.","path":"/docs/app/building-your-application/routing/dynamic-routes","position":3,"level":963,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/dynamic-routes-3f396b14710f4f76415cdee942d8889f","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Dynamic Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"Dynamic Segments are passed as the params prop to layout, page, route, and generateMetadata functions.","matchLevel":"none","matchedWords":[]}}},{"title":"Parallel Routes","content":"Parallel Routes allows you to simultaneously or conditionally render one or more pages within the same layout. They are useful for highly dynamic sections of an app, such as dashboards and feeds on social sites.","path":"/docs/app/building-your-application/routing/parallel-routes","position":0,"level":964,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/parallel-routes-3d8fc8fcbd7dc8a87e690c65dce166b8","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Parallel Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"Parallel Routes allows you to simultaneously or conditionally render one or more pages within the same layout. They are useful for highly dynamic sections of an app, such as dashboards and feeds on social sites.","matchLevel":"none","matchedWords":[]}}},{"title":"Parallel Routes","content":"For example, considering a dashboard, you can use parallel routes to simultaneously render the team and analytics pages:","path":"/docs/app/building-your-application/routing/parallel-routes","position":1,"level":964,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/parallel-routes-7c5017d5e876dd7dd5c2eb0d1d7bc41a","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Parallel Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"For example, considering a dashboard, you can use parallel routes to simultaneously render the team and analytics pages:","matchLevel":"none","matchedWords":[]}}},{"title":"Parallel Routes","section":"Slots","anchor":"slots","content":"Slots","path":"/docs/app/building-your-application/routing/parallel-routes","position":2,"level":964,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/parallel-routes-f573ad6f99732daf89b2f9dd79ba77e0","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Parallel Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Slots","matchLevel":"none","matchedWords":[]},"content":{"value":"Slots","matchLevel":"none","matchedWords":[]}}},{"title":"Parallel Routes","section":"Slots","anchor":"slots","content":"Parallel routes are created using named slots. Slots are defined with the @folder convention. For example, the following file structure defines two slots: @analytics and @team:","path":"/docs/app/building-your-application/routing/parallel-routes","position":3,"level":964,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/parallel-routes-e5f17d81c3f6e2360b25d994299e8c3a","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Parallel Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Slots","matchLevel":"none","matchedWords":[]},"content":{"value":"Parallel routes are created using named slots. Slots are defined with the @folder convention. For example, the following file structure defines two slots: @analytics and @team:","matchLevel":"none","matchedWords":[]}}},{"title":"Intercepting Routes","content":"Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.","path":"/docs/app/building-your-application/routing/intercepting-routes","position":0,"level":965,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/intercepting-routes-b7f9a7fba333cdd08ce27281d1d08753","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Intercepting Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.","matchLevel":"none","matchedWords":[]}}},{"title":"Intercepting Routes","content":"For example, when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed. In this case, Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /feed.","path":"/docs/app/building-your-application/routing/intercepting-routes","position":1,"level":965,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/intercepting-routes-6987c77b23db4a5c6d29e5fe80eaaa5b","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Intercepting Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"For example, when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed. In this case, Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /feed.","matchLevel":"none","matchedWords":[]}}},{"title":"Intercepting Routes","content":"However, when navigating to the photo by clicking a shareable URL or by refreshing the page, the entire photo page should render instead of the modal. No route interception should occur.","path":"/docs/app/building-your-application/routing/intercepting-routes","position":2,"level":965,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/intercepting-routes-69b1de44174a0d54c49cd8322cc37cf4","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Intercepting Routes","matchLevel":"none","matchedWords":[]},"content":{"value":"However, when navigating to the photo by clicking a shareable URL or by refreshing the page, the entire photo page should render instead of the modal. No route interception should occur.","matchLevel":"none","matchedWords":[]}}},{"title":"Intercepting Routes","section":"Convention","anchor":"convention","content":"Convention","path":"/docs/app/building-your-application/routing/intercepting-routes","position":3,"level":965,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/intercepting-routes-d75cfdac13e7001d74fad55b7c75fe58","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Intercepting Routes","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"Convention","matchLevel":"none","matchedWords":[]}}},{"title":"Route Handlers","content":"Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs.","path":"/docs/app/building-your-application/routing/route-handlers","position":0,"level":966,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/route-handlers-0f4c955ad482e68d77ea1ba2fc373759","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Route Handlers","matchLevel":"none","matchedWords":[]},"content":{"value":"Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs.","matchLevel":"none","matchedWords":[]}}},{"title":"Route Handlers","section":"Convention","anchor":"convention","content":"Convention","path":"/docs/app/building-your-application/routing/route-handlers","position":1,"level":966,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/route-handlers-d75cfdac13e7001d74fad55b7c75fe58","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Route Handlers","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"Convention","matchLevel":"none","matchedWords":[]}}},{"title":"Route Handlers","section":"Convention","anchor":"convention","content":"Route Handlers are defined in a route.js|ts file inside the app directory:","path":"/docs/app/building-your-application/routing/route-handlers","position":2,"level":966,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/route-handlers-997c4aa840b2144826c600d21af2baaf","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Route Handlers","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"Route Handlers are defined in a route.js|ts file inside the app directory:","matchLevel":"none","matchedWords":[]}}},{"title":"Route Handlers","section":"Convention","anchor":"convention","content":"Route Handlers can be nested anywhere inside the app directory, similar to page.js and layout.js. But there cannot be a route.js file at the same route segment level as page.js.","path":"/docs/app/building-your-application/routing/route-handlers","position":3,"level":966,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/route-handlers-52c6c17f54661890bc02e948602600ff","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Route Handlers","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"Route Handlers can be nested anywhere inside the app directory, similar to page.js and layout.js. But there cannot be a route.js file at the same route segment level as page.js.","matchLevel":"none","matchedWords":[]}}},{"title":"Middleware","content":"Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.","path":"/docs/app/building-your-application/routing/middleware","position":0,"level":967,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/middleware-4ff945566714a0a50b1d6418fa295c93","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Middleware","matchLevel":"none","matchedWords":[]},"content":{"value":"Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.","matchLevel":"none","matchedWords":[]}}},{"title":"Middleware","content":"Middleware runs before cached content and routes are matched. See Matching Paths for more details.","path":"/docs/app/building-your-application/routing/middleware","position":1,"level":967,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/middleware-12b1e8cd6a270050bb6b34a10d8f9e3a","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Middleware","matchLevel":"none","matchedWords":[]},"content":{"value":"Middleware runs before cached content and routes are matched. See Matching Paths for more details.","matchLevel":"none","matchedWords":[]}}},{"title":"Middleware","section":"Use Cases","anchor":"use-cases","content":"Use Cases","path":"/docs/app/building-your-application/routing/middleware","position":2,"level":967,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/middleware-1cf7e301510c711b73d2b182b9dcf084","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Middleware","matchLevel":"none","matchedWords":[]},"section":{"value":"Use Cases","matchLevel":"none","matchedWords":[]},"content":{"value":"Use Cases","matchLevel":"none","matchedWords":[]}}},{"title":"Middleware","section":"Use Cases","anchor":"use-cases","content":"Integrating Middleware into your application can lead to significant improvements in performance, security, and user experience. Some common scenarios where Middleware is particularly effective include:","path":"/docs/app/building-your-application/routing/middleware","position":3,"level":967,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/middleware-0eda25272633016a1c1bdfeb2ffa5911","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Middleware","matchLevel":"none","matchedWords":[]},"section":{"value":"Use Cases","matchLevel":"none","matchedWords":[]},"content":{"value":"Integrating Middleware into your application can lead to significant improvements in performance, security, and user experience. Some common scenarios where Middleware is particularly effective include:","matchLevel":"none","matchedWords":[]}}},{"title":"Internationalization","content":"Next.js enables you to configure the routing and rendering of content to support multiple languages. Making your site adaptive to different locales includes translated content (localization) and internationalized routes.","path":"/docs/app/building-your-application/routing/internationalization","position":0,"level":968,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/internationalization-6279938aa6c8f0cd2dc0f94c8cd5eb8a","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Internationalization","matchLevel":"none","matchedWords":[]},"content":{"value":"Next.js enables you to configure the routing and rendering of content to support multiple languages. Making your site adaptive to different locales includes translated content (localization) and internationalized routes.","matchLevel":"none","matchedWords":[]}}},{"title":"Internationalization","section":"Terminology","anchor":"terminology","content":"Terminology","path":"/docs/app/building-your-application/routing/internationalization","position":1,"level":968,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/internationalization-e182a8a3f2adf774fb1c959df71b8600","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Internationalization","matchLevel":"none","matchedWords":[]},"section":{"value":"Terminology","matchLevel":"none","matchedWords":[]},"content":{"value":"Terminology","matchLevel":"none","matchedWords":[]}}},{"title":"Internationalization","section":"Terminology","anchor":"terminology","content":"Locale: An identifier for a set of language and formatting preferences. This usually includes the preferred language of the user and possibly their geographic region.\nen-US: English as spoken in the United States\nnl-NL: Dutch as spoken in the Netherlands\nnl: Dutch, no specific region","path":"/docs/app/building-your-application/routing/internationalization","position":2,"level":968,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/internationalization-662e17ec52427d9164ef5603cb1a202d","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Internationalization","matchLevel":"none","matchedWords":[]},"section":{"value":"Terminology","matchLevel":"none","matchedWords":[]},"content":{"value":"Locale: An identifier for a set of language and formatting preferences. This usually includes the preferred language of the user and possibly their geographic region.\nen-US: English as spoken in the United States\nnl-NL: Dutch as spoken in the Netherlands\nnl: Dutch, no specific region","matchLevel":"none","matchedWords":[]}}},{"title":"Internationalization","section":"Routing Overview","anchor":"routing-overview","content":"Routing Overview","path":"/docs/app/building-your-application/routing/internationalization","position":3,"level":968,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing/internationalization-9fe3ab88c25c8f8642160313c6c90252","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Internationalization","matchLevel":"none","matchedWords":[]},"section":{"value":"Routing Overview","matchLevel":"none","matchedWords":[]},"content":{"value":"Routing Overview","matchLevel":"none","matchedWords":[]}}},{"title":"Routing Fundamentals","content":"The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.","path":"/docs/app/building-your-application/routing","position":0,"level":969,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing-b8acdd298bcbae430af129c6b0e4b9d8","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Routing Fundamentals","matchLevel":"none","matchedWords":[]},"content":{"value":"The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.","matchLevel":"none","matchedWords":[]}}},{"title":"Routing Fundamentals","section":"Terminology","anchor":"terminology","content":"Terminology","path":"/docs/app/building-your-application/routing","position":1,"level":969,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing-e182a8a3f2adf774fb1c959df71b8600","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Routing Fundamentals","matchLevel":"none","matchedWords":[]},"section":{"value":"Terminology","matchLevel":"none","matchedWords":[]},"content":{"value":"Terminology","matchLevel":"none","matchedWords":[]}}},{"title":"Routing Fundamentals","section":"Terminology","anchor":"terminology","content":"First, you will see these terms being used throughout the documentation. Here's a quick reference:","path":"/docs/app/building-your-application/routing","position":2,"level":969,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing-9ae7914f1490fc1d864aa193437c07a0","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Routing Fundamentals","matchLevel":"none","matchedWords":[]},"section":{"value":"Terminology","matchLevel":"none","matchedWords":[]},"content":{"value":"First, you will see these terms being used throughout the documentation. Here's a quick reference:","matchLevel":"none","matchedWords":[]}}},{"title":"Routing Fundamentals","section":"Terminology","anchor":"terminology","content":"Tree: A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.","path":"/docs/app/building-your-application/routing","position":3,"level":969,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/routing-6a11728ca5f8dd77d0f03ecfecdb0d21","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Routing Fundamentals","matchLevel":"none","matchedWords":[]},"section":{"value":"Terminology","matchLevel":"none","matchedWords":[]},"content":{"value":"Tree: A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.","matchLevel":"none","matchedWords":[]}}},{"title":"Data Fetching and Caching","content":"This guide will walk you through the basics of data fetching and caching in Next.js, providing practical examples and best practices.","path":"/docs/app/building-your-application/data-fetching/fetching","position":0,"level":970,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/fetching-cbb692694989b8fb0f983cb784585009","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Data Fetching and Caching","matchLevel":"none","matchedWords":[]},"content":{"value":"This guide will walk you through the basics of data fetching and caching in Next.js, providing practical examples and best practices.","matchLevel":"none","matchedWords":[]}}},{"title":"Data Fetching and Caching","content":"Here's a minimal example of data fetching in Next.js:","path":"/docs/app/building-your-application/data-fetching/fetching","position":1,"level":970,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/fetching-9583f0db6acb878eccbf940832ed7c62","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Data Fetching and Caching","matchLevel":"none","matchedWords":[]},"content":{"value":"Here's a minimal example of data fetching in Next.js:","matchLevel":"none","matchedWords":[]}}},{"title":"Data Fetching and Caching","content":"This example demonstrates a basic server-side data fetch using the fetch API in an asynchronous React Server Component.","path":"/docs/app/building-your-application/data-fetching/fetching","position":2,"level":970,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/fetching-9a177cac3488187bc9465bd66bb7fc9c","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Data Fetching and Caching","matchLevel":"none","matchedWords":[]},"content":{"value":"This example demonstrates a basic server-side data fetch using the fetch API in an asynchronous React Server Component.","matchLevel":"none","matchedWords":[]}}},{"title":"Data Fetching and Caching","section":"Reference","anchor":"reference","content":"Reference","path":"/docs/app/building-your-application/data-fetching/fetching","position":3,"level":970,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/fetching-63d5049791d9d79d86e9a108b0a999ca","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Data Fetching and Caching","matchLevel":"none","matchedWords":[]},"section":{"value":"Reference","matchLevel":"none","matchedWords":[]},"content":{"value":"Reference","matchLevel":"none","matchedWords":[]}}},{"title":"Server Actions and Mutations","content":"Server Actions are asynchronous functions that are executed on the server. They can be called in Server and Client Components to handle form submissions and data mutations in Next.js applications.","path":"/docs/app/building-your-application/data-fetching/server-actions-and-mutations","position":0,"level":971,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/server-actions-and-mutations-b38e40077dbd078f501d5f136b3e09ec","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Server Actions and Mutations","matchLevel":"none","matchedWords":[]},"content":{"value":"Server Actions are asynchronous functions that are executed on the server. They can be called in Server and Client Components to handle form submissions and data mutations in Next.js applications.","matchLevel":"none","matchedWords":[]}}},{"title":"Server Actions and Mutations","section":"Convention","anchor":"convention","content":"Convention","path":"/docs/app/building-your-application/data-fetching/server-actions-and-mutations","position":1,"level":971,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/server-actions-and-mutations-d75cfdac13e7001d74fad55b7c75fe58","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Server Actions and Mutations","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"Convention","matchLevel":"none","matchedWords":[]}}},{"title":"Server Actions and Mutations","section":"Convention","anchor":"convention","content":"A Server Action can be defined with the React \"use server\" directive. You can place the directive at the top of an async function to mark the function as a Server Action, or at the top of a separate file to mark all exports of that file as Server Actions.","path":"/docs/app/building-your-application/data-fetching/server-actions-and-mutations","position":2,"level":971,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/server-actions-and-mutations-1032d733d80f93adc2be1069e5830be9","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Server Actions and Mutations","matchLevel":"none","matchedWords":[]},"section":{"value":"Convention","matchLevel":"none","matchedWords":[]},"content":{"value":"A Server Action can be defined with the React \"use server\" directive. You can place the directive at the top of an async function to mark the function as a Server Action, or at the top of a separate file to mark all exports of that file as Server Actions.","matchLevel":"none","matchedWords":[]}}},{"title":"Server Actions and Mutations","section":"Server Components","anchor":"server-components","content":"Server Components","path":"/docs/app/building-your-application/data-fetching/server-actions-and-mutations","position":3,"level":971,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/server-actions-and-mutations-78ddc03d8c3193bfe52111823d65195b","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Server Actions and Mutations","matchLevel":"none","matchedWords":[]},"section":{"value":"Server Components","matchLevel":"none","matchedWords":[]},"content":{"value":"Server Components","matchLevel":"none","matchedWords":[]}}},{"title":"Incremental Static Regeneration (ISR)","content":"Incremental Static Regeneration (ISR) enables you to:","path":"/docs/app/building-your-application/data-fetching/incremental-static-regeneration","position":0,"level":972,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/incremental-static-regeneration-cd05a988eb15e85ea2456663ddb32702","_distinctSeqID":0,"_highlightResult":{"title":{"value":"Incremental Static Regeneration (ISR)","matchLevel":"none","matchedWords":[]},"content":{"value":"Incremental Static Regeneration (ISR) enables you to:","matchLevel":"none","matchedWords":[]}}},{"title":"Incremental Static Regeneration (ISR)","content":"Update static content without rebuilding the entire site","path":"/docs/app/building-your-application/data-fetching/incremental-static-regeneration","position":1,"level":972,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/incremental-static-regeneration-21a5f5b7629bf9ed4e8734e16da6afb9","_distinctSeqID":1,"_highlightResult":{"title":{"value":"Incremental Static Regeneration (ISR)","matchLevel":"none","matchedWords":[]},"content":{"value":"Update static content without rebuilding the entire site","matchLevel":"none","matchedWords":[]}}},{"title":"Incremental Static Regeneration (ISR)","content":"Reduce server load by serving prerendered, static pages for most requests","path":"/docs/app/building-your-application/data-fetching/incremental-static-regeneration","position":2,"level":972,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/incremental-static-regeneration-e82b687f1ebbb825be433335a42830b4","_distinctSeqID":2,"_highlightResult":{"title":{"value":"Incremental Static Regeneration (ISR)","matchLevel":"none","matchedWords":[]},"content":{"value":"Reduce server load by serving prerendered, static pages for most requests","matchLevel":"none","matchedWords":[]}}},{"title":"Incremental Static Regeneration (ISR)","content":"Ensure proper cache-control headers are automatically added to pages","path":"/docs/app/building-your-application/data-fetching/incremental-static-regeneration","position":3,"level":972,"isPages":false,"isApp":true,"version":"stable","objectID":"/docs/stable/app/building-your-application/data-fetching/incremental-static-regeneration-e4da0f37cb0257fc71d0835f52cb330a","_distinctSeqID":3,"_highlightResult":{"title":{"value":"Incremental Static Regeneration (ISR)","matchLevel":"none","matchedWords":[]},"content":{"value":"Ensure proper cache-control headers are automatically added to pages","matchLevel":"none","matchedWords":[]}}}],"nbHits":198,"page":0,"nbPages":10,"hitsPerPage":20,"exhaustiveNbHits":true,"exhaustiveTypo":true,"exhaustive":{"nbHits":true,"typo":true},"query":"","params":"filters=isApp%3Atrue","index":"nextjs_docs_stable","renderingContent":{},"processingTimeMS":1,"processingTimingsMS":{"_request":{"roundTrip":30},"afterFetch":{"format":{"total":1}},"fetch":{"scanning":1,"total":1},"total":1},"serverTimeMS":3}]}