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.