Theory
https://www.youtube.com/watch?v=r8nXMA_pf0w : importance of nextjs

https://nextjs-doc.surge.sh/docs/next/Theory

- Uses react to building user interfaces
- Extra features are routing, optimized rendering, data fetching, bundling , compiling and more


Why Learn nextjs
1.  **Routing**: file based routing so no need to install third party routng packages and configure it.
2.  **API Routes**: api supports a nextjs is full stack framework
3.  **Rendering** : both client and server side rendering. 
4.  Styling : Supports css modules, tailwind css
5.  Optimization : optimization for images, fonts and scripts

### Project Structure

- package.json : contains dependencies and scripts
- next.config.js : for nextjs
 

**Folders**
- .next : this folder generated when we run dev or build scripts and using this we get output. its included in `.gitignore`
- public :holds static assets to be served like images and SVGs
- src : most important folder. It contains app folder inside it by default which is also called app router. Inside it, there r some files.
  - globals.css : like index.css in react
  - layout.js : like index.js
  - page.js : like App.js
- Flow of control
  package.json -> layout.js -> page.js -> browser
  
  
 
**React Server Components**
1. Server Components
   - Default component
   - Ability to run task like reading file or fetching data from data base.
   - They cant use hooks or handle user interaction.
2. Client Components
  - To create a Client Component, add `use client` at top of component file
  - They cant read files but can use hooks and manage user interaction
 
 
**Routing**
- It has file file system based routing
- URL paths which user can access in browser are defined by files and folders in your codebase

 
**Framwork Conventions**
1. Routes in the app folder
2. Every file corresponding to the routes must be placed inside the page.jsx or page.tsx
3. Every folder corresponds to a path segment in the browser URL.
It has convention over configuration process for routing