55 lines
2 KiB
Markdown
55 lines
2 KiB
Markdown
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
|
|
|