Forem: Muhammad Usman

Next.js 14 App Router: Building Modern Full-Stack Applications

Muhammad Usman — Fri, 19 Sep 2025 08:14:47 +0000

Next.js has revolutionized React development by providing a comprehensive framework that handles everything from routing to server-side rendering. With the introduction of the App Router in Next.js 13 and its maturation in Next.js 14, developers now have access to powerful features like Server Components, Server Actions, and improved data fetching patterns. This guide will take you through building a complete full-stack application using the latest Next.js features.

Understanding the App Router Architecture

The App Router represents a paradigm shift from the traditional Pages Router. Built on React's latest features, it introduces concepts like Server Components, which run on the server and can directly access databases and APIs without exposing sensitive data to the client.

Key Concepts:

Server Components: React components that render on the server
Client Components: Traditional React components that run in the browser
Server Actions: Functions that run on the server and can be called from client components
Streaming: Progressive rendering of UI components
Nested Layouts: Reusable UI that persists across routes

Project Structure and Setup

Let's start by creating a modern blog application with authentication, database integration, and real-time features.

# Create a new Next.js application
npx create-next-app@latest my-blog-app --typescript --tailwind --eslint --app
cd my-blog-app

# Install additional dependencies
npm install @prisma/client prisma @auth/prisma-adapter next-auth
npm install @types/bcryptjs bcryptjs
npm install zod react-hook-form @hookform/resolvers

Database Schema with Prisma

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String    @unique
  emailVerified DateTime?
  image         String?
  password      String?
  role          Role      @default(USER)
  posts         Post[]
  comments      Comment[]
  accounts      Account[]
  sessions      Session[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("users")
}

model Post {
  id          String    @id @default(cuid())
  title       String
  slug        String    @unique
  content     String
  excerpt     String?
  published   Boolean   @default(false)
  featured    Boolean   @default(false)
  viewCount   Int       @default(0)

  authorId    String
  author      User      @relation(fields: [authorId], references: [id], onDelete: Cascade)

  comments    Comment[]
  tags        Tag[]

  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt

  @@map("posts")
}

model Comment {
  id        String   @id @default(cuid())
  content   String

  postId    String
  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)

  authorId  String
  author    User     @relation(fields: [authorId], references: [id], onDelete: Cascade)

  parentId  String?
  parent    Comment? @relation("CommentReplies", fields: [parentId], references: [id])
  replies   Comment[] @relation("CommentReplies")

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("comments")
}

model Tag {
  id    String @id @default(cuid())
  name  String @unique
  posts Post[]

  @@map("tags")
}

enum Role {
  USER
  ADMIN
}

Server Components and Data Fetching

Server Components allow us to fetch data directly on the server, improving performance and SEO:

// app/blog/page.tsx
import { Metadata } from 'next'
import { Suspense } from 'react'
import { getPosts } from '@/lib/posts'
import PostCard from '@/components/PostCard'
import PostCardSkeleton from '@/components/PostCardSkeleton'

export const metadata: Metadata = {
  title: 'Blog Posts | My Blog',
  description: 'Latest blog posts and articles',
}

interface SearchParams {
  page?: string
  tag?: string
  search?: string
}

interface BlogPageProps {
  searchParams: SearchParams
}

export default async function BlogPage({ searchParams }: BlogPageProps) {
  const page = parseInt(searchParams.page || '1')
  const tag = searchParams.tag
  const search = searchParams.search

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
          Latest Blog Posts
        </h1>
        <p className="text-gray-600 dark:text-gray-400">
          Discover insights, tutorials, and thoughts on web development
        </p>
      </div>

      <Suspense fallback={<PostGridSkeleton />}>
        <PostGrid page={page} tag={tag} search={search} />
      </Suspense>
    </div>
  )
}

async function PostGrid({ page, tag, search }: SearchParams & { page: number }) {
  const { posts, totalPages, hasNextPage } = await getPosts({
    page,
    limit: 12,
    tag,
    search,
    published: true
  })

  if (posts.length === 0) {
    return (
      <div className="text-center py-12">
        <h3 className="text-xl text-gray-600 dark:text-gray-400">
          No posts found
        </h3>
      </div>
    )
  }

  return (
    <div className="space-y-8">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {posts.map((post) => (
          <PostCard key={post.id} post={post} />
        ))}
      </div>

      {totalPages > 1 && (
        <Pagination
          currentPage={page}
          totalPages={totalPages}
          hasNextPage={hasNextPage}
        />
      )}
    </div>
  )
}

function PostGridSkeleton() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {Array.from({ length: 6 }).map((_, i) => (
        <PostCardSkeleton key={i} />
      ))}
    </div>
  )
}

Server Actions for Data Mutations

Server Actions provide a seamless way to handle form submissions and data mutations:

// app/actions/posts.ts
'use server'

import { revalidatePath, revalidateTag } from 'next/cache'
import { redirect } from 'next/navigation'
import { z } from 'zod'
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'
import { generateSlug } from '@/lib/utils'

const CreatePostSchema = z.object({
  title: z.string().min(1, 'Title is required').max(200),
  content: z.string().min(10, 'Content must be at least 10 characters'),
  excerpt: z.string().max(500).optional(),
  tags: z.array(z.string()).optional(),
  published: z.boolean().default(false),
  featured: z.boolean().default(false)
})

