Next.js Upsert Use Client Directive

verified codemod icon

The automation will look for identifiers and string literals common for files that contain client-side code, such as React hooks or event handlers.

Next.js
ts-morph
Estimated time saving
5 minutes/occurrence
Change mode
Assistive
Applicability criteria

Next.js version is greater or equal to 13.4.

Made by
Codemod.com
Codemod.com

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod next/13/upsert-use-client-directive
copy CLI command icon

Codemod VS Code extension:

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

Description

Since Next.js 13.4, you can mark the files that contain only client-side code with the use client directive at the top.

The codemod will look for identifiers and string literals common for files that contain client-side code, such as React hooks or event handlers. On the other hand, it will not upsert any directive should it spot elements indicating server-side code.

The codemod will not remove the existing use client directive even if it would suggest otherwise due to the code in question.

Example

Before

import { useState } from 'react';

export default function Page() {
	const [x, setX] = useState('');

	return x;
}

After

'use client';
import { useState } from 'react';

export default function Page() {
	const [x, setX] = useState('');

	return x;
}