Next/13/Upsert Use Client Directive

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