file conventions & metadata

7 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.tsx file for streaming and partial prefetching

Creating a loading.tsx file in a route folder enables streaming and partial prefetching for dynamic routes. Next.js automatically wraps the 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 loading.tsx

The benefits of loading.tsx include: immediate navigation and visual feedback for the user, shared layouts remain interactive and navigation is interruptible, and improved Core Web Vitals including TTFB, FCP, and TTI.

Use loading.js to wrap segment in Suspense for streaming routes

Add a `loading.js` file in a route segment directory to wrap the whole segment in a `<Suspense>` boundary. Next.js prerenders the loading fallback as the route's static shell, while params and data fetching work runs at request time. This converts a blocking error into a partially prerendered route.

Draft Mode cookie name

draft.enable() sets a cookie named __prerender_bypass. Subsequent requests that carry this cookie skip every cache layer.

Creating a Draft Mode Route Handler

Create a Route Handler at any path (for example app/api/draft/route.ts) that exports an async GET function. Inside it, import draftMode from 'next/headers', call await draftMode(), then call draft.enable(). The handler can validate a secret and slug parameter from searchParams, verify the slug exists in the CMS, then call draft.enable() and redirect to the target slug.

Draft URL format for CMS integration

The draft URL sent by the CMS to the Route Handler should follow the format: https://<your-site>/api/draft?secret=<token>&slug=<path>. The <your-site> is the deployment domain, <token> is the shared secret, and <path> is the path to preview. For example: &slug=/posts/one or with dynamic variables: &slug=/posts/{entry.fields.slug}.

Draft Mode with GET vs POST

GET is meant to be a safe, read-only method. Operations that affect future requests, like enabling Draft Mode via a cookie, should use POST. The entry handler uses GET because a CMS preview integration opens the URL in a new browser tab, which is a GET request. The exit flow should use POST via a Server Action or POST Route Handler to be semantically correct.

Give your agent this brain