Next/13/Replace Next Head


Last update

Apr 23, 2024

Generates a static metadata object based on meta tags managed by next/head.

The codemod checks all the child components used in a page file and extracts all the meta tags defined within the <Head> component. Such tags are then moved to the very page file alongside the dependencies of the tags.



// a page file
import Meta from '../../components/a.tsx';
export default function Page() {
return <Meta />;
// component file
import Head from 'next/head';
import NestedComponent from '../components/b.tsx';
export default function Meta() {
return (<>
<NestedComponent />
// nested component file
import Head from 'next/head';
export default function NestedComponent() {
return <Head>
<meta name="description" content="description" />
export default NestedComponent;


// page file
import { Metadata } from 'next';
import Meta from '../../components/a.tsx';
export const metadata: Metadata = {
title: `title`,
description: 'description',
export default function Page() {
return <Meta />;

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

background illustrationGet Started Now