export type CreatePostState = {
  errors?: {
    title?: string[]
    content?: string[]
    excerpt?: string[]
    general?: string[]
  }
  message?: string
}

export async function createPost(
  prevState: CreatePostState,
  formData: FormData
): Promise<CreatePostState> {
  // Get current user session
  const session = await auth()

  if (!session?.user?.id) {
    return {
      errors: { general: ['You must be logged in to create a post'] }
    }
  }

  // Validate form data
  const validatedFields = CreatePostSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
    excerpt: formData.get('excerpt'),
    tags: formData.get('tags')?.toString().split(',').filter(Boolean) || [],
    published: formData.get('published') === 'on',
    featured: formData.get('featured') === 'on'
  })

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors
    }
  }

  const { title, content, excerpt, tags, published, featured } = validatedFields.data

  try {
    // Generate unique slug
    const baseSlug = generateSlug(title)
    let slug = baseSlug
    let counter = 1

    while (await prisma.post.findUnique({ where: { slug } })) {
      slug = `${baseSlug}-${counter}`
      counter++
    }

    // Create post with tags
    const post = await prisma.post.create({
      data: {
        title,
        slug,
        content,
        excerpt,
        published,
        featured,
        authorId: session.user.id,
        tags: {
          connectOrCreate: tags.map(tag => ({
            where: { name: tag.toLowerCase().trim() },
            create: { name: tag.toLowerCase().trim() }
          }))
        }
      },
      include: {
        tags: true,
        author: {
          select: {
            name: true,
            email: true,
            image: true
          }
        }
      }
    })

    // Revalidate relevant pages
    revalidatePath('/blog')
    revalidatePath('/admin/posts')
    revalidateTag('posts')

    redirect(`/blog/${post.slug}`)
  } catch (error) {
    console.error('Failed to create post:', error)
    return {
      errors: { general: ['Failed to create post. Please try again.'] }
    }
  }
}

export async function updatePostViews(postId: string) {
  try {
    await prisma.post.update({
      where: { id: postId },
      data: {
        viewCount: {
          increment: 1
        }
      }
    })

    revalidateTag(`post-${postId}`)
  } catch (error) {
    console.error('Failed to update post views:', error)
  }
}

export async function deletePost(postId: string): Promise<{ success: boolean; error?: string }> {
  const session = await auth()

  if (!session?.user?.id) {
    return { success: false, error: 'Unauthorized' }
  }

  try {
    const post = await prisma.post.findUnique({
      where: { id: postId },
      select: { authorId: true, slug: true }
    })

    if (!post) {
      return { success: false, error: 'Post not found' }
    }

    if (post.authorId !== session.user.id && session.user.role !== 'ADMIN') {
      return { success: false, error: 'Unauthorized' }
    }

    await prisma.post.delete({
      where: { id: postId }
    })

    revalidatePath('/blog')
    revalidatePath('/admin/posts')
    revalidateTag('posts')

    return { success: true }
  } catch (error) {
    console.error('Failed to delete post:', error)
    return { success: false, error: 'Failed to delete post' }
  }
}

Client Components for Interactivity

Client Components handle user interactions and maintain client-side state:

// components/PostEditor.tsx
'use client'

import { useFormState } from 'react-dom'
import { useRouter } from 'next/navigation'
import { useState, useTransition } from 'react'
import { createPost, CreatePostState } from '@/app/actions/posts'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { TagInput } from '@/components/TagInput'
import { MarkdownPreview } from '@/components/MarkdownPreview'

const initialState: CreatePostState = {
  errors: {},
  message: ''
}

interface PostEditorProps {
  initialData?: {
    title: string
    content: string
    excerpt?: string
    tags: string[]
    published: boolean
    featured: boolean
  }
}

