Video lectures

Database : NEON (https://neon.tech/)

ORM : DRIZZLE (https://orm.drizzle.team/)

1. create app

npx create-next-app@latest projectName

→ all components are server components by default to make them client side use “use client” on top.

→ npm run build for build command & npm run start to excute that dist folder

2. Routing

Screenshot 2024-12-18 at 12.28.06 AM.png

→ known as file based routing system

localhost:3000 → page.tsx of app folder
localhost:3000/about → page.tsx of about folder
localhost:3000/about → page.tsx of about folder

localhost:3000 → page.tsx of app folder localhost:3000/about → page.tsx of about folder localhost:3000/about → page.tsx of about folder

→ similarly the concept of Nested Dynamic Routing comes

→ catch all segments

use […slug] as folder name (or anyname with …)
this makes sure that any url with its routing have his page.tsx
E.g: inside app → docs and inside docs → […anyname] and inside this […anyname] a page.tsx. so any URL with /docs in it will have this page.tsx displayed like : /docs/feature1/review1

{ params } : {params: {slug : string[] }}

now this page.tsx will display for routes having /docs in it but not for /docs itself, to handle this we can do [[…slug]] (double [])

→ Private folders

A private folder indicates that it is a private implementation detail and should not be considered by the routing system
The folder and all its subfolders are excluded from routing
prefix the folder name with underscore E.g: [_secret]

→ Routing Metadata (for SEO optimisation)

page metadata > layout metadata
static metadata

import {Metadata} from "next";
export const metadata : Metadata = {
	title = "About Codevolution",
	description = 'xyz'
}

Screenshot 2024-12-18 at 2.53.16 AM.png

dynamic metadata
- helpful in /product/[productId]

import {Metadata} from "next";
// typescript shit
type Props = {
	params : {
		productId : string;
	}
}

export const generateMetadata = ({ params } : Props) : Metadata => {
	return {
		title : `Product ${params.productId}`,
		description : `description about Product ${params.productId}`
	}
}

now, title can be an object having

title = {
	absolute : "sankalp",
	default : "notes",
	template : "%s | gupta"
}

those children who don’t have metadata title will have default of their parent layout as title.
absolute is for pages
those children who have metadata title will follow template
- E.g let about page have title as ‘about’, so its title become
<aside> 👉

about | gupta

</aside>
if child page have absolute title than template will be ignored

→ nested routing

Screenshot 2024-12-18 at 12.41.51 AM.png

→ Dynamic Routes

use [Id] as folder name(Square brackets)
get id using params for example :
there is a [productId] folder is src/app/product, so its page.tsx will looks like.

export default function productDetails({ params } : {params: {productId: string }}){
	return (
		<h1>deatils about {params.**productId**}</h1> 
		//params.____ should be same as dynamic folder name
	)
}

→ 404 page

create a file named not-found.tsx in app folder to make it available to all routes but every route can have their own 404 page
nextjs provides a default 404 page
we can also invoke 404 page

import { notFound } from "next/navigation";

// based on some conditions call notFound() function
if(a>b){
	notFound();
}

→ File Colocation

if dashboard route do not have page.tsx, this route will give 404 page in response no matter how many pages are defined in it.
also default function of page.tsx is displayed as output so to show other functions just call them from default function

→ Route Groups(for good folder structure)

application:
- app folder having register, login, forget-password routes but it becomes hard to manage them
- solution can be adding them to Auth folder but this will create long urls like /auth/login etc
so to solve this nextjs uses Route Groups
simply use (auth) {or (anyName)} and auth will be omitted from urls

→ Layouts(for consistent ui)

layouts don’t change common ui components, it just loads the children without change common ui.
E.g: a input for email is present in both /register and /login routes. if they are in a layout, navigating in one another will have no effect on this input value.
every nextjs application must have Root layout in app folder
page is ui that is unique to a route but layout is ui that can be shared between multiple pages
application:
- header (in layout) → page specify ui footer (in layout)

Screenshot 2024-12-18 at 1.49.55 AM.png

→ nested layouts(similar concept, self explanatory)

in here we can see that both layouts are visible

Screenshot 2024-12-18 at 1.55.11 AM.png

3. Navigation

→ ui navigation(using buttons/links)

import Link from "next/link";
export default function Home(){
	return (
		<Link href='/about'> About </Link> // this pushes new screen on top of our stack
		<Link href='/login' replace> Login </Link> // this replaces top screen with new screen
	)
}