# 1. Next JS - Introduction

1. ### What is NextJS ?
    
    Next.js is a React framework that allows you to build fast, scalable web applications with features like:
    
    * Server-side rendering (SSR)
        
    * Static site generation (SSG)
        
    * API routes for serverless functions
        
    * Automatic code splitting
        
    * Fast Refresh for development
        
    
2. **Setting up NextJS project**
    
    Step 1 : Create NextJs app
    
    ```javascript
    npx create-next-app@latest my-next-app  // This will generate a new Next.js project called my-next-app after given answer to some questions
    ```
    
    Step 2: Navigate to Your Project
    
    ```javascript
    cd my-next-app
    ```
    
    Step 3: Start the Development Server
    
    ```javascript
    npm run dev
    ```
    
3. ### What is server component ?
    
    A **Server Component** runs **only on the server**. It is rendered on the server, and the result (HTML) is sent to the client. It **cannot use browser-only features** like `useState`, `useEffect`, `localStorage`, or event listeners.
    
    #### When to use:
    
    * Fetching data from a database or API
        
    * Heavy computation or sensitive logic
        
    * You don't need interactivity (like forms, click events)
        
    
    > ✅ By default, all components in the `/app` directory are **Server Components**.
    > 
    > ```javascript
    > // app/page.js (or .tsx)
    > export default function Home() {
    >   return <h1>Hello from Server Component</h1>;
    > }
    > ```
    
4. ### What is client component ?
    
    A **Client Component** runs **in the browser**. It supports **interactivity**, **state**, **effects**, and all browser APIs. You have to **explicitly mark** it using `'use client'`.
    
    #### ✅ When to use:
    
    * `useState`, `useEffect`, `useRef`, and other react hooks
        
    * Event handling (onClick, onChange, etc.)
        
    * DOM manipulation
        
    * Third-party libraries that depend on the DOM
        
    
    `use client` must be the **first line** in the file to mark it as a client component.
    
    ```javascript
    'use client';
    
    import { useState } from 'react';
    
    export default function Counter() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }
    ```
    
5. ### Folder Directory Structure
    

```javascript
my-next-app/
├── app/
│   ├── page.js         --> Home route ('/')
│   ├── about/
│   │   └── page.js     --> About route ('/about')
│   ├── blog/
│   │   ├── page.js     --> Blog listing ('/blog')
│   │   └── [slug]/
│   │       └── page.js --> Dynamic route like '/blog/my-post'
│   ├── layout.js       --> Shared layout for all routes //In this we Write our common components like navbar, footer
│   └── globals.css     --> Global CSS
├── public/             --> Static assets (images, etc.)
├── styles/             --> Optional extra styles
├── next.config.js      --> Config file
├── package.json
```