Next/13/Replace Next Head

Last update

Jul 24, 2024

This codemod 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.

Example

Before:

// 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 (<>
	<Head>
		<title>title</title>
	</Head>
	<NestedComponent />
	</>)
}

// nested component file
import Head from 'next/head';

export default function NestedComponent() {
	return <Head>
	<meta name="description" content="description" />
	</Head>
}

export default NestedComponent;

After:

// 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 />;
}

This codemod generates a static metadata object based on meta tags managed by next/head.

Example

Before:

// 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 (<>
	<Head>
		<title>title</title>
	</Head>
	<NestedComponent />
	</>)
}

// nested component file
import Head from 'next/head';

export default function NestedComponent() {
	return <Head>
	<meta name="description" content="description" />
	</Head>
}

export default NestedComponent;

After:

// 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

Get Started Now