🧱 Next.js Component Fundamentals (with TypeScript)

This file walks through the correct structure, terminology, and thinking behind creating components in a modern Next.js App Router project using TypeScript (.tsx).

---

✅ What Is a Component?

A component in React (and by extension, Next.js) is a JavaScript/TypeScript function that returns JSX.

There are two main types:

1. Server Components (Default in Next.js app/ directory)

export default function MyComponent() {
	return <div>Hello World</div>;
}

• Renders on the server
• No need for use client
• Cannot use hooks like useState, useEffect

2. Client Components (Interactive/UI-based)

"use client";

export default function MyButton() {
	const [clicked, setClicked] = useState(false);
	return <button onClick={() => setClicked(true)}>Click me</button>;
}

• Must include 'use client'
• Allows use of hooks
• Runs in the browser

---

🧠 Proper Terminology

When you see:

export default function AboutPage() {
  return (...)
}

This is called a:

✅ Default Exported React Functional Component (RFC)

• React: Uses JSX/TSX and returns UI
• Functional: It's a JavaScript function, not a class
• Component: Reusable UI building block
• Default Export: Exported as the main module

You may also hear this referred to as: RFC, FC, Page Component, or App Route Component

---

📄 File Placement Rules (Best Practices)

Folder	Purpose
app/	Page routes — auto-handled by Next.js
components/	Reusable UI components (buttons, layouts, etc.)
lib/	Utilities, helpers, API fetchers
styles/	Tailwind/global styles

---

✍️ Sample Component Template (Reusable)

// src/components/ProfileCard.tsx

interface ProfileCardProps {
	name: string;
	bio: string;
}

export default function ProfileCard({ name, bio }: ProfileCardProps) {
	return (
		<div className="border p-4 rounded-md shadow-sm">
			<h2 className="text-lg font-semibold">{name}</h2>
			<p className="text-sm text-muted-foreground">{bio}</p>
		</div>
	);
}

---

🧠 Concept You’re Practicing:

Writing a typed functional component with default export in a framework that auto-routes page files.

This is the core building block of every scalable modern web app built with React + Next.js.