Next.js / Intermediate: authority, freshness and route experience / Lesson 12

Metadata, assets and accessible route experience

Publish deliberate metadata and optimized assets while preserving privacy, layout stability and usable navigation.

About 4 min readContent reviewed 2026-10-28

On this page

Lesson goals

Separate public route metadata from private source details.
Explain image dimensions, approved remote sources and accessible feedback.

Metadata is another public representation

Titles, descriptions, canonical URLs and social previews can be read by crawlers or shared outside the current UI. Do not place private course names, user identifiers or internal errors there merely because a page requires sign-in. Static metadata and generateMetadata have different execution needs, and dynamic metadata must use the same eligibility policy as the content. Review inherited layout metadata and route overrides as one composed result. A useful visible heading and a document title serve related but distinct users; keep both meaningful rather than generating every page with one generic product title.

Define a small public metadata surface

The fragment declares a public course-library title and description. It does not fetch private data or imply a canonical origin. A real application should use a trusted metadata base for absolute social and canonical URLs, not an unchecked Host header. If generateMetadata awaits params or source data, apply the selected asynchronous API contract and handle absence safely. No metadata was rendered, crawled or evaluated here. Testing only the object literal cannot prove the final head output, inheritance or streaming metadata behavior of a deployed route.

typescript Illustrative public metadata

import type {Metadata} from "next";
export const metadata:Metadata={
  title:"Public course library",
  description:"Browse the synthetic public learning catalog."
};

The values are synthetic and public-safe. No Next compiler, head rendering or crawler was run.

Optimize assets under an explicit source and layout contract

next/image can help serve appropriately sized images, but the source, alt text, dimensions or fill layout and sizes still need deliberate choices. Reserve layout space to reduce shifts, and use meaningful alternative text for informative images while treating decoration appropriately. Remote patterns should allow only intended hosts and paths rather than turning image optimization into an arbitrary retrieval capability. Hosting and static-export modes can change which optimization service is available. next/font and local font assets also need a reviewed build/source policy; avoid assuming an offline build can fetch any external asset during compilation.

Build canonical public URLs from a trusted origin

The local function combines one fixed synthetic HTTPS origin with an encoded public course slug. It does not use request headers or caller-controlled origins. The slug still needs the application’s validation contract before this function is called. URL encoding preserves path structure, but does not authorize the course or guarantee the metadata should be public. The assertions check deterministic output only and open no network connection. A real metadata test should also verify the intended base path, locale and canonical query policy so filters or private session parameters do not accidentally become public share URLs.

javascript Complete offline public-URL constructor

function publicUrl(slug) {
  return new URL(`/courses/${encodeURIComponent(slug)}`,"https://learn.example.invalid").href;
}
console.assert(publicUrl("server-components") === "https://learn.example.invalid/courses/server-components");
console.assert(publicUrl("a/b").includes("a%2Fb"));

The fixed origin is retained and a slash inside the value is encoded. No fetch, redirect or metadata render occurs.

Verify complete route use, not only visual output

Provide semantic headings, labeled form controls, keyboard-usable links and associated error feedback. Loading and navigation transitions should preserve understandable focus and status communication rather than replacing the whole screen without context. A fast image score does not prove the user can complete the task. Test text direction and meaningful Arabic labels as well as English. This course runs the URL constructor only; image optimization, fonts, metadata composition, screen-reader behavior and browser layout were not exercised. Real accessibility and asset verification needs the intended build/browser environment with authorized synthetic data and explicit limits in the report.

Common errors and fixes

Private details appear in a social preview

Why it happens: Metadata was not reviewed as a public representation.
How to fix it: Apply audience policy and narrow public metadata projection.
Prevent it next time: Test title, description and preview output under denied access.

An image causes large layout shifts

Why it happens: The layout did not reserve the intended image space.
How to fix it: Use correct dimensions or a well-defined fill container and sizes.
Prevent it next time: Verify actual responsive layout with representative assets.

A canonical link trusts a caller-supplied host

Why it happens: Request metadata became public-origin authority.
How to fix it: Use a trusted configured origin and explicit path policy.
Prevent it next time: Test alternate host claims without making external requests.

Check your understanding

1. Does a fixed-origin URL constructor authorize publishing that course title?

Show worked solution

No. It builds a deterministic URL under a chosen origin. Whether the course and title may appear in public metadata requires separate object and audience policy. Keep the URL test, then verify the actual rendered metadata for eligible, denied and absent records under the selected route contract.

2. Why does using next/image not finish the accessibility or performance review?