export default function PostEditor({ initialData }: PostEditorProps) {
  const [state, formAction] = useFormState(createPost, initialState)
  const [isPending, startTransition] = useTransition()
  const [showPreview, setShowPreview] = useState(false)
  const [content, setContent] = useState(initialData?.content || '')
  const router = useRouter()

  const handleSubmit = (formData: FormData) => {
    startTransition(() => {
      formAction(formData)
    })
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">
          {initialData ? 'Edit Post' : 'Create New Post'}
        </h1>
        <div className="flex items-center space-x-4">
          <Label htmlFor="preview-toggle">Preview</Label>
          <Switch
            id="preview-toggle"
            checked={showPreview}
            onCheckedChange={setShowPreview}
          />
        </div>
      </div>

      {state.errors?.general && (
        <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded mb-4">
          {state.errors.general.join(', ')}
        </div>
      )}

      <form action={handleSubmit} className="space-y-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="space-y-6">
            <div>
              <Label htmlFor="title">Title *</Label>
              <Input
                id="title"
                name="title"
                defaultValue={initialData?.title}
                placeholder="Enter post title..."
                className={state.errors?.title ? 'border-red-500' : ''}
              />
              {state.errors?.title && (
                <p className="text-red-500 text-sm mt-1">{state.errors.title[0]}</p>
              )}
            </div>

            <div>
              <Label htmlFor="excerpt">Excerpt</Label>
              <Textarea
                id="excerpt"
                name="excerpt"
                defaultValue={initialData?.excerpt}
                placeholder="Brief description of your post..."
                rows={3}
                className={state.errors?.excerpt ? 'border-red-500' : ''}
              />
              {state.errors?.excerpt && (
                <p className="text-red-500 text-sm mt-1">{state.errors.excerpt[0]}</p>
              )}
            </div>

            <div>
              <Label>Tags</Label>
              <TagInput
                name="tags"
                defaultValue={initialData?.tags || []}
                placeholder="Add tags..."
              />
            </div>

            <div className="flex space-x-6">
              <div className="flex items-center space-x-2">
                <Switch
                  id="published"
                  name="published"
                  defaultChecked={initialData?.published}
                />
                <Label htmlFor="published">Published</Label>
              </div>

              <div className="flex items-center space-x-2">
                <Switch
                  id="featured"
                  name="featured"
                  defaultChecked={initialData?.featured}
                />
                <Label htmlFor="featured">Featured</Label>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            <div>
              <Label htmlFor="content">Content *</Label>
              {showPreview ? (
                <div className="border rounded-lg p-4 min-h-[400px] bg-gray-50">
                  <MarkdownPreview content={content} />
                </div>
              ) : (
                <Textarea
                  id="content"
                  name="content"
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                  placeholder="Write your post content in Markdown..."
                  rows={20}
                  className={`font-mono ${state.errors?.content ? 'border-red-500' : ''}`}
                />
              )}
              {state.errors?.content && (
                <p className="text-red-500 text-sm mt-1">{state.errors.content[0]}</p>
              )}
            </div>
          </div>
        </div>

        <div className="flex justify-end space-x-4">
          <Button
            type="button"
            variant="outline"
            onClick={() => router.back()}
          >
            Cancel
          </Button>
          <Button
            type="submit"
            disabled={isPending}
          >
            {isPending ? 'Saving...' : (initialData ? 'Update Post' : 'Create Post')}
          </Button>
        </div>
      </form>
    </div>
  )
}

Authentication with NextAuth.js

// lib/auth.ts
import { NextAuthOptions } from 'next-auth'
import { PrismaAdapter } from '@auth/prisma-adapter'
import CredentialsProvider from 'next-auth/providers/credentials'
import GoogleProvider from 'next-auth/providers/google'
import { compare } from 'bcryptjs'
import { prisma } from './prisma'

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  session: {
    strategy: 'jwt'
  },
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!
    }),
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          return null
        }

        const user = await prisma.user.findUnique({
          where: { email: credentials.email }
        })

        if (!user || !user.password) {
          return null
        }

        const isPasswordValid = await compare(credentials.password, user.password)

        if (!isPasswordValid) {
          return null
        }

        return {
          id: user.id,
          email: user.email,
          name: user.name,
          role: user.role,
          image: user.image
        }
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role
      }
      return token
    },
    async session({ session, token }) {
      if (token) {
        session.user.id = token.sub!
        session.user.role = token.role as string
      }
      return session
    }
  },
  pages: {
    signIn: '/auth/signin',
    signUp: '/auth/signup'
  }
}

Advanced Features and Optimizations

1. Image Optimization and Upload

// components/ImageUpload.tsx
'use client'

import { useState, useCallback } from 'react'
import Image from 'next/image'
import { useDropzone } from 'react-dropzone'
import { uploadImage } from '@/app/actions/upload'

interface ImageUploadProps {
  onImageUploaded: (url: string) => void
  currentImage?: string
}

