README.md

Please refer to the wiki page https://github.com/SudirKrishnaaRS/NextJS-15-CC/wiki to view the detailed chapter wise notes

---

Intro to NextJS 15

Why NextJs?

What is NextJs?

What this Repo consist of and covers

---

React Server Components

Server Components vs Client Components

When to use? Server or Client Component (Practical use cases)

---

Routing ‐ App Router

Basic Files

page.tsx :

• Consists of the JSX/TSX responsible for the UI

layout.tsx :

• Layouts allow you to define Ul that is shared between multiple pages
• Useful for elements like headers, footers, or navigation menus that you want to appear consistently across different routes
• When navigating between pages that share a layout, only the page components update - the layout doesn't re-render
• This leads to improved performance and a smoother user experience
• They also help reduce code duplication and improve the overall structure of your project

Basic Route

Folder Structure : App -> about (Folder) -> page.tsx (file)

Route : /about

Nested Route

Folder Structure : App -> blog (Folder) -> first-post (Folder) -> page.tsx (file)

Route : /blog/first-post

Dynamic Route

Symbol: [ ]

Folder Structure : App -> products (Folder) -> [id] (Folder) -> page.tsx (file)

Route : /products/macbook

Accessing the URL params from a dynamic route :

Categorise/Group related Routes (without affecting routing functionality)

Symbol: ( )

Folder Structure : App -> (auth) (Folder)

-> login (Folder) -> page.tsx (file)

-> register (Folder) -> page.tsx (file)

-> forgot-password (Folder) -> page.tsx (file)

Route :

/register

/login

/forgot-password

NOTE: auth will not be part of the route as this helps in codebase maintenance to categorise/Group related Routes

<Link>

usePathname() hook - Determine the current pathname to apply the active style-class

The below example shows how to apply active styles based on the current URL pathname using Tailwind CSS

useRouter() hook - Programaticaly handle route

On click of Go Home button navigates to the home page

---

Data Fetching

HINT (V.Easy Concept): In the Client Component, you can use async-await only inside useEffect(), whereas in Server Component you can make the function itself async and then directly await (Refer to the below code files to understand more)

Data fetching in Client Component

Folder Structure:

Code:

Output:

---

Data fetching in Server Component

File Naming:

NOTE: below file names are the naming convention so that NextJS understands and maps the file based on the API fetch status - loading / failure / success

• page.tsx -> Shown when the API data is fetched successfully

• loading.tsx -> Shown when an API is loading

• error.tsx -> Shown when there's an error while fetching an API fails

Folder Structure:

Code:

• page.tsx

• loading.tsx

• error.tsx

Output:

• API Success:

• API Loading:

• API Error:

---

Which is Good for Data Fetching - Client or Server Components?

Server Component Advantages and UseCase

Client Component UseCase

---

Route Handlers ‐ Backend

/users

File Naming Convention: route.ts

GET -> getUsers

Folder Structure:

Code:

Thunder Client Output:

---

POST -> addUser

Folder Structure: Same file as above

Code:

Thunder Client Output:

Adding a user via POST

Checking if it reflects in the users array by hitting the GET

---

/users/id

File Naming Convention: [id]/route.ts

GET -> getUserById

Folder Structure:

Code:

Thunder Client Output:

---

---

PATCH -> editUserbyId

Folder Structure: Same file as above

Code:

Thunder Client Output:

Checking if it reflects in the users array by hitting the GET

---

DELETE -> deleteUserbyId

Folder Structure: Same file as above

Code:

Thunder Client Output:

Checking if it reflects in the users array by hitting the GET

---

Server Actions

Difficulty Level: Easy

Folder Structure:

Code:

Below is the example of form handling via Server Action to add a User (via API - POST method)

Output:

---

---

Running the Project

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.