Day 1 of Learning Next js -Introduction

Rohit Bhetal — Sat, 15 Mar 2025 07:50:56 +0000

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.

Forem: Rohit Bhetal

Day 1 of Learning Next js -Introduction

Introduction

Create Next app

React Server Components(RSC)