export default function ImageUpload({ onImageUploaded, currentImage }: ImageUploadProps) {
  const [isUploading, setIsUploading] = useState(false)
  const [preview, setPreview] = useState<string>(currentImage || '')

  const onDrop = useCallback(async (acceptedFiles: File[]) => {
    const file = acceptedFiles[0]
    if (!file) return

    setIsUploading(true)

    try {
      const formData = new FormData()
      formData.append('file', file)

      const result = await uploadImage(formData)

      if (result.success && result.url) {
        setPreview(result.url)
        onImageUploaded(result.url)
      }
    } catch (error) {
      console.error('Upload failed:', error)
    } finally {
      setIsUploading(false)
    }
  }, [onImageUploaded])

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'image/*': ['.jpeg', '.jpg', '.png', '.webp']
    },
    maxSize: 5 * 1024 * 1024, // 5MB
    multiple: false
  })

  return (
    <div className="space-y-4">
      <div
        {...getRootProps()}
        className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
          ${isDragActive ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400'}
          ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}
        `}
      >
        <input {...getInputProps()} disabled={isUploading} />

        {preview ? (
          <div className="space-y-4">
            <div className="relative w-full h-48">
              <Image
                src={preview}
                alt="Preview"
                fill
                className="object-cover rounded"
              />
            </div>
            <p className="text-sm text-gray-600">
              Click or drag to replace image
            </p>
          </div>
        ) : (
          <div className="space-y-2">
            <div className="text-gray-400">
              <svg className="mx-auto h-12 w-12" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <div>
              <p className="text-lg">
                {isDragActive ? 'Drop image here' : 'Drag & drop an image here'}
              </p>
              <p className="text-sm text-gray-500">
                or click to select (max 5MB)
              </p>
            </div>
          </div>
        )}

        {isUploading && (
          <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 rounded-lg">
            <div className="text-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
              <p className="mt-2 text-sm text-gray-600">Uploading...</p>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

2. Real-time Comments with Server Actions

// components/CommentSection.tsx
'use client'

import { useState, useTransition } from 'react'
import { useSession } from 'next-auth/react'
import { addComment, deleteComment } from '@/app/actions/comments'
import { Comment, User } from '@prisma/client'

type CommentWithAuthor = Comment & {
  author: Pick<User, 'name' | 'image'>
  replies: CommentWithAuthor[]
}

interface CommentSectionProps {
  postId: string
  initialComments: CommentWithAuthor[]
}

export default function CommentSection({ postId, initialComments }: CommentSectionProps) {
  const { data: session } = useSession()
  const [comments, setComments] = useState(initialComments)
  const [newComment, setNewComment] = useState('')
  const [replyTo, setReplyTo] = useState<string | null>(null)
  const [isPending, startTransition] = useTransition()

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!newComment.trim() || !session?.user) return

    startTransition(async () => {
      const result = await addComment({
        content: newComment,
        postId,
        parentId: replyTo
      })

      if (result.success && result.comment) {
        // Optimistically update UI
        if (replyTo) {
          setComments(prev => prev.map(comment => 
            comment.id === replyTo 
              ? { ...comment, replies: [...comment.replies, result.comment!] }
              : comment
          ))
        } else {
          setComments(prev => [result.comment!, ...prev])
        }

        setNewComment('')
        setReplyTo(null)
      }
    })
  }

  return (
    <div className="mt-12 space-y-6">
      <h3 className="text-2xl font-semibold">Comments ({comments.length})</h3>

      {session?.user ? (
        <form onSubmit={handleSubmit} className="space-y-4">
          <textarea
            value={newComment}
            onChange={(e) => setNewComment(e.target.value)}
            placeholder={replyTo ? "Write a reply..." : "Write a comment..."}
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            rows={4}
          />
          <div className="flex justify-between">
            {replyTo && (
              <button
                type="button"
                onClick={() => setReplyTo(null)}
                className="text-gray-500 hover:text-gray-700"
              >
                Cancel Reply
              </button>
            )}
            <button
              type="submit"
              disabled={isPending || !newComment.trim()}
              className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50"
            >
              {isPending ? 'Posting...' : (replyTo ? 'Reply' : 'Comment')}
            </button>
          </div>
        </form>
      ) : (
        <p className="text-gray-600">
          <a href="/auth/signin" className="text-blue-600 hover:underline">
            Sign in
          </a>{' '}
          to join the conversation
        </p>
      )}

      <div className="space-y-6">
        {comments.map((comment) => (
          <CommentItem
            key={comment.id}
            comment={comment}
            onReply={setReplyTo}
            currentUserId={session?.user?.id}
          />
        ))}
      </div>
    </div>
  )
}

3. SEO and Metadata Optimization

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { getPostBySlug } from '@/lib/posts'
import { updatePostViews } from '@/app/actions/posts'
import PostContent from '@/components/PostContent'
import CommentSection from '@/components/CommentSection'

interface PostPageProps {
  params: {
    slug: string
  }
}

export async function generateMetadata({ params }: PostPageProps): Promise<Metadata> {
  const post = await getPostBySlug(params.slug)

  if (!post) {
    return {
      title: 'Post Not Found'
    }
  }

  return {
    title: post.title,
    description: post.excerpt || `Read ${post.title} by ${post.author.name}`,
    authors: [{ name: post.author.name! }],
    openGraph: {
      title: post.title,
      description: post.excerpt || `Read ${post.title} by ${post.author.name}`,
      type: 'article',
      publishedTime: post.createdAt.toISOString(),
      modifiedTime: post.updatedAt.toISOString(),
      authors: [post.author.name!],
      tags: post.tags.map(tag => tag.name)
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt || `Read ${post.title} by ${post.author.name}`,
    },
    keywords: post.tags.map(tag => tag.name).join(', ')
  }
}

export default async function PostPage({ params }: PostPageProps) {
  const post = await getPostBySlug(params.slug, {
    includeComments: true,
    includeUnpublished: false
  })

  if (!post) {
    notFound()
  }

  // Update view count (fire and forget)
  updatePostViews(post.id)

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    author: {
      '@type': 'Person',
      name: post.author.name
    },
    datePublished: post.createdAt.toISOString(),
    dateModified: post.updatedAt.toISOString(),
    keywords: post.tags.map(tag => tag.name).join(', ')
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article className="max-w-4xl mx-auto px-4 py-8">
        <PostContent post={post} />
        <CommentSection 
          postId={post.id} 
          initialComments={post.comments} 
        />
      </article>
    </>
  )
}

Performance Optimizations and Best Practices

1. Streaming and Loading UI


typescript
// app/blog/loading.tsx
export default function Loading()

Building Production-Ready Serverless Applications with AWS Lambda and API Gateway

Muhammad Usman — Fri, 19 Sep 2025 08:11:10 +0000

Serverless architecture has revolutionized how we build and deploy applications. AWS Lambda, combined with API Gateway, provides a powerful platform for creating scalable, cost-effective applications without managing servers. In this comprehensive guide, we'll explore best practices for building production-ready serverless applications on AWS.

Understanding the Serverless Paradigm

Serverless doesn't mean "no servers" - it means you don't have to manage them. AWS Lambda automatically handles the infrastructure, scaling, and maintenance, allowing developers to focus purely on business logic. This paradigm shift offers several advantages:

Cost Efficiency: Pay only for what you use, down to the millisecond
Automatic Scaling: Handle anywhere from a few requests to millions without configuration
Reduced Operational Overhead: No server maintenance or patching
Built-in High Availability: Fault tolerance across multiple availability zones

Setting Up Your First Lambda Function

Let's start with a simple Lambda function that demonstrates core concepts:

// handler.js
const AWS = require('aws-sdk');
const dynamodb = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event, context) => {
    // Enable CORS
    const headers = {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
    };

    try {
        const { httpMethod, pathParameters, body } = event;

        // Handle different HTTP methods
        switch (httpMethod) {
            case 'GET':
                return await handleGet(pathParameters, headers);
            case 'POST':
                return await handlePost(JSON.parse(body), headers);
            case 'PUT':
                return await handlePut(pathParameters, JSON.parse(body), headers);
            case 'DELETE':
                return await handleDelete(pathParameters, headers);
            case 'OPTIONS':
                return {
                    statusCode: 200,
                    headers,
                    body: JSON.stringify({ message: 'CORS preflight' })
                };
            default:
                return {
                    statusCode: 405,
                    headers,
                    body: JSON.stringify({ error: 'Method not allowed' })
                };
        }
    } catch (error) {
        console.error('Handler error:', error);
        return {
            statusCode: 500,
            headers,
            body: JSON.stringify({ 
                error: 'Internal server error',
                message: process.env.NODE_ENV === 'development' ? error.message : 'Something went wrong'
            })
        };
    }
};

async function handleGet(pathParameters, headers) {
    const { id } = pathParameters || {};

    if (id) {
        // Get single item
        const params = {
            TableName: process.env.DYNAMODB_TABLE,
            Key: { id }
        };

        const result = await dynamodb.get(params).promise();

        if (!result.Item) {
            return {
                statusCode: 404,
                headers,
                body: JSON.stringify({ error: 'Item not found' })
            };
        }

        return {
            statusCode: 200,
            headers,
            body: JSON.stringify(result.Item)
        };
    } else {
        // Get all items
        const params = {
            TableName: process.env.DYNAMODB_TABLE
        };

        const result = await dynamodb.scan(params).promise();

        return {
            statusCode: 200,
            headers,
            body: JSON.stringify({
                items: result.Items,
                count: result.Count
            })
        };
    }
}

async function handlePost(data, headers) {
    // Validate input
    if (!data.name || !data.email) {
        return {
            statusCode: 400,
            headers,
            body: JSON.stringify({ error: 'Name and email are required' })
        };
    }

    const item = {
        id: generateId(),
        name: data.name,
        email: data.email,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString()
    };

    const params = {
        TableName: process.env.DYNAMODB_TABLE,
        Item: item
    };

    await dynamodb.put(params).promise();

    return {
        statusCode: 201,
        headers,
        body: JSON.stringify(item)
    };
}

function generateId() {
    return Math.random().toString(36).substr(2, 9);
}

Infrastructure as Code with Serverless Framework

Using the Serverless Framework makes deployment and configuration management much easier:

# serverless.yml
service: my-serverless-api

provider:
  name: aws
  runtime: nodejs18.x
  stage: ${opt:stage, 'dev'}
  region: ${opt:region, 'us-east-1'}
  environment:
    DYNAMODB_TABLE: ${self:service}-${self:provider.stage}
    NODE_ENV: ${self:provider.stage}
  iamRoleStatements:
    - Effect: Allow
      Action:
        - dynamodb:Query
        - dynamodb:Scan
        - dynamodb:GetItem
        - dynamodb:PutItem
        - dynamodb:UpdateItem
        - dynamodb:DeleteItem
      Resource: "arn:aws:dynamodb:${self:provider.region}:*:table/${self:provider.environment.DYNAMODB_TABLE}"

functions:
  api:
    handler: handler.handler
    events:
      - http:
          path: /users
          method: get
          cors: true
      - http:
          path: /users
          method: post
          cors: true
      - http:
          path: /users/{id}
          method: get
          cors: true
      - http:
          path: /users/{id}
          method: put
          cors: true
      - http:
          path: /users/{id}
          method: delete
          cors: true

resources:
  Resources:
    UsersDynamoDbTable:
      Type: 'AWS::DynamoDB::Table'
      DeletionPolicy: Retain
      Properties:
        AttributeDefinitions:
          - AttributeName: id
            AttributeType: S
        KeySchema:
          - AttributeName: id
            KeyType: HASH
        BillingMode: PAY_PER_REQUEST
        TableName: ${self:provider.environment.DYNAMODB_TABLE}

plugins:
  - serverless-offline
  - serverless-dotenv-plugin

custom:
  serverless-offline:
    httpPort: 3000

Advanced Lambda Patterns and Best Practices

1. Connection Pooling and Resource Reuse

// database.js
const AWS = require('aws-sdk');

// Initialize outside handler for connection reuse
let dynamodb;

function getDynamoDbClient() {
    if (!dynamodb) {
        dynamodb = new AWS.DynamoDB.DocumentClient({
            region: process.env.AWS_REGION || 'us-east-1',
            maxRetries: 3,
            retryDelayOptions: {
                customBackoff: function(retryCount) {
                    return Math.pow(2, retryCount) * 100;
                }
            }
        });
    }
    return dynamodb;
}

module.exports = { getDynamoDbClient };

2. Error Handling and Monitoring

// utils/logger.js
const winston = require('winston');

const logger = winston.createLogger({
    level: process.env.LOG_LEVEL || 'info',
    format: winston.format.combine(
        winston.format.timestamp(),
        winston.format.errors({ stack: true }),
        winston.format.json()
    ),
    defaultMeta: { service: 'my-serverless-api' },
    transports: [
        new winston.transports.Console()
    ]
});

// Custom error class
class AppError extends Error {
    constructor(message, statusCode = 500, isOperational = true) {
        super(message);
        this.statusCode = statusCode;
        this.isOperational = isOperational;
        Error.captureStackTrace(this, this.constructor);
    }
}

module.exports = { logger, AppError };

3. Input Validation and Sanitization

// utils/validation.js
const Joi = require('joi');

const userSchema = Joi.object({
    name: Joi.string().min(2).max(100).required(),
    email: Joi.string().email().required(),
    age: Joi.number().integer().min(0).max(120).optional(),
    phone: Joi.string().pattern(/^\+?[1-9]\d{1,14}$/).optional()
});

function validateUser(data) {
    const { error, value } = userSchema.validate(data);
    if (error) {
        throw new AppError(`Validation error: ${error.details[0].message}`, 400);
    }
    return value;
}

// Sanitize input
function sanitizeInput(data) {
    if (typeof data === 'string') {
        return data.trim().replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
    }
    if (typeof data === 'object' && data !== null) {
        const sanitized = {};
        for (const [key, value] of Object.entries(data)) {
            sanitized[key] = sanitizeInput(value);
        }
        return sanitized;
    }
    return data;
}

module.exports = { validateUser, sanitizeInput };

Optimizing Performance and Costs

1. Cold Start Optimization

// Optimize imports
const AWS = require('aws-sdk/clients/dynamodb');
const { logger } = require('./utils/logger');

// Initialize connections outside handler
const dynamodb = new AWS.DocumentClient({
    convertEmptyValues: true,
    // Reduce timeout for faster failures
    httpOptions: {
        timeout: 5000
    }
});

// Provisioned concurrency for critical functions
exports.handler = async (event, context) => {
    // Set shorter timeout for context
    context.callbackWaitsForEmptyEventLoop = false;

    // Your handler logic here
};

2. Memory and Timeout Configuration

# serverless.yml
functions:
  api:
    handler: handler.handler
    memorySize: 512  # Optimize based on profiling
    timeout: 30      # Don't set too high to avoid costs
    reservedConcurrency: 100  # Prevent runaway costs

Security Best Practices

1. Authentication with JWT

// auth/jwt.js
const jwt = require('jsonwebtoken');
const { AppError } = require('../utils/logger');

function generateToken(payload) {
    return jwt.sign(payload, process.env.JWT_SECRET, {
        expiresIn: '24h',
        issuer: 'my-serverless-api'
    });
}

function verifyToken(token) {
    try {
        return jwt.verify(token, process.env.JWT_SECRET);
    } catch (error) {
        throw new AppError('Invalid token', 401);
    }
}

// Middleware for Lambda
function authMiddleware(handler) {
    return async (event, context) => {
        try {
            const token = event.headers.Authorization?.replace('Bearer ', '');
            if (!token) {
                throw new AppError('No token provided', 401);
            }

            const decoded = verifyToken(token);
            event.user = decoded;

            return await handler(event, context);
        } catch (error) {
            return {
                statusCode: error.statusCode || 500,
                body: JSON.stringify({ error: error.message })
            };
        }
    };
}

module.exports = { generateToken, verifyToken, authMiddleware };

2. Environment Variables and Secrets Management

# serverless.yml
provider:
  environment:
    DYNAMODB_TABLE: ${self:service}-${self:provider.stage}
    # Reference AWS Systems Manager parameters
    JWT_SECRET: ${ssm:/myapp/${self:provider.stage}/jwt-secret~true}
    DATABASE_URL: ${ssm:/myapp/${self:provider.stage}/database-url~true}

Monitoring and Observability

1. Custom Metrics with CloudWatch

// utils/metrics.js
const AWS = require('aws-sdk');
const cloudwatch = new AWS.CloudWatch();

async function publishMetric(metricName, value, unit = 'Count', dimensions = {}) {
    const params = {
        Namespace: 'MyServerlessApp',
        MetricData: [{
            MetricName: metricName,
            Value: value,
            Unit: unit,
            Dimensions: Object.entries(dimensions).map(([Name, Value]) => ({ Name, Value })),
            Timestamp: new Date()
        }]
    };

    try {
        await cloudwatch.putMetricData(params).promise();
    } catch (error) {
        console.error('Failed to publish metric:', error);
    }
}

module.exports = { publishMetric };

2. Distributed Tracing with X-Ray

const AWSXRay = require('aws-xray-sdk-core');
const AWS = AWSXRay.captureAWS(require('aws-sdk'));

// Add subsegments for better tracing
exports.handler = async (event, context) => {
    const segment = AWSXRay.getSegment();
    const subsegment = segment.addNewSubsegment('database-operation');

    try {
        // Your database operation
        const result = await dynamodb.get(params).promise();
        subsegment.close();
        return result;
    } catch (error) {
        subsegment.close(error);
        throw error;
    }
};

Testing Serverless Applications

// tests/handler.test.js
const { handler } = require('../handler');

describe('Lambda Handler', () => {
    test('should handle GET request', async () => {
        const event = {
            httpMethod: 'GET',
            pathParameters: null,
            body: null
        };

        const result = await handler(event, {});

        expect(result.statusCode).toBe(200);
        expect(JSON.parse(result.body)).toHaveProperty('items');
    });

    test('should handle POST request with valid data', async () => {
        const event = {
            httpMethod: 'POST',
            pathParameters: null,
            body: JSON.stringify({
                name: 'John Doe',
                email: 'john@example.com'
            })
        };

        const result = await handler(event, {});

        expect(result.statusCode).toBe(201);
        const body = JSON.parse(result.body);
        expect(body).toHaveProperty('id');
        expect(body.name).toBe('John Doe');
    });
});

Deployment Strategies

1. CI/CD Pipeline

# .github/workflows/deploy.yml
name: Deploy Serverless Application

on:
  push:
    branches: [main, develop]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Deploy to AWS
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
            npx serverless deploy --stage prod
          else
            npx serverless deploy --stage dev
          fi

2. Blue-Green Deployments

# serverless.yml
provider:
  deploymentBucket:
    versioning: true
  versionFunctions: true

functions:
  api:
    handler: handler.handler
    # Use aliases for blue-green deployments
    events:
      - http:
          path: /{proxy+}
          method: ANY
          cors: true

plugins:
  - serverless-plugin-canary-deployments

custom:
  deploymentSettings:
    type: Canary10Percent5Minutes
    alias: Live

Cost Optimization Strategies

Right-size Memory: Monitor and adjust memory allocation based on actual usage
Use Provisioned Concurrency Wisely: Only for functions that need consistent low latency
Implement Caching: Use API Gateway caching and DynamoDB DAX where appropriate
Monitor Cold Starts: Use CloudWatch to track and optimize cold start frequency
Clean Up Resources: Remove unused functions and resources regularly

Conclusion

Building production-ready serverless applications with AWS Lambda requires careful consideration of architecture patterns, security, monitoring, and cost optimization. By following these best practices and using the patterns shown in this guide, you can create robust, scalable, and maintainable serverless applications.

The serverless paradigm offers incredible benefits, but success depends on understanding its nuances and implementing proper patterns from the start. Remember to monitor your applications closely, test thoroughly, and continuously optimize based on real-world usage patterns.

As serverless technology continues to evolve, staying up-to-date with AWS services and best practices will help you build even better applications in the future.

Mastering React State Management: Beyond useState and useEffect

Muhammad Usman — Fri, 19 Sep 2025 08:00:44 +0000

React's state management can quickly become complex as your application grows. While useState and useEffect are excellent for simple scenarios, modern React applications often require more sophisticated patterns. In this comprehensive guide, we'll explore advanced state management techniques that will make your React applications more maintainable and performant.

The Evolution of State Management in React

React has come a long way since its early days. The introduction of hooks in React 16.8 revolutionized how we handle state, moving away from class components to functional components with hooks. However, as applications scale, developers often find themselves struggling with prop drilling, state synchronization, and performance optimization.

useReducer: Your Gateway to Complex State Logic

While useState is perfect for simple state updates, useReducer shines when dealing with complex state logic involving multiple sub-values or when the next state depends on the previous one.

import React, { useReducer } from 'react';

const initialState = {
  user: null,
  loading: false,
  error: null,
  notifications: []
};

function appReducer(state, action) {
  switch (action.type) {
    case 'LOGIN_START':
      return { ...state, loading: true, error: null };
    case 'LOGIN_SUCCESS':
      return { ...state, loading: false, user: action.payload };
    case 'LOGIN_ERROR':
      return { ...state, loading: false, error: action.payload };
    case 'ADD_NOTIFICATION':
      return { 
        ...state, 
        notifications: [...state.notifications, action.payload] 
      };
    case 'REMOVE_NOTIFICATION':
      return {
        ...state,
        notifications: state.notifications.filter(n => n.id !== action.payload)
      };
    default:
      return state;
  }
}

function App() {
  const [state, dispatch] = useReducer(appReducer, initialState);

  const login = async (credentials) => {
    dispatch({ type: 'LOGIN_START' });
    try {
      const user = await authService.login(credentials);
      dispatch({ type: 'LOGIN_SUCCESS', payload: user });
    } catch (error) {
      dispatch({ type: 'LOGIN_ERROR', payload: error.message });
    }
  };

  return (
    // Your JSX here
  );
}

Context API: Eliminating Prop Drilling

The Context API provides a way to share data between components without passing props through every level of the component tree. Here's how to create a robust context-based state management system:

import React, { createContext, useContext, useReducer } from 'react';

const AppContext = createContext();

export function AppProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, initialState);

  const value = {
    state,
    dispatch,
    // Action creators
    login: (credentials) => {
      dispatch({ type: 'LOGIN_START' });
      // Login logic here
    },
    logout: () => dispatch({ type: 'LOGOUT' }),
    addNotification: (notification) => 
      dispatch({ type: 'ADD_NOTIFICATION', payload: notification })
  };

  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

export function useApp() {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useApp must be used within an AppProvider');
  }
  return context;
}

Custom Hooks: Reusable State Logic

Custom hooks allow you to extract and reuse stateful logic across multiple components:

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error('Error reading from localStorage:', error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error('Error writing to localStorage:', error);
    }
  };

  return [storedValue, setValue];
}

function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();

        if (!cancelled) {
          setData(result);
          setError(null);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err.message);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      cancelled = true;
    };
  }, [url]);

  return { data, loading, error };
}

State Machines with useReducer

For complex UI states, consider implementing state machines:

const STATES = {
  IDLE: 'idle',
  LOADING: 'loading',
  SUCCESS: 'success',
  ERROR: 'error'
};

const ACTIONS = {
  FETCH: 'fetch',
  SUCCESS: 'success',
  ERROR: 'error',
  RESET: 'reset'
};

function dataFetchReducer(state, action) {
  switch (state.status) {
    case STATES.IDLE:
      switch (action.type) {
        case ACTIONS.FETCH:
          return { status: STATES.LOADING, data: null, error: null };
        default:
          return state;
      }
    case STATES.LOADING:
      switch (action.type) {
        case ACTIONS.SUCCESS:
          return { status: STATES.SUCCESS, data: action.payload, error: null };
        case ACTIONS.ERROR:
          return { status: STATES.ERROR, data: null, error: action.payload };
        default:
          return state;
      }
    case STATES.SUCCESS:
    case STATES.ERROR:
      switch (action.type) {
        case ACTIONS.FETCH:
          return { status: STATES.LOADING, data: null, error: null };
        case ACTIONS.RESET:
          return { status: STATES.IDLE, data: null, error: null };
        default:
          return state;
      }
    default:
      return state;
  }
}

Performance Optimization Strategies

Memoization with useMemo and useCallback

import React, { useMemo, useCallback, memo } from 'react';

const ExpensiveComponent = memo(({ items, onItemClick }) => {
  const expensiveValue = useMemo(() => {
    return items.reduce((acc, item) => acc + item.value, 0);
  }, [items]);

  return (
    <div>
      <p>Total: {expensiveValue}</p>
      {items.map(item => (
        <Item 
          key={item.id} 
          item={item} 
          onClick={onItemClick} 
        />
      ))}
    </div>
  );
});

function ParentComponent() {
  const [items, setItems] = useState([]);

  const handleItemClick = useCallback((item) => {
    // Handle item click
    console.log('Item clicked:', item);
  }, []);

  return (
    <ExpensiveComponent 
      items={items} 
      onItemClick={handleItemClick} 
    />
  );
}

State Splitting for Better Performance

Instead of keeping all state in one large object, split it into smaller, focused pieces:

// Instead of this:
const [appState, setAppState] = useState({
  user: null,
  posts: [],
  comments: [],
  ui: { loading: false, error: null }
});

// Do this:
const [user, setUser] = useState(null);
const [posts, setPosts] = useState([]);
const [comments, setComments] = useState([]);
const [ui, setUi] = useState({ loading: false, error: null });

Best Practices and Guidelines

Start Simple: Begin with useState and useEffect. Only introduce complexity when needed.
Colocate State: Keep state as close to where it's used as possible.
Use Custom Hooks: Extract reusable stateful logic into custom hooks.
Consider State Machines: For complex UI states, state machines provide clarity and prevent impossible states.
Optimize Carefully: Profile before optimizing. Not every component needs memo or useMemo.
Test Your State Logic: State management logic should be thoroughly tested, especially reducers and custom hooks.

Conclusion

Modern React applications require thoughtful state management strategies. By understanding and applying these patterns - from useReducer and Context API to custom hooks and performance optimization techniques - you can build React applications that are both scalable and maintainable.

The key is to choose the right tool for the job. Simple local state might only need useState, while complex application state might benefit from a combination of useReducer, Context API, and custom hooks. Remember, the best state management solution is the one that makes your code more readable and maintainable for your specific use case.

As you continue to build React applications, these patterns will become second nature, allowing you to focus on creating great user experiences rather than wrestling with state management complexity.