Day 1 of Learning Next js -Introduction

Introduction Why learn Next.js It simplifies production ready building of web apps Routing: No third party Routing packages Api routes: We can build frontend and backend code in same project Rendering:It supports both client side and server side rendering support Data Fetching: It supports inbuilt async function Styling: Supports css , tailwind and other styling libraries for better styling Optimization:Provides optimization for images,fonts,scripts etc enhancing user experience Dev and prod build system: Comes with optimized dev and prod built system,No more dealing with complex configuration Create Next app npx create-next-app@latest File Structure: Package.json File: Its Pretty much Similar to Normal react Project with eslint and build scripts Different others files and folder get generated automatically like node_modules, .next which is a build file for the next app and the app file.We will talk about others in future posts. React Server Components(RSC) Its a new architecture that was introduced by the React team and quicklu adopted by next.js.Its divided into two distinct types: Server Components Client Components By default next.js treats all components as a server components.This components can performs server side tasks like fetching data and fs operations etc.The trade-off is that they cant use react hooks or handle user interaction.For creation of client component we have to use "use client"; on top of your file.It wont be able to perform server side task, think of it as traditional react components you're already familiar with.

Mar 15, 2025 - 09:34

Introduction

Why learn Next.js
It simplifies production ready building of web apps

Routing: No third party Routing packages
Api routes: We can build frontend and backend code in same project
Rendering:It supports both client side and server side rendering support
Data Fetching: It supports inbuilt async function
Styling: Supports css , tailwind and other styling libraries for better styling
Optimization:Provides optimization for images,fonts,scripts etc enhancing user experience
Dev and prod build system: Comes with optimized dev and prod built system,No more dealing with complex configuration

Create Next app

npx create-next-app@latest

File Structure:

Package.json File:
Its Pretty much Similar to Normal react Project with eslint and build scripts

Different others files and folder get generated automatically like node_modules, .next which is a build file for the next app and the app file.We will talk about others in future posts.

React Server Components(RSC)

Its a new architecture that was introduced by the React team and quicklu adopted by next.js.Its divided into two distinct types:

Server Components
Client Components

By default next.js treats all components as a server components.This components can performs server side tasks like fetching data and fs operations etc.The trade-off is that they cant use react hooks or handle user interaction.For creation of client component we have to use

"use client";

on top of your file.It wont be able to perform server side task, think of it as traditional react components you're already familiar with.