Component and JSX - Next Js App Directory 13.4

What is Component?

The simple mean of Component is The Function that return HTML

const Button = () => <button>Click Me</button>;

What is JSX?

JSX (JavaScript XML) is syntax extension that allow you writing component in React/Next

Component in Next js

We have 2 Component in Next js, Client and Server Component. By default, all component in Next js App Router is Server Component

// This will be server component
const Button = () => <button>Click Me</button>;

So, how to create client component? Its simple! Just add "use client" on the top of page

'use client';

// This will be client component
const Button = () => <button>Click Me</button>;

Fyi, server component is only exist in Next js. So we havn't server component in React js

See full documentation about Server Component and Client Component