Next.js Full Stack Development Guide

Next.js Full Stack Development Guide

Server Components for Fast Rendering

Next.js server components page load speed improve karte hain aur unnecessary JavaScript browser tak nahi jata, jis se performance aur SEO dono strong hotay hain.

// app/page.tsx
export default async function Home() {
  const data = await fetch("https://api.example.com/posts").then(res => res.json())

  return (
    <div>
      <h1>Latest Posts</h1>
      {data.map((item:any) => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  )
}

App Router with File Based Structure

App Router modern routing approach hai jo layouts, loading states aur error handling ko easy aur scalable banata hai.

// app/blog/page.tsx
export default function BlogPage() {
  return <h1>Blog Page</h1>
}

Dynamic Routing for SEO Pages

Dynamic routes SEO-optimized pages create karne me madad dete hain jaise blogs, products aur categories.

// app/blog/[slug]/page.tsx
export default function BlogDetails({ params }: any) {
  return <h2>Post: {params.slug}</h2>
}

Metadata API for Search Ranking

Built-in metadata feature se pages ka title aur description dynamically control hota hai jo Google ranking improve karta hai.

export const metadata = {
  title: "Next.js Blog",
  description: "Modern web development with Next.js"
}

Image Optimization for Performance

Next.js ka Image component images ko automatically resize aur optimize karta hai jis se website fast load hoti hai.

import Image from "next/image"

export default function Logo() {
  return (
    <Image
      src="/logo.png"
      alt="Brand Logo"
      width={200}
      height={100}
    />
  )
}

API Routes for Backend Logic

API routes frontend aur backend ko ek hi project me manage karne ka powerful solution hain.

// app/api/users/route.ts
export async function GET() {
  return Response.json({ users: ["Ali", "Zubair"] })
}

Environment Variables for Security

Sensitive data jaise API keys ko secure aur production-ready banane ke liye environment variables use hote hain.

const apiKey = process.env.NEXT_PUBLIC_API_KEY

Static Rendering for High Traffic Pages

Static rendering pages ko build time par generate karta hai jo speed aur scalability ke liye best hota hai.

export const dynamic = "force-static"

export default function About() {
  return <p>About our company</p>
}

Client Components for Interactivity

Client components user interaction handle karte hain jaise buttons, forms aur animations.

"use client"

import { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState(0)

  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Middleware for Request Control

Middleware authentication, redirects aur country-based logic ke liye use hoti hai.

// middleware.ts
import { NextResponse } from "next/server"

export function middleware() {
  return NextResponse.next()
}