🚀 Overview of Next.js

Next.js is a React framework that enables server-side rendering (SSR), static site generation (SSG), API routes, and more to build fast and scalable applications.

📌 1. Why Use Next.js?

✔️ Hybrid Rendering – Supports SSG, SSR, and CSR
✔️ Automatic Code Splitting – Loads only the necessary JavaScript
✔️ API Routes – Build backend functionality within Next.js
✔️ Built-in SEO – Optimized for search engines
✔️ Fast Performance – Uses prefetching and caching
✔️ File-Based Routing – No need for React Router

📌 2. Installation and Setup

Run the following command to create a Next.js project:

sh
npx create-next-app@latest my-next-app<h1>About Pageimport { useRouter } from "next/router";export default function BlogPost() {  const { id } = useRouter().query;  return <h1>Blog Post: {id}export async function getServerSideProps() {  return { props: { time: new Date().toISOString() } };}

✅ Pre-renders on every request

📌 6. API Routes (Backend in Next.js)

Create an API route in pages/api/hello.js:

javascript
export default function handler(req, res) {  res.status(200).json({ message: "Hello API" });}

✅ Accessible at /api/hello

📌 7. Styling in Next.js

✔️ CSS Modules
✔️ Tailwind CSS
✔️ Global CSS

javascript
import styles from "../styles/Home.module.css";export default function Home() {  return <h1 className={styles.title}>Hello Next.js</h1>;}

📌 8. Deployment

Deploy Next.js apps easily on Vercel:

sh
vercel

✅ Automatic CI/CD & performance optimizations

📌 9. When to Use Next.js?

✔️ SEO-friendly websites (blogs, marketing pages)
✔️ E-commerce & dashboards
✔️ Hybrid applications (SSG + SSR)