next.js error reporting point

1. Type "{ children: ReactNode; }" does not have the same attributes as type "IntrinsicAttributes".

Solution
1. Probably the referenced component has the same name as this component. Just change it to another one.

2. Type 'void[]' cannot be assigned to type 'ReactNode'?

solution

The navs I defined at the beginning are array types.

In React, void[] is an array, it has no elements. Since it has no elements, it cannot be assigned to the ReactNode type.

In React, ReactNode is the type label for all allowed child nodes. The two types are incompatible because ReactNode is a broader type that can contain multiple types of values, and the type you provide is an array of objects.

Therefore, you cannot directly assign an array without elements (void[]) to ReactNode[], because it may not be recognized as an array.

After modification:

3.useRouter only works in Client Components. Add the “use client” directive at the top of the file to use it.

Solution
By adding {/* use client */} at the top of the file, you tell Next.js that the component needs to run on the client so that useRouter can be used correctly.

useRouter can only be used in Next.js applications using the client. This usually means that useRouter cannot be used in server-side rendered (SSR) components.

4. Property 'target' does not exist on type 'HTMLInputElement'.

Solution

Configure ESLint rules

In the .eslintrc.json file: