A small library that transforms structured, Next.js Metadata-like objects into metadata compatible with TanStack Router/Start, helping you manage document heads type-safely.
TanStack Start is awesome, but there’s one thing I’m not fully satisfied with: its document head management, which I think still falls short of what Next.js offers.
Simply assigning strings to name or content is straightforward and easy to understand, but it lacks sufficient autocompletion and makes it hard to catch mistakes, which does not offer a good DX.
To improve this situation, I created a library that enables you to manage metadata as more structured objects and provides type-safe autocompletion.
Here's an example of how you can use tanstack-meta.
While it makes the code slightly longer in this case, it provides a more organized structure and enables richer IDE type completion:
Without tanstack-meta |
With tanstack-meta |
|---|---|
 |
 |
Install tanstack-meta:
npm install tanstack-meta@latestImport generateMetadata from tanstack-meta and use it in your route's head function:
import { createFileRoute } from "@tanstack/react-router";
import { generateMetadata } from "tanstack-meta";
export const Route = createFileRoute("/")({
component: Home,
head: () => {
const { meta, links } = generateMetadata({
title: "TanStack Start App",
description: "An example app built with TanStack Start.",
});
return { meta, links };
},
})You can generally use it the same way as Next.js’s generateMetadata function, but keep the following points in mind:
- Features that work across routes are not supported
titleonly accepts a plain stringmetadataBaseis not available
tanstack-meta provides a function called generateMetadata that generates the document metadata compatible with TanStack Router/Start's head function.
An object containing the document metadata to be set.
An object containing meta and links properties, which can be used as the return value of the head function.
charSettitledescriptionapplicationNameauthorsgeneratorreferrerviewportotherrobotskeywordspaginationopenGraphtwitterfacebookpinterestmanifesticonsappleWebAppappLinksitunesalternatesverificationcreatorpublisherabstractarchivesassetsbookmarkscategoryclassificationformatDetection