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:

Image description

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.