## What is Next.js? [Next.js](/courses/nextjs) is a **full-stack [React](/courses/reactjs) framework** built by Vercel. Think of [React](/courses/reactjs) as the engine of a car. It's powerful, flexible, and does an amazing job of building user interfaces. But an engine alone isn't a complete car. You still need routing, servers, optimization, SEO, data fetching, deployment setup, and a bunch of other things before you have a production-ready application. That's where **[Next.js](/courses/nextjs) enters the chat.** 😎 Next.js takes React and adds the missing pieces needed to build complete web applications. With Next.js, you get things like: - [File-based routing](https://asif.to/nextjs/file-based-routing-in-the-app-router) - [Server-side rendering](https://asif.to/nextjs/server-components-vs-client-components) - [Static generation](https://asif.to/nextjs/static-generation-ssr-and-isr) - [Backend APIs](https://asif.to/nextjs/api-routes-with-route-handlers) - [Server Components](/courses/nextjs) - [Image optimization](https://asif.to/nextjs/next-js-image-optimization) - [SEO features](https://asif.to/nextjs/metadata-and-seo-in-next-js) - Automatic code splitting - Production optimizations And most of this works without installing ten different libraries just to get started. --- ## React vs Next.js: Library vs Framework React is a **library**. Next.js is a **framework built on top of React**. That difference matters. With React, you usually decide almost everything yourself: - Which router should I use? - How should I fetch data? - Where should my backend live? - How should I optimize images? - How should I handle SEO? - How should I structure the project? React basically says: > "Here's the UI toolkit. Build whatever you want." Next.js is more like: > "Here's a complete structure. Follow these conventions and I'll handle a lot of the boring stuff for you." Next.js gives you an opinionated architecture with specific folders, files, and conventions. In return, it automatically handles a lot of the complicated plumbing such as: - Routing - Bundling - Compilation - Rendering - Code splitting - Server logic - Performance optimizations Less configuration. More building. --- ## Why Not Just Use Plain React? You absolutely *can* build amazing applications using React with tools like Vite. But traditional React applications are commonly built as **Client-Side Rendered (CSR)** apps. In a CSR application, the browser initially receives something similar to this: ```html

```` Not exactly exciting. 😅 The browser then downloads your [JavaScript](/courses/javascript) bundle, runs React, fetches data, and finally renders the page. That works. But for larger production applications, it can create a few problems. Next.js was designed to solve many of them. --- ## 1. Better SEO Imagine Google visits your website. With a traditional client-rendered React page, the initial [HTML](/courses/html) might contain almost nothing. ```html

``` The actual content appears only after [JavaScript](/courses/javascript) runs. Modern search engines like Google have become much better at processing JavaScript, but pre-rendered [HTML](/courses/html) is still extremely useful for: * Search engine crawling * Faster content discovery * Social media previews * Sharing links * SEO performance Next.js can generate the page's HTML on the server before sending it to the browser. So instead of receiving an empty container, crawlers can receive actual page content. For example: ```html

Learn Next.js

A beginner-friendly Next.js course.

