initial

joplin notion extension/Web Development/React/next/Theory.md

@@ -0,0 +1,55 @@
+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
+