Next.js & React
Component
What It Is
A reusable piece of UI that can be combined with others
Analogy
LEGO blocks — each one is self-contained, and you combine them to build something bigger
Try It Out
Component Tree
<App />
<Header />
<Logo />
<Nav />
<Main />
<Card />
<Card />
Components nest inside each other like LEGO blocks
Related Terms in Next.js & React
Framework
A food truck that comes with the kitchen already set up — you just add your recipes
Props
Instructions given when you delegate a task — "here's what you need to know"
State
The current mood of your restaurant — busy, slow, sold out — and the sign you flip accordingly
Server-Side Rendering (SSR)
Cooking the meal in the kitchen before bringing it to the table, rather than cooking at the table