loading.js file example
export default function Loading() { return <div>Loading...</div> }
Next.js App Router · all subjects
file conventions
9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
loading.js wraps in Suspense boundary
Behind the scenes, loading.js is nested inside layout.js and automatically wraps the page.js file and any children below in a <Suspense> boundary.
loading.js file location and behavior
Create a loading.js file in the same folder as your page to stream the entire page while data is being fetched. For example, to stream app/blog/page.js, add loading.js inside the app/blog folder. On navigation, the user will immediately see the layout and a loading state while the page is being rendered. The new content will automatically swap in once rendering is complete.
loading.tsx alternative to Suspense in Cache Components
You can use loading.tsx files instead of Suspense in JSX for Cache Components. The loading.tsx file puts the boundary at the segment edge, while inline Suspense lets you place it anywhere in the tree.
PageProps helper type for page components
PageProps is a globally available utility type that infers params and searchParams from your route structure for page components. It includes props for page components with the route path as a generic parameter, e.g., PageProps<'/blog/[slug]'>.
LayoutProps helper type for layout components
LayoutProps is a globally available utility type that infers children and named slots from your route structure for layout components. It includes props for layout components with the route path as a generic parameter, e.g., LayoutProps<'/dashboard'>. Named slots are folders like @analytics that appear as typed properties.
Example: Using PageProps helper
export default async function Page(props: PageProps<'/blog/[slug]'>) {\n const { slug } = await props.params\n return <h1>Blog post: {slug}</h1>\n}
Example: Using LayoutProps helper
export default function Layout(props: LayoutProps<'/dashboard'>) {\n return (\n <section>\n {props.children}\n {/* If you have app/dashboard/@analytics, it appears as a typed slot: */}\n {/* {props.analytics} */}\n </section>\n )\n}
When PageProps and LayoutProps helpers are generated
PageProps and LayoutProps are globally available helpers that are generated when running next dev, next build, or next typegen. No imports are required to use them.