fedallbest/joplin-notes
Watch
1
0
Fork
You've already forked joplin-notes
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
joplin-notes/joplin notion extension/Web Development/React/next/Theory.md
nm1 74ae93a96e initial
2026-11-04 00:33:23 +05:30

2 KiB
Raw Permalink Blame History

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