Metadata and head
metadata, generateMetadata, viewport and generateViewport keep their Next.js names and their fields.
metadata, generateMetadata, viewport and generateViewport keep their Next.js names and their fields. A route or
layout module exports them, and Dusk merges the chain outermost first, with Next's title template rules: a page title is
wrapped in the layout's template, absolute skips it, and every other field replaces the one above. The server
writes the merged head before the body, and a navigation replaces it on the client. generateMetadata receives
params, search, parent and the loader data, so it reads data the loader already loaded. The complete rules are in
Dusk metadata.
export const generateMetadata = ({ loaderData }) => ({
title: `${loaderData.title} | Blog`,
description: loaderData.body,
openGraph: { title: loaderData.title },
});
Two Next.js shapes change. params is a plain object, not a promise, so there is no await params. And the search
argument is the raw query record, which is what Next's searchParams is. The head export still works (it returns
tags, and script is refused); the metadata tags win over it for the same tag.
File conventions are explicit rather than discovered by name. A sitemap, a robots file and a manifest are API routes
that export GET from sitemapRoute, robotsRoute and manifestRoute (@shadow-js/dusk/server), which receive the
request event, so they can answer per host (a status host, say). A social image is an API route that returns an
ImageResponse (@shadow-js/dusk/og). Static files (icon.svg, favicon.ico, robots.txt) stay in public/. The
exception is the social images: opengraph-image and twitter-image, as a static file (.png, .jpg, .jpeg or .gif,
with an optional .alt.txt beside it) or as a module (.tsx, .ts, ...) that returns the tree, are discovered in src/,
in src/routes/ and in every route folder, and the pages get their tags, as in Next.js. A static file gives its size, type
and alt text (see Static social images). A module such as Next's
app/blog/[slug]/opengraph-image.tsx is served at the folder's URL with the params, and its alt, size and
contentType exports write the tags (see Dynamic social images).