``` Much better. Your content is already there. --- ## 2. Faster Initial Page Load In a client-side React application, the browser may need to: 1. Download HTML 2. Download JavaScript 3. Parse JavaScript 4. Execute React 5. Fetch data 6. Render the UI That's quite a to-do list before the user even sees the page. 💀 Next.js can render content on the server and send useful HTML immediately. The user can start seeing the page while JavaScript continues loading. This can significantly improve the perceived loading experience, especially for users on slower devices or networks. --- ## 3. Routing Without the Extra Drama In many React applications, routing requires installing another library such as: ```bash npm install react-router-dom ``` Then you configure routes manually. Next.js takes a different approach. Your **folder structure becomes your routing system**. For example: ```text app/ ├── page.js ├── about/ │ └── page.js └── contact/ └── page.js ``` Automatically becomes: ```text / /about /contact ``` No giant route configuration file. Create a folder. Add `page.js`. Boom. Route created. 🚀 We'll explore this properly in the routing chapter. --- ## 4. You Can Build Backend Logic Too A React frontend often talks to a separate backend application. For example: ```text React Frontend ↓ Express API ↓ MongoDB ``` That's a perfectly valid architecture. But sometimes you don't need two separate projects. Next.js allows you to write backend logic inside the same application using features such as: * Route Handlers * Server Actions * [Server Components](/courses/nextjs) Your architecture can look like: ```text Next.js Application ↓ Server Logic ↓ Database ``` Frontend and backend logic can live in the same project. That's one reason Next.js is often called a **full-stack React framework**. --- ## The Ultimate Comparison Here's the quick version. | Feature / Problem | Plain React (Vite / CRA) | Next.js ([App Router](/courses/nextjs)) | | ---------------------- | ---------------------------------- | ------------------------------------ | | **SEO & Crawlers** | Usually client-rendered | HTML can be rendered on the server | | **Initial Load** | Often waits for JavaScript | Can send useful HTML immediately | | **Routing** | Usually requires a routing library | Built-in file-system routing | | **Data Fetching** | Commonly fetch inside components | Server Components can fetch directly | | **Backend APIs** | Usually separate backend | Built-in Route Handlers | | **Forms / Mutations** | API requests commonly required | Server Actions available | | **Image Optimization** | Usually configured manually | Built-in `` component | | **Code Splitting** | Depends on application setup | Automatic route-based code splitting | Basically: ```text React + Routing + Server Rendering + Backend + SEO + Optimizations = Next.js ``` Okay, that's obviously not the official equation. But you get the idea. 😄 --- ## The Two Eras of Next.js While learning Next.js, you'll probably see tutorials using two different routing systems. Don't panic. Next.js has two major routing approaches: 1. Pages Router 2. App Router --- ## 1. Pages Router The traditional Next.js architecture uses the `pages/` directory. Example: ```text pages/ ├── index.js ├── about.js └── products.js ``` Older Next.js applications also commonly use [functions](/javascript/functions-in-javascript) such as: ```js getServerSideProps() ``` and: ```js getStaticProps() ``` These [functions](/javascript/functions-in-javascript) control how data is fetched and how pages are rendered. You'll still encounter plenty of real-world projects using the Pages Router. --- ## 2. App Router The modern Next.js architecture uses the: ```text app/ ``` directory. Example: ```text app/ ├── page.js ├── about/ │ └── page.js └── products/ └── page.js ``` The App Router introduced a major change in how React applications can work. It is designed around features such as: * React Server Components * Nested layouts * Streaming * Suspense * Server Actions * Modern data fetching In the App Router, components are **Server Components by default** unless you explicitly make them Client Components. For example: ```jsx export default function Page() { return

Hello Next.js

} ``` This is a Server Component by default. If you need browser-only features such as: * `useState` * `useEffect` * Click handlers * Browser APIs you can create a Client Component using: ```jsx "use client" ``` Example: ```jsx "use client" import { useState } from "react" export default function Counter() { const [count, setCount] = useState(0) return ( ) } ``` Don't worry if Server Components sound confusing right now. We'll break them down properly later. > **Course Note:** This course focuses on the modern **Next.js App Router**. --- ## Core Capabilities of Next.js Now let's look at some of the major things Next.js can do. --- ## 1. Server-Side Rendering (SSR) With Server-Side Rendering, HTML is generated on the server when the page is requested. Conceptually: ```text User requests page ↓ Server generates HTML ↓ HTML is sent to browser ↓ User sees the page ``` SSR is useful when the content changes frequently. Examples: * User dashboards * Account pages * Personalized content * Frequently changing data --- ## 2. Static Site Generation (SSG) Static Site Generation creates pages ahead of time. Conceptually: ```text Build application ↓ Generate HTML ↓ Store static page ↓ Serve it quickly ``` Because the page doesn't need to be generated for every request, static pages can be extremely fast. Great examples include: * Blogs * Documentation * Landing pages * Course pages * Marketing websites --- ## 3. Incremental Static Regeneration (ISR) ISR is basically: **Static pages that know how to refresh themselves.** Instead of rebuilding your entire application every time content changes, Next.js can regenerate selected static content later. Conceptually: ```text Generate static page ↓ Serve cached page ↓ Content becomes stale ↓ Next.js regenerates it ↓ Updated version is served ``` You get many of the performance benefits of static pages without needing a full deployment whenever content changes. Pretty neat. --- ## 4. React Server Components Server Components are one of the biggest ideas behind the modern Next.js App Router. A Server Component runs on the server. That means it can perform server-side operations such as fetching data directly. Example: ```jsx export default async function UsersPage() { const response = await fetch( "https://api.example.com/users" ) const users = await response.json() return (

{users.map(user => (

{user.name}

))}

) } ``` Notice something interesting? No: ```js useEffect() ``` No: ```js useState() ``` No loading data after the component mounts. The server can fetch the data while rendering the component. This can simplify many data-fetching patterns. --- ## When Should You Use Next.js? Next.js works for many types of applications, but it's especially useful when you care about: * SEO * Performance * Server-side logic * Full-stack development * Content-heavy applications * Production scalability Here are some common examples. ### E-Commerce Platforms Think: ```text Amazon Online stores Product marketplaces ``` These applications benefit heavily from: * Search engine visibility * Fast product pages * Dynamic data * Server-side logic * Optimized images --- ### Content-Heavy Websites Examples: * Blogs * News websites * Documentation * Tutorial platforms * Learning websites These sites usually want search engines to discover thousands of pages efficiently. Next.js is a strong fit. --- ### SaaS Applications Examples: * Analytics dashboards * Project management tools * Admin panels * Subscription platforms Next.js can handle both interactive frontend interfaces and server-side application logic. --- ### Full-Stack MVPs Building a startup idea? You probably don't want to spend Day 1 creating: ```text frontend/ backend/ api-gateway/ deployment-service/ please-save-me/ ``` 😅 Next.js lets you keep many frontend and backend concerns inside one application. That makes it great for quickly building MVPs and prototypes. --- ## Summary React gives you an excellent way to build user interfaces. Next.js takes React further by adding the infrastructure needed to build complete web applications. You get: * File-based routing * Server rendering * Static generation * Server Components * Backend APIs * Server Actions * Image optimization * SEO tools * Production optimizations The biggest mindset shift is this: ```text Traditional React Browser does most of the work ``` versus: ```text Modern Next.js Server + Browser share the work ``` Once that idea clicks, many Next.js concepts will start making much more sense. And that's exactly what we'll do throughout this course on **asif.to** — break complicated Next.js concepts into simple, practical lessons so you can spend less time fighting the framework and more time actually building cool stuff. 🚀