new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Next.js App Router · all subjects

layouts, loading & error handling

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Suspense fallback with runtime APIs

A fallback may access cookies(), headers(), or the full URL. At build time, the fallback itself suspends, and a Suspense boundary further up the tree is needed. For a link with prefetch={true}, per-link prefetching makes URL data available before navigation, so the fallback can become part of the prefetched UI. Cached values like timestamps or data fetches can sit directly inside the fallback.

Root layout children prop structure

Layouts must accept a children prop of type React.ReactNode. This will be populated with nested layouts or pages.

How to optimize dynamic routes without loading.tsx

When navigating to a dynamic route without loading.tsx, the client must wait for the server response before showing the result. To improve this, add loading.tsx to enable partial prefetching, trigger immediate navigation, and display a loading UI while the route renders.

loading.tsx automatically wraps page content in Suspense

Behind the scenes, Next.js automatically wraps page.tsx contents in a <Suspense> boundary. The prefetched fallback UI from loading.tsx will be shown while the route is loading, and swapped for the actual content once ready.

Benefits of using loading.tsx

Using loading.tsx provides: immediate navigation and visual feedback for the user, shared layouts remain interactive and navigation is interruptible, and improved Core Web Vitals including TTFB (Time to First Byte), FCP (First Contentful Paint), and TTI (Time to Interactive).

Give your agent this brain