Next.js Replace Next Head

verified codemod icon

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

Next.js
jscodeshift
Estimated time saving
5 minutes/occurrence
Change mode
Assistive
Applicability criteria

Next.js version higher or equal to 13.

Made by
Vercel
Vercel

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod next/13/replace-next-head
copy CLI command icon

Codemod VS Code extension:

intalling vs code extension tooltip icon
vs code logo
Run in VS Code

Description

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

Links for more info