Posts

Routing

Image
 Nextjs implements a file system based routing mechanisim URLs paths thaat user can access in the browser are defined by Files and Folders in the code base. Routing Conventions All routes must be placed inside the app folder Every file that has corresponds to a route must be names page.js ot page.tsx Every folder corresponds to a path segment in the browser URL.        FileBased Routing --->File and Folder structure determines the Routes                The page.js file is in app folder maps to the domain                            http://localhost:3000/profile         http://localhost:3000/about     

FolderStructure

FOLDERS .next-------> Generated when we either run or build scripts,from this folder nextjs application is served.  Public-------> Contains static assets to be served such as svgs,images.   Src-----------> Working directory. Files 1. next.config.js ----> for NextJS 2.Package-lock.json ---->Ensures consistent installation of dependencies. 3. gitignore------> Version control. 4.Package.json ---->Contains project dependencies an scripts   "scripts" : {     "dev" : "next dev" ,------>To start app in develpoment mode     "build" : "next build" ,--->Build app for production usage     "start" : "next start" ,---->To start the app production server     "lint" : "next lint" , ------>setup built in esling configuration.   }
 What is NextJS?

Basics of NextJS

 Why NextJS? Simplifies the process of Building webapplication for Production   Routing Api Routes Rendering- Supports both Client-sideRendering and ServerSideRendering. DataFetching Styling-Supports preffered sytling methods 6.Dev and Prod system