What is NEXT JS | How to Create REACT APP using NEXT JS

 

What is Next.js?

Next.js is a React framework built on top of React that helps you build fast, SEO-friendly, and production-ready web applications.

It provides:

• ✅ Server-Side Rendering (SSR)

• ✅ Static Site Generation (SSG)

• ✅ File-based routing

• ✅ API routes (backend inside same project)

• ✅ Image optimization

• ✅ Better performance & SEO

Step-by-Step: Create a React App Using Next.js

Step 1: Install Node.js

Step 2: Create Next.js App

npx create-next-app@latest my-next-app

✔ TypeScript? → Yes/No (your choice)

✔ ESLint? → Yes

✔ Tailwind? → Optional

✔ App Router? → Yes (Recommended)

cd my-next-app

Step 3: Run the Application

npm run dev

📁 Project Structure (Important)

my-next-app/
│── app/        → Pages (App Router)
│── public/     → Images & static files
│── components/ → Reusable components
│── package.json


If using App Router:

app/page.js → Home Page

app/about/page.js → About Page

🧩 Step 4: Create a New Page

Create folder:
app/contact/page.js

export default function Contact() {
  return <h1>Contact Page</h1>;
}

Step 5: Create a Component

components/Header.js

export default function Header() {
  return <h2>This is Header</h2>;
}

step6: use in page

import Header from "../components/Header";

export default function Home() {
  return (
    <>
      <Header />
      <h1>Welcome to Next.js</h1>
    </>
  );
}


Step 6: Create API Route (Backend Inside Next.js)

app/api/hello/route.js

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: "Hello API" });
}

http://localhost:3000/api/hello

Rendering Types in Next.js
Type
Meaning
SSR
Page renders on server every request
SSG
Page builds at build time
CSR
Client-side rendering like normal React