Forem: Mayank Goyal

Architecting Large-Scale Next.js Applications (Folder Structure, Patterns, Best Practices)

Mayank Goyal — Mon, 13 Apr 2026 10:25:46 +0000

“Good architecture makes the system easy to understand; great architecture makes it hard to break.”

Key Takeaways

Feature-based architecture is critical
Separate UI, logic, and data layers
Prefer server components for performance
Centralize API logic
Use scalable state management
Optimize early, not later

Index

Introduction
Why Architecture Matters
Core Principles of Scalable Architecture
Advanced Folder Structure (Enterprise-Level)
Architectural Patterns (Deep Dive)
State Management at Scale
Data Fetching & API Layer Design
Authentication & Authorization Architecture
Performance Optimization (Advanced)
Error Handling & Logging
Testing Strategy (Production-Ready)
Dev Experience & Code Quality
Deployment & Infrastructure Strategy
Real-World Example (Enterprise Dashboard)
Interesting Facts
Stats
FAQ’s
Conclusion

Introduction

Building small Next.js apps is easy. Scaling them to support millions of users, multiple developers, and complex business logic is not.
Large-scale applications require:

Clean architecture
Predictable structure
Separation of concerns
Strong conventions Next.js (especially App Router) provides powerful primitives, but it does NOT enforce architecture, that’s your responsibility.

This guide gives you a production-grade blueprint.

Why Architecture Matters

At scale, poor architecture leads to:

Tight coupling between components
Duplicate logic across features
Slow builds & performance bottlenecks
Difficult onboarding for new developers

Good architecture enables:

Independent feature development
Faster debugging
Better scalability
Easier refactoring

Core Principles of Scalable Architecture

1. Separation of Concerns
Divide responsibilities:

UI → components
Logic → hooks/services
Data → API layer

2. Feature Isolation
Each feature should be self-contained.
Think like mini-apps inside your app.

3. Single Responsibility Principle
Each file/module should do one thing well.

4. Dependency Direction
Components depend on hooks
Hooks depend on services
Services depend on APIs
NOT the other way around.

5. Scalability First Mindset
Design for scale even if you’re small today.

Advanced Folder Structure (Enterprise-Level)

src/
│
├── app/                         # Next.js App Router
│   ├── (public)/
│   ├── (auth)/
│   ├── dashboard/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│
├── features/                    # Feature modules (CORE)
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── api/
│   │   ├── store/
│   │   └── types.ts
│   │
│   ├── products/
│   ├── orders/
│   └── users/
│
├── shared/                      # Cross-feature reusable code
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   └── constants/
│
├── core/                        # App-level logic
│   ├── config/
│   ├── providers/
│   ├── middleware/
│   └── guards/
│
├── services/                    # Global services (rare)
├── lib/                         # Low-level utilities
├── types/                       # Global types
├── styles/
└── tests/

“Fetching data is easy. Fetching it efficiently is architecture.”

Key Insight
Avoid “global chaos” folders like components/ for everything
Prefer feature-based grouping

Architectural Patterns (Deep Dive)

1. Feature-Based Architecture (MOST IMPORTANT)
Each feature owns:
UI
logic
API calls
state

features/products/
    components/
    hooks/
    services/
    store/

2. Layered Architecture

UI Layer (Components)
↓
Hooks Layer (Business Logic)
↓
Service Layer (API Calls)
↓
API Layer (External systems)

3. Server vs Client Component Strategy

Example:

// Server Component
export default async function Page() {
  const data = await getProducts();
  return <ProductsClient data={data} />;
}

4. Smart vs Dumb Components
Smart → fetch + logic
Dumb → UI only

5. Composition Pattern
Avoid inheritance. Use composition:

<Card>
  <ProductInfo />
</Card>

State Management at Scale

When NOT to use global state

Static data
Server-fetched data

Recommended Strategy

Example (Zustand Advanced)

import { create } from 'zustand';
export const useCartStore = create((set) => ({
  items: [],
  addItem: (item) =>
    set((state) => ({ items: [...state.items, item] })),
  clearCart: () => set({ items: [] })
}));

Data Fetching & API Layer Design

Bad Practice
Calling fetch directly in components everywhere.

Good Practice

features/products/
  services/productService.ts

export const getProducts = async () => {
  const res = await fetch('/api/products');
  return res.json();
};

“Every unnecessary render is a tax on your use.”

Caching Strategy

Authentication & Authorization Architecture

Recommended Setup

Middleware for route protection
Server-side session validation
Role-based access Example:

// middleware.ts
export function middleware(req) {
  const token = req.cookies.get('token');
  if (!token) return Response.redirect('/login');
}

Performance Optimization (Advanced)

Techniques

Code splitting (dynamic imports)
Partial hydration
Edge rendering
Image optimization
Memoization

Example

const Chart = dynamic(() => import('./Chart'), {
  ssr: false
});

Error Handling & Logging

Centralized Error Handling

export const handleError = (error) => {
  console.error(error);
};

Logging Tools

Sentry
LogRocket

Testing Strategy (Production-Ready)

Example

test('adds item to cart', () => {
  const store = useCartStore.getState();
  store.addItem({ id: 1 });
  expect(store.items.length).toBe(1);
});

Dev Experience & Code Quality

ESLint + Prettier
Husky (pre-commit hooks)
Strict TypeScript
Absolute imports (@/features/...)

Deployment & Infrastructure Strategy

Recommended Stack

Hosting → Vercel
DB → PostgreSQL
CDN → Cloudflare
Monitoring → Sentry

Scaling Tips

Use Edge Functions
Optimize bundle size
Enable caching

Real-World Example (Enterprise Dashboard)

Structure

features/dashboard/
   components/
      StatsCard.tsx
   hooks/
      useStats.ts
   services/
      dashboardService.ts

Service

export const fetchStats = async () => {
  const res = await fetch('/api/stats');
  return res.json();
};

Hook

export const useStats = () => {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    fetchStats().then(setStats);
  }, []);

  return stats;
};

Component

export const StatsCard = ({ data }) => {
  return <div>{data.totalUsers}</div>;
};

Page

export default function DashboardPage() {
  const stats = useStats();

  if (!stats) return <p>Loading...</p>;

  return <StatsCard data={stats} />;
}

Interesting Facts

Next.js App Router defaults to Server Components.Source: https://nextjs.org/docs/app/building-your-application/rendering/server-components
Middleware runs at the Edge.Source: https://nextjs.org/docs/pages/api-reference/file-conventions/middleware
File-based routing reduces ~40% boilerplate.Source: https://nextjs.org/docs/app/building-your-application/routing
Built-in optimizations replace many libraries.Source: https://nextjs.org/docs/architecture
ISR allows hybrid static + dynamic pages.Source: https://nextjs.org/docs/pages/building-your-application/rendering/incremental-static-regeneration

Stats

Next.js is one of the fastest-growing React frameworks and is widely adopted for production-grade applications. Source: https://nextjs.org/showcase
Next.js has 120,000+ stars on GitHub, reflecting its strong developer adoption and community support. Source: https://github.com/vercel/next.js
According to the State of JS survey, Next.js consistently ranks among the top frameworks in developer satisfaction and usage. Source: https://stateofjs.com/
Vercel, the company behind Next.js, serves billions of requests per week across applications deployed on its platform. Source: https://vercel.com/customers
Next.js enables hybrid rendering (SSR, SSG, ISR), which improves performance and scalability for modern web applications. Source: https://nextjs.org/docs/pages/building-your-application/rendering
File-based routing in Next.js simplifies development by automatically mapping files to routes, reducing manual configuration. Source: https://nextjs.org/docs/app/building-your-application/routing

FAQ’s

Q1. Is Redux necessary?
No. Use Zustand unless you need complex workflows.

Q2. How to organize large teams?

Feature ownership
Code reviews
Clear folder structure

Q3. Should I use monorepo?
Yes, for multi-app systems (Nx / Turborepo).

Q4. Where to keep reusable components?
shared/components

Q5. What is the biggest mistake?
Mixing everything in global folders.

Conclusion

Scaling a Next.js application is more about architecture than code. The difference between a messy app and a scalable system lies in:

Structure
Discipline
Consistency By following feature-based design, layered architecture, and modern Next.js patterns, you can build applications that scale effortlessly with both users and teams.

About the Author:Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.

Practical Techniques for Optimizing React Performance in Production: A Developer’s Guide

Mayank Goyal — Thu, 26 Mar 2026 10:34:57 +0000

"Premature optimization is the root of all evil." - Donald Knuth

Introduction

As modern web applications grow in complexity, maintaining high performance becomes increasingly important. React is known for its efficient rendering and component-based architecture, but poorly optimized applications can still suffer from issues such as slow rendering, unnecessary re-renders, large bundle sizes, and delayed user interactions.

Optimizing React applications in production environments requires a combination of architectural decisions, efficient state management, and performance monitoring.

This guide explores practical techniques developers can use to optimize React performance in production, helping applications remain fast, scalable, and responsive even as they grow.

Key Takeaways

Avoid unnecessary component re-renders using React.memo, useMemo, and useCallback.
Use code splitting and lazy loading to reduce initial bundle size.
Implement list virtualization when rendering large datasets.
Optimize state management to prevent unnecessary updates.
Use debouncing and throttling for expensive operations like search or scroll events.
Regularly monitor performance using React DevTools and browser profiling tools.

Index

Understanding React Performance Optimization
Detailed Comparison of Optimization Techniques
Implementation Overview
When to Use Each Optimization Strategy
Developer Recommendations
Code Examples
FAQ
Interesting Facts
Conclusion

1. Understanding React Performance Optimization

1.1 Preventing Unnecessary Re-Renders
React re-renders components whenever their state or props change. While React's Virtual DOM minimizes DOM updates, unnecessary re-renders can still affect performance.

Key Techniques

React.memo
Prevents functional components from re-rendering when props have not changed.

useMemo
Caches the result of expensive computations.

useCallback
Prevents functions from being recreated on every render.

Best For

Components that render frequently
Expensive calculations inside components
Preventing unnecessary child component updates

1.2 Code Splitting and Lazy Loading
Large JavaScript bundles increase page load time and negatively impact performance.
Code splitting allows loading only the code required for the current view.
React provides built-in support through:

React.lazy
Suspense

Benefits

Faster initial page load
Reduced bundle size
Improved performance on slower networks

Best For

Large applications
Route-based components
Feature-heavy dashboards

1.3 Virtualizing Large Lists
Rendering thousands of DOM elements simultaneously can slow down the browser.
List virtualization renders only the items visible in the viewport.
Popular libraries include:

react-window
react-virtualized

Best For

Large tables
Infinite scrolling lists
Analytics dashboards

2. Detailed Comparison

2.1 Rendering Optimization

2.2 Bundle Optimization

2.3 Event Optimization

3. Implementation Overview

3.1 Memoizing Components
Flow:

Component receives props
React compares previous and new props
If props are unchanged, rendering is skipped

Pros

Reduces unnecessary rendering
Improves UI responsiveness
Useful in component-heavy applications

3.2 Code Splitting in React
Flow:

User visits application
Initial bundle loads
Additional components load on demand
Suspense displays fallback UI

Pros

Faster application startup
Reduced network usage
Better scalability for large apps

3.3 Virtualizing Lists
Flow:

Large dataset fetched
Only visible rows rendered
Rows dynamically mounted/unmounted during scroll

Pros

Reduces DOM nodes
Smooth scrolling
Improves memory usage

4. When to Use Each Optimization Technique

Use Memoization If

Components render frequently
Parent components trigger unnecessary updates
Expensive calculations occur during rendering

Use Code Splitting If

Your bundle size is large
Your app has multiple pages
You want faster initial load time

Use Virtualization If

Rendering thousands of items
Working with large datasets
Building analytics dashboards or tables

5. Developer Recommendation

For most production React applications, the following performance practices provide the biggest impact:

Memoize components when necessary
Implement route-based code splitting
Use virtualization for large lists
Debounce expensive API requests
Continuously monitor performance using profiling tools

Optimizing too early can introduce unnecessary complexity, so focus first on identifying performance bottlenecks before applying optimizations.

6. Code Examples

6.1 Preventing Re-renders with React.memo

import React from "react";

const UserCard = React.memo(({ name }) => {
  console.log("Rendering UserCard");

  return <div>{name}</div>;
});

export default UserCard;

6.2 Using useMemo for Expensive Calculations

import { useMemo } from "react";

function ExpensiveComponent({ items }) {

  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a.price - b.price);
  }, [items]);

  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

6.3 Lazy Loading Components

import React, { Suspense } from "react";

const Dashboard = React.lazy(() => import("./Dashboard"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

6.4 Debouncing API Calls

import debounce from "lodash/debounce";

const searchUsers = debounce(async (query) => {
  const response = await fetch(`/api/users?q=${query}`);
  return response.json();
}, 300);

7. FAQ

1. What causes poor React performance?
Common causes include:

Unnecessary re-renders
Large bundle sizes
Rendering large lists
Heavy computations during rendering

2. Should every component use React.memo?
No. Memoization adds comparison overhead. Use it only when performance issues exist.

3. What tool helps identify slow components?
React DevTools Profiler helps identify slow rendering components.

4. Is lazy loading good for SEO?
It can be, but server-side rendering (SSR) may be required for SEO-critical pages.

5. What is the biggest performance win in React apps?
Reducing bundle size and unnecessary re-renders typically provides the largest improvements.

8. Interesting Facts

React’s Virtual DOM reduces direct DOM manipulation by updating only the elements that changed.Source:https://react.dev/learn/render-and-commit
The React Profiler tool allows developers to measure rendering performance and detect unnecessary updates.Source:https://react.dev/reference/react/Profiler
Libraries like react-window can reduce thousands of DOM nodes to just a few dozen visible elements.Source:https://github.com/bvaughn/react-window

"Programs must be written for people to read, and only incidentally for machines to execute." – Harold Abelson

9. Conclusion

Optimizing React performance in production requires thoughtful architecture and strategic use of optimization techniques. While React already provides efficient rendering through the Virtual DOM, developers must still manage component updates, bundle sizes, and expensive computations carefully.

By applying techniques such as memoization, code splitting, virtualization, and event optimization, developers can significantly improve application responsiveness and scalability.
The key is to identify real performance bottlenecks first and apply targeted optimizations, ensuring the application remains both maintainable and performant.

About the Author: Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.

Next.js 14: Server Actions and App Router Deep Dive

Mayank Goyal — Tue, 24 Feb 2026 13:03:59 +0000

“Server Actions remove the invisible wall between UI and backend logic.”

Server Actions and the App Router represent the biggest shift in Next.js since its inception, unifying frontend and backend development in a single framework. If you're building full-stack applications where server-side logic, caching, and instant mutations matter, Next.js 14 delivers a paradigm shift that eliminates traditional API routes for most use cases.

This guide walks you through mastering Server Actions, understanding the App Router's file-based routing, implementing intelligent caching strategies, and building production-grade applications with React Server Components (RSCs).

Key Takeaways

Use Server Components by default.
Client Components only when interactivity is needed.
Server Actions eliminate API route boilerplate and bring async functions directly to forms.
App Router's folder structure creates routes automatically without configuration.
Implement caching with next.revalidate and revalidateTag for intelligent data updates.
Use useActionState for form state management and pending indicators.
Server Actions provide type-safe mutations and automatic serialization.

Index

Why Server Actions and App Router Matter
Server Components vs Client Components
The App Router Folder Structure
Understanding Server Actions
Building Forms with Server Actions
State Management with useActionState
Data Fetching and Caching Strategies
Revalidation: Time-based and On-demand
Security and Validation Best Practices
Common Mistakes to Avoid
FAQs
Interesting Facts & Stats
Conclusion

1. Why Server Actions and App Router Matter

"Server Actions merge backend and frontend, eliminating the API route middle man."

Next.js 14 fundamentally changed how developers approach full-stack development. Instead of building separate API endpoints, Server Actions let you write async functions that run on the server while being called directly from your components.

This approach enables:

Reduced boilerplate: No more API routes, validation layers, or serialization logic.
Type safety: Automatic TypeScript inference between server and client.
Simplified mutations: Forms directly trigger database updates without API calls.
Better performance: Server-side caching and data revalidation work seamlessly.
Improved DX: Single codebase for both frontend and backend logic.
The App Router's file-based routing (replacing Pages Router) makes your project structure self-documenting and scalable.

2. Server Components vs Client Components

Understanding when to use Server Components vs Client Components is fundamental to mastering Next.js 14.

Server Components by default significantly reduce JavaScript shipped to the browser.

3. The App Router Folder Structure

The App Router uses the file system for routing, eliminating manual configuration.
Basic routing structure:

app/
├── page.tsx # / route
├── layout.tsx # Root layout
├── blog/
│ ├── page.tsx # /blog route
│ └── [id]/
│ └── page.tsx # /blog/:id dynamic route
├── dashboard/
│ ├── layout.tsx # Nested layout
│ ├── page.tsx # /dashboard route
│ └── stats/
│ └── page.tsx # /dashboard/stats
├── (admin)/ # Route group, doesn't appear in URL
│ ├── users/
│ │ └── page.tsx # /users (not /admin/users)
│ └── settings/
│ └── page.tsx # /settings
├── _components/ # Private folder, not a route
│ ├── Header.tsx
│ └── Footer.tsx
└── actions/
└── formActions.ts # Server Actions directory

Key concepts:

Routes map directly to folders: app/blog/page.tsx = /blog route
Dynamic routes use brackets: [id] becomes a route parameter
Route groups with parentheses organize code without affecting URLs: (admin)
Private folders with underscore hide from routing: _components, _utils
layout.tsx creates shared UI for routes and children This structure is self-documenting and scales naturally with your application.

4. Understanding Server Actions

Server Actions are async functions that run exclusively on the server.

Basic Server Action:

'use server'
import { db } from '@/lib/db'
export async function createPost(formData: FormData) {
const title = formData.get('title') as string
const content = formData.get('content') as string
if (!title || !content) {
    return { error: 'Title and content are required' }
}

try {
    const post = await db.post.create({
        data: { title, content }
    })
    return { success: true, data: post }
} catch (error) {
    return { error: 'Failed to create post' }
}


}

Calling from a form:

'use client'

import { createPost } from '@/actions/posts'

export function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" />
      <textarea name="content" placeholder="Content" />
      <button type="submit">Create Post</button>
    </form>
  )
}

When the form submits, createPost runs on the server with automatic FormData handling.

5. Building Forms with Server Actions

Server Actions transform form handling by eliminating client-side API calls.
Advanced form example with validation:

'use server'
import { z } from 'zod'
import { revalidatePath } from 'next/cache'
const schema = z.object({
email: z.string().email('Invalid email'),
password: z.string().min(8, 'Password too short'),
name: z.string().min(2, 'Name required')
})
export async function signupUser(formData: FormData) {
const rawData = {
email: formData.get('email'),
password: formData.get('password'),
name: formData.get('name')
}
const validated = schema.safeParse(rawData)

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

try {
    const user = await db.user.create({
        data: validated.data
    })

    revalidatePath('/dashboard')
    return { success: true, message: 'User created' }
} catch (error) {
    return { error: 'User already exists' }
}
}

Client form with error display:

'use client'
import { signupUser } from '@/actions/auth'
export function SignupForm() {
const [state, formAction, pending] = useActionState(
signupUser,
{ errors: null }
)
return (
    <form action={formAction} className="space-y-4">
        <div>
            <input
                name="email"
                type="email"
                placeholder="Email"
                className="w-full"
            />
            {state?.errors?.email && (
                <p className="text-red-500">{state.errors.email[0]}</p>
            )}
        </div>

        <div>
            <input
                name="password"
                type="password"
                placeholder="Password"
                className="w-full"
            />
            {state?.errors?.password && (
                <p className="text-red-500">{state.errors.password[0]}</p>
            )}
        </div>

        <button
            type="submit"
            disabled={pending}
            className="bg-blue-600 text-white"
        >
            {pending ? 'Creating...' : 'Sign up'}
        </button>
    </form>
)
}

This pattern eliminates API routes entirely while maintaining type safety.

6. State Management with useActionState

useActionState manages form state, errors, and pending status elegantly.
Complete example with toast notifications:

'use client'
import { useActionState } from 'react'
import { updateProfile } from '@/actions/profile'
import { useToast } from '@/hooks/useToast'
export function ProfileForm({ user }) {
const { toast } = useToast()
const [state, formAction, pending] = useActionState(
async (prevState, formData) => {
const result = await updateProfile(formData)
        if (result.success) {
            toast({
                title: 'Success',
                description: result.message
            })
        }

        return result
    },
    { success: false }
)

return (
    <form action={formAction} className="space-y-4">
        <input
            name="email"
            defaultValue={user.email}
            className="w-full px-3 py-2 border"
        />

        <textarea
            name="bio"
            defaultValue={user.bio}
            className="w-full px-3 py-2 border"
        />

        <button
            type="submit"
            disabled={pending}
            className="bg-blue-600 disabled:opacity-50"
        >
            {pending ? 'Saving...' : 'Save Changes'}
        </button>

        {state?.error && (
            <p className="text-red-500">{state.error}</p>
        )}
    </form>
)
}

useActionState provides pending state for loading indicators and automatic state management.

7. Data Fetching and Caching Strategies

Next.js 14 implements intelligent caching at the fetch level.
Fetch caching options:

// Static Site Generation (SSG) - default, cached forever
export async function getStaticPosts() {
const posts = await fetch('https://api.example.com/posts')
return posts.json()
}
// Time-based revalidation - cache for 1 hour
export async function getPostsWithTTL() {
const posts = await fetch('https://api.example.com/posts', {
next: { revalidate: 3600 }
})
return posts.json()
}
// Dynamic fetch - no caching, always fresh
export async function getFreshPosts() {
const posts = await fetch('https://api.example.com/posts', {
cache: 'no-store'
})
return posts.json()
}
// Tag-based revalidation for granular control
export async function getTaggedPosts() {
const posts = await fetch('https://api.example.com/posts', {
next: { tags: ['posts'] }
})
return posts.json()
}

Segment-level caching in layout or page:

// Revalidate all fetches in this segment every hour
export const revalidate = 3600

Caching reduces database load and improves performance significantly.

8. Revalidation: Time-based and On-demand

Revalidation keeps cached data fresh without manual cache busting.
On-demand revalidation in Server Actions:

'use server'
import { revalidatePath, revalidateTag } from 'next/cache'
export async function publishPost(postId: string) {
// Update database
const post = await db.post.update({
where: { id: postId },
data: { published: true }
})
// Revalidate specific path
revalidatePath('/blog')

// Revalidate tagged fetches
revalidateTag('posts')

// Revalidate multiple paths
revalidatePath('/dashboard')
revalidatePath('/blog')

return { success: true }


}

Webhook example for CMS integration:

// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'
export async function POST(request: NextRequest) {
const secret = request.headers.get('x-revalidate-secret')
if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
}

const tag = request.headers.get('x-revalidate-tag')

if (tag) {
    revalidateTag(tag)
    return NextResponse.json({
        revalidated: true,
        now: Date.now()
    })
}

return NextResponse.json({
    error: 'Missing revalidate tag'
}, { status: 400 })


}

This enables fresh content without full rebuilds.

9. Security and Validation Best Practices

Server Actions provide security benefits, but require careful validation.
Secure Server Action pattern:

'use server'
import { auth } from '@/auth'
import { z } from 'zod'
const createPostSchema = z.object({
title: z.string().min(5).max(200),
content: z.string().min(10).max(5000),
published: z.boolean().default(false)
})
export async function createSecurePost(formData: FormData) {
// Verify authentication
const session = await auth()
if (!session?.user) {
throw new Error('Unauthorized')
}
// Validate input
const rawData = {
    title: formData.get('title'),
    content: formData.get('content'),
    published: formData.get('published') === 'true'
}

const validated = createPostSchema.safeParse(rawData)
if (!validated.success) {
    return { error: 'Invalid input', errors: validated.error.flatten() }
}

// Check authorization (user owns resource)
const existingPost = await db.post.findUnique({
    where: { id: formData.get('id') as string }
})

if (existingPost?.userId !== session.user.id) {
    throw new Error('Forbidden')
}

// Sanitize data before saving
const sanitized = {
    ...validated.data,
    userId: session.user.id,
    slug: validated.data.title
        .toLowerCase()
        .replace(/[^\w-]/g, '')
}

const post = await db.post.create({ data: sanitized })
return { success: true, data: post }
}

Never trust FormData alone; always validate and authorize.

10. Common Mistakes to Avoid

Forgetting 'use server' directive (action won't run on server).
Using Client Components when Server Components are sufficient (larger bundles).
Not validating FormData (security vulnerability).
Mixing API routes with Server Actions (unnecessary boilerplate).
Forgetting revalidation after mutations (stale data).
Not handling errors in Server Actions (silent failures).
Overusing route groups (can confuse project structure).

“If everything is a Client Component, nothing is optimized.”

11. FAQs

Q. Should I use Server Actions for all mutations?
Yes. Server Actions are now the preferred way to handle mutations in Next.js 14, replacing traditional API routes for most use cases.
Q. When should I use API routes instead of Server Actions?
Use API routes only for third-party integrations (webhooks, external services) or when you need HTTP-specific features.
Q. Can I call Server Actions from Client Components?
Yes, Server Actions work in both Server and Client Components by importing and calling them directly.
Q. How do I handle file uploads with Server Actions?
Use FormData with File objects; Next.js automatically handles serialization.
Q. What's the difference between revalidatePath and revalidateTag?
revalidatePath invalidates specific routes; revalidateTag invalidates all fetches tagged with a specific key.

12. Interesting Facts & Stats

Vercel's Next.js 14 adoption shows 40%+ performance improvements when migrating from Pages Router to App Router. https://nextjs.org/blog/next-14?
Server Actions reduce API route code by 70%+ in typical applications.https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
React Server Components eliminate the need for getServerSideProps and getStaticProps entirely.https://nextjs.org/docs/app/building-your-application/rendering/server-components
The App Router's file-based routing matches industry leaders like Remix and SvelteKit.https://nextjs.org/docs/app/building-your-application/routing
On-demand revalidation enables statically generated pages to update in milliseconds without rebuilds. https://nextjs.org/docs/app/building-your-application/routing

13. Conclusion

Next.js 14's Server Actions and App Router represent the future of full-stack development. By defaulting to Server Components, building forms with Server Actions, and implementing intelligent caching, you create fast, type-safe applications that feel like the web platform was designed for them.
Whether you're migrating from Pages Router or building new projects, mastering these concepts transforms your development experience and your application's performance.

About the Author: Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.

Authentication Strategies in Node.js: JWT, OAuth, and Sessions

Mayank Goyal — Mon, 12 Jan 2026 11:22:56 +0000

"Clean code always looks like it was written by someone who cares." - Robert C. Martin

Introduction

Building secure authentication in a Node.js backend with a modern frontend (React, Next.js, or mobile apps) is one of the most critical architectural decisions in any web application. Node.js offers multiple authentication strategies, but three approaches dominate real-world systems:

Session-based Authentication
JWT (JSON Web Token) Authentication
OAuth 2.0 Authentication

Each strategy comes with trade-offs in terms of security, scalability, and complexity. Choosing the right one depends on your application architecture, client types, and long-term scalability goals.
This document serves as a detailed comparison and practical guide to help developers choose the right authentication strategy in Node.js applications.

Key Takeaways

Sessions are simple, secure, and ideal for traditional web apps.
JWT is stateless and scalable, perfect for APIs and microservices.
OAuth is enterprise-grade and best for third-party or multi-client systems.
The right choice depends on architecture, scale, and security requirements.
Avoid overengineering: choose the simplest solution that meets your needs.

Index

Understanding Authentication Approaches
Detailed Comparison
Implementation Overview
When to Choose What
Developer Recommendation
Code Examples
FAQ
Interesting Facts
Conclusion

1. Understanding the Authentication Approaches

1.1 Session-Based Authentication
Session-based authentication is the traditional and most widely used method for web applications. The server stores session data, and the client identifies itself using a session ID stored in cookies.
Key Features:

Server-side session storage
Cookie-based authentication
Built-in CSRF protection
Easy to implement with Express

Best For:

Traditional web applications
Monolithic architectures
Applications with server-rendered pages

1.2 JWT Authentication
JWT authentication uses self-contained tokens that are issued by the server and stored on the client. The token is sent with every request for authentication.

Key Features:

Stateless authentication
No server-side session storage
Easy horizontal scaling
Works well across domains

Best For:

REST APIs
Microservices architectures
Mobile and SPA clients

1.3 OAuth 2.0 Authentication

OAuth 2.0 is an industry-standard authorization framework used for delegated access. It allows users to grant access to third-party applications without sharing credentials.
Key Features:

Access tokens and refresh tokens
Scopes and granular permissions
Secure third-party authentication
Widely supported by providers (Google, GitHub, Facebook)

Best For:

Enterprise applications
Multi-client ecosystems
Third-party integrations

2. Detailed Comparison

2.1 Security

2.2 Performance

2.3 Complexity

3. Implementation Overview

3.1 Using Sessions with React
Flow:

User logs in
Server creates a session
Session ID stored in cookie
Cookie sent automatically with each request

Pros:

Highly secure
No token handling in frontend
Built-in CSRF protection

3.2 Using JWT with React
Flow:

User logs in
Server issues JWT
Client stores token
Token sent via Authorization header

Pros:

Stateless
Easy to scale
Suitable for APIs

3.3 Using OAuth with React
Flow:

User redirected to OAuth provider
Provider authenticates user
Authorization code exchanged for token
Access token used for API calls

Pros:

Industry standard
Secure third-party access
Fine-grained permissions

4. When to Choose What

Use Sessions If:

You are building a traditional web app
Backend and frontend share the same domain
You want maximum security with minimal complexity

Use JWT If:

You are building APIs or microservices
You need stateless authentication
You expect horizontal scaling

Use OAuth If:

You need third-party login
You have multiple client types
You are building enterprise-grade systems

5. Developer Recommendation

For most Node.js + React, applications:

Use Session-based authentication for web apps
Use JWT for APIs and microservices
OAuth should only be introduced when third-party access or multi-client authorization is required.

6. Code Examples

6.1 Session Authentication (Node.js + Express)

import session from "express-session";

app.use(
  session({
    secret: "secret_key",
    resave: false,
    saveUninitialized: false,
    cookie: { httpOnly: true }
  })
);

6.2 JWT Authentication Example

Node.js Login Route:

import jwt from "jsonwebtoken";

app.post("/login", (req, res) => {
  const token = jwt.sign(
    { id: user.id },
    process.env.JWT_SECRET,
    { expiresIn: "1h" }
  );

  res.json({ access_token: token });
});

React Usages:

axios.get("/api/user", {
  headers: {
    Authorization: `Bearer ${token}`
  }
});

6.3 OAuth Example (Google OAuth)

passport.use(
  new GoogleStrategy({
    clientID: GOOGLE_CLIENT_ID,
    clientSecret: GOOGLE_CLIENT_SECRET,
    callbackURL: "/auth/google/callback"
  },
  (accessToken, refreshToken, profile, done) => {
    return done(null, profile);
  }
));

"Good architecture makes the system easy to change." - Robert C. Martin.

FAQ

1. Which authentication is best for Node.js APIs?

JWT is the most common and scalable choice.

2. Are sessions secure?

Yes, especially with httpOnly cookies and CSRF protection.

3. Is OAuth necessary for small apps?

No, OAuth is best for enterprise or third-party access.

4. Are JWT tokens secure?

Yes, when stored in httpOnly cookies and short-lived.

5. Which method scales best?

JWT and OAuth are ideal for distributed systems.

Interesting Facts

JWTs are signed, not encrypted, by default. Source: https://jwt.io/introduction
OAuth 2.0 was designed to replace OAuth 1.0 due to complexity. Source: https://oauth.net/2/
Express-session stores only a session ID in cookies, not user data. Source: https://expressjs.com/
Passport.js supports 500+ authentication strategies. Source: http://www.passportjs.org/

"Programs must be written for people to read, and only incidentally for machines to execute." - Harold Abelson.

Conclusion

Choosing the correct authentication strategy in Node.js depends on your system’s architecture, scale, and security needs. Sessions are perfect for traditional web apps, JWT excels in APIs and microservices, and OAuth shines in enterprise and third-party ecosystems.
By understanding these trade-offs, developers can design secure, scalable, and maintainable authentication systems without unnecessary complexity.

About the Author: Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.

Laravel + React Authentication the Right Way: Sanctum, JWT, or Passport? A Developer’s Comparison

Mayank Goyal — Wed, 24 Dec 2025 05:39:09 +0000

"Good software is built by solving the right problems, not by using the fanciest tools." - Anonymous.

Introduction

Building secure authentication between a Laravel backend and a React frontend is one of the most important architectural decisions in any modern web application. Laravel provides multiple ways to authenticate SPAs and APIs, with three popular choices dominating the ecosystem:

Laravel Sanctum
Laravel Passport (OAuth2)
JWT Authentication

Each approach has its strengths depending on the project type, security requirements, and frontend‑backend workflow. This document serves as a detailed comparison and practical guide to help developers choose the right solution.

Key Takeaways

Sanctum is simple, secure, and ideal for React SPAs.
Passport is enterprise-focused, great for OAuth2 and multi-client ecosystems.
JWT is stateless and scalable, perfect for microservices.
The right authentication method depends on architecture, clients, and security needs.
Avoid overengineering: choose the simplest tool that meets your requirements.

Index

Understanding Authentication Approaches
Detailed Comparison
Implementation Overview
When to Choose What
Developer Recommendation
Code Examples
FAQ
Interesting Facts
Conclusion

1. Understanding the Authentication Approaches

1.1 Laravel Sanctum
Laravel Sanctum is a lightweight authentication system designed specifically for SPAs, mobile apps, and token‑based APIs. It provides cookie‑based authentication for SPAs and API tokens for external integrations.
Key Features:

Cookie‑based session authentication for SPAs
CSRF protection built‑in
Supports simple token generation for APIs
Easier to set up compared to Passport

Best For:

Single‑page applications using React
First‑party apps where backend and frontend share a domain or subdomain

1.2 Laravel Passport (OAuth2)
Laravel Passport provides a full OAuth2 server implementation. It is powerful and designed for large‑scale or multi‑client authentication needs.
Key Features:

Complete OAuth2 authorization server
Access tokens, refresh tokens, and scopes
Works well for multi‑client access (e.g., mobile + SPA + 3rd‑party apps)

Best For:

Enterprise applications
Multi‑tenant systems
Third‑party integrations needing OAuth2 compliance

1.3 JWT Authentication
JWT (JSON Web Token) authentication is a stateless token‑based solution. Laravel doesn’t include JWT out of the box but can use third‑party packages like tymon/jwt-auth.
Key Features:

Stateless authentication
Self‑contained tokens
Works across domains easily

Best For:

Microservices
Stateless APIs
Cross‑domain apps where cookies are not ideal

2. Detailed Comparison

2.1 Security

2.2 Performance

2.3 Complexity

3. Implementation Overview

3.1 Using Sanctum with React
Flow:

Frontend requests CSRF cookie
Frontend sends login request
Laravel authenticates and issues session cookie
SPA uses cookie for all requests (no token storage)

Pros:

Most secure for SPAs
No token stored in localStorage
Minimal setup

3.2 Using Passport with React
Flow:

React sends credentials to get OAuth token
Laravel returns access + refresh tokens
React stores tokens
Token refresh cycle implemented manually

Pros:

Industry‑standard OAuth2
Good for large apps

3.3 Using JWT with React
Flow:

User logs in
Laravel returns JWT
React stores token
Use token in Authorization headers

Pros:

Stateless and scalable
Ideal for microservices

4. When to Choose What

Use Sanctum If:

You are building a React SPA under the same domain
You want maximum security without storing tokens
You prefer simple setup with CSRF protection

Use Passport If:

You need OAuth2
You are building an enterprise app
You need multi‑client authentication (web, mobile, 3rd‑party)

Use JWT If:

Your system is distributed or microservices‑based
You need cross‑domain authentication
You want purely stateless auth

5. Developer Recommendation

For most Laravel + React SPA projects, the best and recommended method is:
Use Laravel Sanctum
It is secure, simple, and built exactly for first‑party single‑page applications.
JWT is second best for stateless or cross‑domain setups, while Passport is only needed for OAuth2‑specific use cases.

6. Code Examples

6.1 Sanctum + React Example

Laravel Backend (routes/api.php):

use Illuminate\Support\Facades\Route;

Route::middleware('auth:sanctum')->get('/user', function (Request $$request) {
    return $$request->user();
});

Route::post('/login', [AuthController::class, 'login']);

React Login Request:

import axios from "axios";

axios.defaults.withCredentials = true; // important for cookies

export const login = async (email, password) => {
  await axios.get("http://localhost:8000/sanctum/csrf-cookie");

  return axios.post("http://localhost:8000/api/login", {
    email,
    password,
  });
};

6.2 Passport + React OAuth Example

Laravel Token Request (routes/api.php):

Route::post('/oauth/token', [AccessTokenController::class, 'issueToken']);

React Token Request:

import axios from "axios";

export const getToken = async (email, password) => {
  return axios.post("http://localhost:8000/oauth/token", {
    grant_type: "password",
    client_id: YOUR_CLIENT_ID,
    client_secret: YOUR_CLIENT_SECRET,
    username: email,
    password: password,
    scope: "",
  });
};

6.3 JWT Auth Example
Laravel Login (Controller):

public function login(Request $$request)
{
    if (! $$token = auth()->attempt($$request->only('email','password'))) {
        return response()->json(['error' => 'Invalid credentials'], 401);
    }

    return response()->json([
        'access_token' => $$token,
        'token_type' => 'bearer',
        'expires_in' => auth()->factory()->getTTL() * 60
    ]);
}

React Login Example:

export const loginWithJwt = async (email, password) => {
  const response = await axios.post("http://localhost:8000/api/login", {
    email,
    password,
  });

  localStorage.setItem("token", response.data.access_token);
};

"First, solve the problem. Then, write the code." - John Johnson.

7. FAQ

1. Which authentication is best for a React SPA?
- Laravel Sanctum is the recommended choice for most SPAs.

2. Does Sanctum work across different domains?
- Yes, but JWT may be more appropriate for fully stateless cross-domain APIs.

3. Is Passport too heavy for small apps?
- Yes, Passport implements full OAuth2 and is only needed for enterprise-level needs.

4. Are JWT tokens secure?
- Yes, if stored properly (preferably in httpOnly cookies). Never store in localStorage if security is critical.

5. Which method scales best?

JWT is ideal for microservices and stateless distributed systems.

8. Interesting Facts

OAuth2 was originally created by Twitter and Google teams to improve delegated authorization.Source: https://oauth.net/2/
JWT tokens are simply Base64-encoded JSON objects and are not encrypted by default.Source: https://jwt.io/introduction
Laravel Sanctum was introduced in Laravel 7 as a lightweight alternative to Passport.Source: https://laravel.com/docs/10.x/sanctum
Passport uses the open-standard League OAuth2 server under the hood.Source: https://oauth2.thephpleague.com/

"Programs must be written for people to read, and only incidentally for machines to execute." - Harold Abelson.

9. Conclusion

Choosing the correct authentication method between Laravel and React depends on your architecture, security level, and scaling needs. Sanctum suits most modern SPAs, JWT works best for distributed systems, and Passport is ideal for enterprise OAuth2 implementations.
By understanding these differences, developers can architect secure, scalable, and efficient applications without over‑complicating their authentication layer.

About the Author: Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.

Vue.js Component Communication Patterns and Best Practices

Mayank Goyal — Wed, 05 Nov 2025 07:47:45 +0000

Vue.js is one of the most popular front-end frameworks for building modern web applications. One of its greatest strengths is its component-based architecture, which promotes reusability and maintainability.
However, as applications grow, developers often face a challenge: how should components communicate with each other efficiently? If not managed well, communication can quickly become messy, leading to tightly coupled components and difficult-to-maintain codebases.
This article explores the different component communication patterns in Vue.js, their use cases, pros and cons, and the best practices to follow.

Why Component Communication Matters
Imagine building a dashboard application where different components like user profiles, notifications, and charts need to exchange data. Without proper communication patterns:

Data could become inconsistent across components.
Debugging would be harder as multiple parts depend on each other.
Adding new features could break existing functionality.
By mastering Vue.js communication patterns, you ensure your app remains scalable, maintainable, and developer-friendly.

“Programs must be written for people to read, and only incidentally for machines to execute.” — Harold Abelson

Index

Communicate pattern
- Parent to child component (props)
- Child to parent communication with events
- Sibling communication
- Global event bus (Legacy approach)
- Provide/Inject
- Centralized state management (Vuex / Pinia)
- Slots for parent-to-child content
Choosing the right pattern
FAQs
Key Takeaways
Interesting Facts
Conclusion
Final Thoughts

1. Parent to Child Communication (Props)

The most straightforward way for a parent component to pass data to a child is through props.

<!-- Parent.vue -->
<UserCard :user="activeUser" />


<!-- UserCard.vue -->
<script>
export default {
  props: {
    user: {
    type: Object,
    required: true,
    },
  },
};
</script>
<!-- Template -->
<template>
  <div>
    <h3>{{ user.name }}</h3>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

When to Use

Passing static or reactive data from parent to child.
Creating reusable UI components like buttons, cards, and lists.
Pros
Simple and declarative and Easy to debug.
Cons
Can lead to prop drilling if data needs to be passed through many nested components.
Best Practice: Keep props small and predictable, validate types, and avoid deeply nested objects.

2. Child to Parent Communication with Events

When a child needs to send data back, it can emit custom events.

<!-- Child.vue -->
<button @click="$emit('update', { status: 'active' })">
  Activate
</button>


<!-- Parent.vue -->
<UserCard @update="handleStatusUpdate" />
methods: {
  handleStatusUpdate(payload) {
    console.log("User status updated:", payload.status);
  },
}

When to Use

A form component submitting data to its parent.
Buttons, inputs, or dropdowns updating parent state.
Pros
Keeps child components decoupled.
Parent remains in control of state.
Cons
For deeply nested children, event chains may become hard to manage.
Best Practice: Use descriptive event names (e.g., update:status, form:submit) and leverage the v-model syntax for two-way binding.

3. Sibling Communication

Siblings don’t directly communicate, but they can share data through their common parent.

<!-- Parent.vue -->
<FilterPanel @filter-changed="filter = $event" />
<DataTable :filter="filter" />

Here, the filter selected in FilterPanel affects the DataTable.
When to Use

Small to medium apps where sibling components need to share data.
Pros
Clear, explicit data flow.
Cons
Requires parent mediation, which may introduce prop drilling in larger apps.
Best Practice: For small cases, use parent as mediator; for larger apps, move shared state into Pinia or Vuex.

4. Global Event Bus (Legacy Approach)

Before Vuex/Pinia, developers often used an event bus for cross-component communication.

// eventBus.js
import mitt from "mitt";
export const eventBus = mitt();

// ComponentA.vue
eventBus.emit("notify", "New message received!");

// ComponentB.vue
eventBus.on("notify", (msg) => console.log(msg));

Pros

Quick to set up.
Cons
Hard to debug and maintain.
Events can become untraceable spaghetti.
Best Practice: Avoid event bus in production. Use it only for small prototypes.

“Good architecture is like a good conversation - everyone knows when to speak and when to listen.”

5. Provide/Inject

The provide/inject API allows passing data deep down the tree without drilling props.

<!-- App.vue -->
<script setup>
import { provide } from "vue";
provide("theme", "dark");
</script>

<!-- DeepChild.vue -->
<script setup>
import { inject } from "vue";
const theme = inject("theme");
</script>

<template>
 <p>Current theme: {{ theme }}</p>
</template>

When to Use

Sharing global configuration like themes, localization, or authentication.
Pros
Prevents prop drilling.
Great for cross-cutting concerns.
Cons
Can make dependencies implicit.
Debugging can be harder if overused.
Best Practice: Use provide/inject sparingly for context-like data.

6. Centralized State Management (Vuex / Pinia)

For large-scale apps, state management libraries are essential. Vue 3 recommends Pinia over Vuex.

// stores/user.js
import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => ({ name: "Mayank", isLoggedIn: false }),
  actions: {
    login(name) {
    this.name = name;
    this.isLoggedIn = true;
    },
  },
});



<!-- Profile.vue -->
<script setup>
import { useUserStore } from "@/stores/user";
const user = useUserStore();
</script>

<template>
  <p>Welcome, {{ user.name }}</p>
</template>

Pros

Centralized, predictable state.
Great for large, complex apps.
Cons
Overhead for small apps.
Best Practice: Use Pinia for shared state, keep stores modular, and avoid putting all data in the store.

7. Slots for Parent-to-Child Content

Slots let parents pass custom templates to children.

<!-- Card.vue -->
<template>
  <div class="card">
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<!-- App.vue -->
<Card>
  <template #header>
    <h2>Custom Title</h2>
  </template>
  <p>This is the card content.</p>
</Card>

When to Use

Creating reusable UI components (modals, cards, layouts).
Pros
Flexible and reusable.
Keeps components generic.
Cons
Overusing slots can make code harder to read.
Best Practice: Use slots for layout/structure flexibility, not for data passing.

Choosing the Right Pattern

Here’s a quick decision guide:

Props + Events - Best for small to medium apps.
Provide/Inject - Context-like data (themes, configs).
Pinia/Vuex - Large-scale apps with shared state.
Slots - Reusable UI patterns.

FAQ

Q1: When should I use Vuex or Pinia instead of props/events?
When multiple unrelated components need to share or react to the same data.

Q2: Is the Event Bus still recommended in Vue 3?
It’s not officially recommended anymore - use Pinia or provide/inject for better scalability.

Q3: Can I mix different communication methods in one app?
Yes, and in fact, it’s often necessary. Just be clear about each method’s purpose.

Q4: Why is one-way data flow encouraged?
It keeps data predictable and prevents unexpected side effects.

Best Practices for Clean Communication

Keep data flow predictable - prefer one-way binding (down via props, up via events).
Avoid prop drilling - use provide/inject or state management when needed.
Don’t overuse Vuex/Pinia - only when multiple components need the same state.
Keep components focused - each should handle one responsibility.
Use TypeScript or prop validation for safer data handling.

“Clean code always looks like it was written by someone who cares.”

Michael Feathers

Key Takeaways

Component communication is vital for scalability and maintainability.
Use the simplest possible method - don’t jump to Vuex too early.
Vue 3’s provide/inject and Pinia simplify state sharing.
Maintain clear data direction to prevent debugging nightmares.
Modular communication patterns lead to faster development and fewer bugs.

Interesting Facts

Vue.js was created in just a few years by Evan You after he worked at Google on Angular. Source: Evan You Interview on Medium
Pinia (the official Vue 3 store) is named after piña colada! Source: Pinia Docs

Conclusion

Efficient component communication is the backbone of a scalable Vue.js application.
By combining props, emits, provide/inject, and Pinia, you can create applications that are both powerful and easy to maintain.

Final Thoughts

Component communication is at the heart of Vue.js development. By understanding when to use props, events, provide/inject, centralized state management, or slots, you can keep your app scalable, maintainable, and easy to debug.

Remember:

Start simple with props/events.
Use provide/inject for context.
Introduce Pinia only when the app grows complex.
Keep communication patterns consistent across your team.

About the Author: Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.

Enhancing Laravel Code Quality with Larastan

Mayank Goyal — Thu, 21 Aug 2025 10:30:41 +0000

“First, solve the problem. Then, write the code.”
— John Johnson

Key Takeaways

Larastan integrates PHPStan into Laravel for advanced static analysis.
Detects bugs and type errors without running your code.
Helps to improve maintainability, reliability, and developer confidence.
Supports Laravel 9 and above, with different Larastan versions.
Supports strict level-based analysis with customizable rules and baselines.

Index

Introduction
Supported Laravel Versions
Installing and Configuring Larastan
Larastan Levels Breakdown
Ignoring Errors
Baseline File
Laravel-Specific Rules
Custom types Doc
Use PHPStan plugin in PHPStorm
FAQs
Stats
Interesting Facts
Conclusion

1. Introduction

Larastan is a PHPStan wrapper that brings powerful static analysis capabilities to Laravel projects. It finds bugs, type mismatches, and dead code in your application without executing a single line of it.

“The best way to predict the future is to invent it.”
— Alan Kay

2. Supported Laravel Versions

gist.githubusercontent.com

3. Installing and Configuring Larastan

Installation

To install Larastan, run the following command:

composer require --dev "larastan/larastan:^3.0"

Configuration

Create a phpstan.neon file in the root directory with the following configuration:

includes:
     - vendor/larastan/larastan/extension.neon
parameters:
   paths:
        - app # You can add required folders here
   level: 5  # You can increase levels for more strict checking

Running Larastan

To analyze your code, execute:

./vendor/bin/phpstan analyse

If you are getting the error Allowed memory size exhausted, then you can use the — memory-limit option fix the problem:

./vendor/bin/phpstan analyse --memory-limit=2G

For strictest level checking, use:

./vendor/bin/phpstan analyse --level=9

4. Larastan Levels Breakdown

gist.githubusercontent.com

“Automation applied to an efficient operation will magnify the efficiency.”
— Bill Gates

5. Ignoring Errors

When ignoring errors in PHPStan’s configuration file, they are ignored by writing a regex based on error messages:

parameters:
    ignoreErrors:
        - '#Call to an undefined method .*badMethod\(\)#'

6. Baseline File

In older codebases it might be hard to spend the time fixing all the code to pass a high PHPStan Level.

To get around this a baseline file can be generated. The baseline file will create a configuration file with all of the current errors, so new code can be written following a higher standard than the old code. (PHPStan Docs)

./vendor/bin/phpstan analyse --generate-baseline

7. Laravel-Specific Rules

A list of configurable rules specific to Laravel can be found here.

8. Custom types Doc

A list of custom type doc is here. Which includes **custom-config-parameters.md , custom-types.md , errors-to-ignore.md **etc. files.

9. Use PHPStan plugin in PHPStorm

Refer this for enabling the phpstan in phpstorm without composer

10. FAQs

Q: Can Larastan catch runtime exceptions?
A: No, Larastan only performs static analysis. It won’t catch exceptions thrown at runtime, but it will highlight unsafe code patterns.

Q: Is it safe to run Larastan on production code?
A: Absolutely! Larastan doesn’t execute any code. It only analyzes it.

Q: Should I aim for level 9 always?
A: Ideally yes, but start small. Use baselines to incrementally improve quality.

Q: Can I customize rules for my project?
A: Yes! You can add custom rules, ignore specific errors, and tune paths.

11. Stats

At the highest level (Level 9), Larastan and PHPStan together detect over 100 categories of potential issues. (PHPStan Rule Levels, Larastan README)
Projects adopting Larastan often report significantly fewer runtime errors (anecdotally in the range of 25–50%) thanks to early detection of type and logic issues. (Mattias Geniar Blog Post, Larastan GitHub Discussions, Medium Article about PHPStan Adoption)
Larastan has over 4 million downloads and is used in thousands of open-source Laravel repositories to improve code quality. (Larastan GitHub)

12. Interesting Facts

Larastan was created by Nuno Maduro, the creator of PestPHP.
It internally uses PHPStan, one of the most respected tools for static analysis in PHP.
You can extend Larastan using custom rules for your specific business logic!

13. Conclusion

Larastan is more than a tool — it’s a code quality companion for Laravel developers. By integrating static analysis early in your development workflow, you prevent bugs, enforce best practices, and build confidence in your codebase.

Start with level 5
Use baselines for legacy code
Gradually level up to 9
Fix errors as part of regular code reviews

Use it. Learn from it. Make your Laravel code bulletproof.

About the Author: Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.

Laravel Pivot Tables Explained: Clean Handling of Many-to-Many Relationships

Mayank Goyal — Fri, 18 Jul 2025 10:26:55 +0000

“Bad programmers worry about the code. Good programmers worry about data structures and their relationships.”
— Linus Torvalds

Key Takeaways

Pivot tables manage many-to-many relationships in Laravel.
They don’t usually require their own Eloquent model.
Laravel simplifies pivot interaction with intuitive syntax.
You can add extra fields to a pivot for rich metadata (e.g., grades, timestamps).
Advanced use includes custom pivot models, filtering, and accessors.

Index

What is a Pivot Table?
When to Use Pivot Tables
Human-Friendly Analogy
Creating Pivot Tables in Laravel
Defining Relationships in Models
Interacting with Pivot Tables
Adding Extra Data to Pivot Tables
Advanced Pivot Table Usage
Behind the Scenes
Stats
Interesting Facts
FAQs
Conclusion

1. What is a Pivot Table?

A pivot table is an intermediate table that connects two other tables in a many-to-many relationship. It doesn’t usually need its own Eloquent model but acts as a bridge storing relationship metadata.

2. When to Use Pivot Tables

You should use a pivot table when:

One record in Table A can relate to many records in Table B
And one record in Table B can relate to many records in Table A

Examples:

Users and Roles
Students and Courses
Products and Categories

“Technology is best when it brings people together.”
— Matt Mullenweg

3. Human-Friendly Analogy

Imagine you’re a student enrolling in university courses. You can take many courses, and each course has many students. The enrollment record linking them is the pivot table — it holds the connection, not the content.

“Great things are done by a series of small things brought together.”
— Vincent Van Gogh

4. Creating Pivot Tables in Laravel

Step 1: Create the Main Tables

Schema::create('students', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->timestamps();
});

Schema::create('courses', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->timestamps();
});

Step 2: Create the Pivot Table

Schema::create('course_student', function (Blueprint $table) {
    $table->id();
    $table->foreignId('student_id')->constrained()->onDelete('cascade');
    $table->foreignId('course_id')->constrained()->onDelete('cascade');
    $table->timestamps();
});

Note: Laravel expects the pivot table name to be in alphabetical order: course_student, not student_course.

5. Defining Relationships in Models

Student.php

public function courses()
{
    return $this->belongsToMany(Course::class);
}

Course.php

public function students()
{
    return $this->belongsToMany(Student::class);
}

6. Interacting with Pivot Tables

Attaching Records

$student->courses()->attach([1, 2]);

Detaching Records

$student->courses()->detach(2);

Syncing Records

$student->courses()->sync([2, 3]);

7. Adding Extra Data to Pivot Tables

Migration Example

Schema::create('course_student', function (Blueprint $table) {
    $table->id();
    $table->foreignId('student_id')->constrained()->onDelete('cascade');
    $table->foreignId('course_id')->constrained()->onDelete('cascade');
    $table->string('grade')->nullable();
    $table->timestamp('enrolled_at')->nullable();
    $table->timestamps();
});

Attaching with Additional Data

$student->courses()->attach(1, [
    'grade' => 'A',
    'enrolled_at' => now(),
]);

Accessing Pivot Data

foreach ($student->courses as $course) {
    echo $course->pivot->grade;
    echo $course->pivot->enrolled_at;
}

8. Advanced Pivot Table Usage

Custom Pivot Models

If you want to handle logic on the pivot itself:

class Enrollment extends Pivot
{
    use SoftDeletes;
}

In Student.php:

return $this->belongsToMany(Course::class)
            ->using(Enrollment::class)
            ->withTimestamps();

Filtering by Pivot Fields

$student->courses()->wherePivot('grade', 'A')->get();

Updating Pivot Table Values

$student->courses()->updateExistingPivot($courseId, [
    'grade' => 'B'
]);

Syncing with Data

$student->courses()->sync([
    1 => ['grade' => 'A'],
    2 => ['grade' => 'B']
]);

Using Pivot Accessors

Add accessors to format pivot data:

public function getFormattedGradeAttribute()
{
    return strtoupper($this->pivot->grade);
}

9. Behind the Scenes

Laravel uses the BelongsToMany relationship internally to manage pivot tables. All pivot methods— attach, detach, sync—are part of this relationship class.

For advanced use cases, you can define a custom Pivot model by extending Illuminate\Database\Eloquent\Relations\Pivot.

“Be stubborn on vision but flexible on details.”
— Jeff Bezos

10. Stats

Many-to-many relationships (using pivot tables) are extremely common in real-world Laravel applications
Pivot tables can store extra metadata fields (like status, timestamps, or custom attributes) without significant performance overhead. (Laravel Docs — Defining Custom Pivot Models)
By default, pivot data is lazy-loaded; you must use withPivot() to retrieve additional pivot columns during eager loading. (Laravel Docs Retrieving Intermediate Table Columns)

11. Interesting Facts

Laravel automatically updates pivot timestamps if ->withTimeStamps() is used. (Laravel Docs — Updating Pivot Tables)
Laravel supports polymorphic many-to-many relationships, allowing a single pivot table to relate multiple model types. (Laravel Docs — Many-to-Many Polymorphic Relationships)
You can filter queries using pivot values with wherePivot()and havingPivot(). (Laravel Docs — Filtering by Pivot Columns)
Use withPivot() to eager-load pivot data and access it like a property. (Laravel Docs — Retrieving Intermediate Table Columns)

12. FAQs

Q: Do pivot tables always need an Eloquent model?
A: No, only when you need custom logic or features like soft deletes.

Q: Can I store additional data like grades or timestamps?
A: Yes! Add custom columns in the pivot migration and interact using ->pivot->column.

Q: Can pivot tables work with polymorphic relationships?
A: Absolutely! Laravel supports morphToMany and morphedByMany.

Q: Is there a naming convention?
A: Yes, pivot table names should be in alphabetical order (e.g., course_student).

13. Conclusion

Pivot tables are essential for managing many-to-many relationships in Laravel. Whether you’re building a student enrollment system or managing user roles, they offer a powerful and clean way to store relational data. Laravel’s Eloquent makes it easy to define, interact with, and customize pivot tables — ensuring your relationships are efficient and expressive. With just a few lines of code, you unlock powerful relationship management features ready for real-world complexity.

About the Author: Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.

Laravel Seeders & Factories - How to Generate Fake Data for Development

Mayank Goyal — Mon, 14 Jul 2025 12:12:43 +0000

“The expert in anything was once a beginner.”
— Helen Hayes

Key Takeaways

Understand the difference between Seeders and Factories in Laravel.
Learn when and how to use create() vs make().
Use FakerPHP methods effectively for fake data.
Apply traditional and modern methods to create seeders and factories.
Use artisan commands efficiently during development.

Index

Introduction
When to Use Seeder and Factory
Traditional vs Modern Usage
Faker Cheat Sheet — All Available Methods
Creating Factories
Creating Seeders
Handling Relationships
Real-World Examples
Advanced Tips
Testing with Factories
Difference Between create() and make()
Summary
Resources
Stats
Interesting Facts
FAQ’s
Conclusion

1. Introduction

Seeders and Factories are essential tools in Laravel for generating fake data. They help speed up development and testing by providing sample data to work with. Laravel uses FakerPHP to generate fake information for factories.

Factory: Blueprint to create fake model data.

Seeder: Class used to insert data into the database.

2. When to Use Seeder and Factory

Examples:

Use factories in tests to create isolated data.
Use seeders for populating a realistic dataset in local or staging environments.

3. Traditional vs Modern Usage

Before Laravel 8, generating fake data involved a more procedural approach. With Laravel 8+, the system evolved to become more structured, readable, and object-oriented. Let’s look at how factories and seeders have changed over time.

Traditional (Pre-Laravel 8)

factory(User::class, 10)->create();

This method relied on global helper functions and inline logic. It worked, but wasn’t as elegant or flexible.

Modern (Laravel 8+)

php artisan make:factory UserFactory --model=User
php artisan make:seeder UserSeeder
User::factory()->count(10)->create();

Laravel now uses class-based factories and seeders, making code more readable, testable, and maintainable.

4. Faker Cheat Sheet — All Available Methods

FakerPHP is like a magician for developers—it helps you generate realistic names, addresses, dates, text, and more. Whether you're seeding a development database or writing automated tests, this cheat sheet gives you all the tools to fake it like a pro.

Personal Info

$this->faker->name()
$this->faker->firstName()
$this->faker->lastName()
$this->faker->title()
$this->faker->email()
$this->faker->unique()->safeEmail()
$this->faker->username()
$this->faker->password()
$this->faker->phoneNumber()
$this->faker->address()

Dates & Times

$this->faker->date()
$this->faker->dateTime()
$this->faker->dateTimeBetween('-1 week', '+1 week')
$this->faker->time()

Payments

$this->faker->creditCardNumber()
$this->faker->creditCardType()
$this->faker->currencyCode()
$this->faker->randomFloat(2, 0, 9999)

Location

$this->faker->city()
$this->faker->state()
$this->faker->country()
$this->faker->postcode()
$this->faker->latitude()
$this->faker->longitude()

Text

$this->faker->word()
$this->faker->words(3, true)
$this->faker->sentence()
$this->faker->paragraph()
$this->faker->text(200)

Images & Files

$this->faker->imageUrl(640, 480)
$this->faker->image('public/storage/images', 400, 300, null, false)

Numbers

$this->faker->randomDigit()
$this->faker->randomNumber()
$this->faker->numberBetween(1, 100)
$this->faker->randomFloat(2, 1, 1000)

Miscellaneous

$this->faker->uuid()
$this->faker->slug()
$this->faker->boolean()
$this->faker->regexify('[A-Za-z0-9]{10}')
$this->faker->url()
$this->faker->domainName()
$this->faker->company()
$this->faker->jobTitle()

5. Creating Factories

php artisan make:factory ProductFactory --model=Product

Sample Factory:

public function definition(): array
{
    return [
        'name' => $this->faker->word(),
        'price' => $this->faker->randomFloat(2, 1, 1000),
        'description' => $this->faker->sentence(),
    ];
}

6. Creating Seeders

php artisan make:seeder ProductSeeder

Sample Seeder:

public function run(): void
{
    Product::factory()->count(50)->create();
}

Call Seeder in DatabaseSeeder.php:

$this->call(ProductSeeder::class);

7. Handling Relationships

One-to-One

Profile::factory()->for(User::factory())->create();

One-to-Many

User::factory()->hasPosts(5)->create();

Many-to-Many

Post::factory()->hasTags(3)->create();

8. Real-World Examples

Blog App:

Users → hasMany → Posts
Posts → hasMany → Comments

Step-by-Step - Models and Relationships:

// User.php
public function posts() {
    return $this->hasMany(Post::class);
}

// Post.php
public function user() {
    return $this->belongsTo(User::class);
}
public function comments() {
    return $this->hasMany(Comment::class);
}

// Comment.php
public function post() {
    return $this->belongsTo(Post::class);
}

Factory Definitions

// database/factories/UserFactory.php
public function definition(): array {
    return [
        'name' => fake()->name(),
        'email' => fake()->unique()->safeEmail(),
        'password' => bcrypt('password'),
    ];
}

// database/factories/PostFactory.php
public function definition(): array {
    return [
        'title' => fake()->sentence(),
        'body' => fake()->paragraph(5),
    ];
}

// database/factories/CommentFactory.php
public function definition(): array {
    return [
        'content' => fake()->sentence(),
    ];
}

Seeder Example

// DatabaseSeeder.php
public function run(): void
{
    \App\Models\User::factory()
        ->count(10)
        ->has(
            \App\Models\Post::factory()
                ->count(5)
                ->has(\App\Models\Comment::factory()->count(3))
        )
        ->create();
}

E-Commerce:

Product → belongsTo → Category
Order → hasMany → OrderItems
OrderItems -> belongsTo ->Product

Step-by-Step - Models and Relationships:

// Category.php
public function products() {
    return $this->hasMany(Product::class);
}

// Product.php
public function category() {
    return $this->belongsTo(Category::class);
}

// Order.php
public function items() {
    return $this->hasMany(OrderItem::class);
}

// OrderItem.php
public function order() {
    return $this->belongsTo(Order::class);
}
public function product() {
    return $this->belongsTo(Product::class);
}

Factory Definitions

// CategoryFactory.php
public function definition(): array {
    return [
        'name' => fake()->word(),
    ];
}

// ProductFactory.php
public function definition(): array {
    return [
        'name' => fake()->word(),
        'price' => fake()->randomFloat(2, 10, 1000),
        'category_id' => Category::factory(),
    ];
}

// OrderFactory.php
public function definition(): array {
    return [
        'user_id' => User::factory(),
        'status' => fake()->randomElement(['pending', 'shipped', 'delivered']),
    ];
}

// OrderItemFactory.php
public function definition(): array {
    return [
        'product_id' => Product::factory(),
        'quantity' => fake()->numberBetween(1, 5),
    ];
}

Seeder Example

public function run(): void
{
    // Categories and Products
    \App\Models\Category::factory()
        ->count(5)
        ->has(\App\Models\Product::factory()->count(10))
        ->create();

    // Orders and Items
    \App\Models\Order::factory()
        ->count(20)
        ->has(
            \App\Models\OrderItem::factory()
                ->count(3)
        )
        ->create();
}

Command to Run Seeder:

php artisan migrate:fresh --seed

9. Advanced Tips

Seed Only If Empty

if (User::count() == 0) {
    User::factory(10)->create();
}

Avoid Production Seeding

if (!app()->isProduction()) {
    $this->call(DevSeeder::class);
}

Migrate & Seed in One Step

php artisan migrate:fresh --seed

10. Testing with Factories

public function test_post_creation()
{
    $user = User::factory()->create();
    $post = Post::factory()->for($user)->create();

    $this->assertDatabaseHas('posts', ['user_id' => $user->id]);
}

11. Difference Between create() and make()

create() Example:

$user = User::factory()->create();

This creates a user and inserts into the database.

make() Example:

$user = User::factory()->make();

This creates a user but doesn’t insert into the database. Useful for testing model logic without hitting the DB.

Human-friendly analogy:
Think of make() as drawing a character on paper (you haven’t created it in real life yet).
create() is like actually 3D printing that character into existence (database).

“Dream big. Start small. Act now.”
— Robin Sharma

12. Summary

**- Factory = Recipe (How to create data)

Seeder = Chef (Creates and inserts the data)
Faker = Ingredients (Fake fields)
make() = Draft copy, not saved
create() = Final copy, saved to DB**

Use factories for fast, repeatable data creation, especially for tests. Use seeders to load your database with dev data or static reference data.

“Learning never exhausts the mind.”
— Leonardo da Vinci

13. Resources

Laravel Docs: https://laravel.com/docs/12.x/seeding
FakerPHP Docs: https://fakerphp.org/
GitHub Laravel Examples: https://github.com/laravel/laravel/tree/master/database/factories

14. Stats

Laravel 12 supports class-based seeders and factories by default.(Laravel 12 Documentation — Database: Seeding, Laravel 12 Documentation — Database: Factories)
FakerPHP has over 50+ methods for generating fake data. (FakerPHP Official Documentation — Formatters)
Factory usage in Laravel projects increased by 40% since Laravel 8’s class-based system.

15. Interesting Facts

The Faker library was originally a Ruby gem before being ported to PHP. (Faker Ruby Gem, FakerPHP History)
Laravel 12 allows factory()->has() relationships that simulate real-world relational data effortlessly. (Laravel Factories — Has Relationships)
Faker can be customized by locale — meaning you can generate region-specific names, addresses, etc. (FakerPHP Locales)

16. FAQ’s

Q: Can I use factories without seeders?
Yes! Especially useful in unit testing or test classes.

Q: Can I run factories in production?
Not recommended. They are intended for testing/dev environments.

Q: How do I use Faker with a specific locale?
Pass locale to the factory class or override $faker with a new instance.

Q: What if I want unique data each time?
Use methods like $this->faker->unique()->email() to avoid duplicates.

Q: How can I define custom states?
Use the state() method in factories to define preset variations.

17. Conclusion

Laravel Seeders and Factories are indispensable tools for every developer. They ensure smooth development, easy testing, and robust prototyping. By mastering make() vs create(), utilizing Faker’s wide range of data generators, and leveraging artisan commands, you can simulate any data-driven scenario. Whether you’re building a blog, marketplace, or SaaS — this is your cheat code for rapid development.

About the Author: Mayank is a web developer at AddWebSolution, building scalable apps with PHP, Node.js & React. Sharing ideas, code, and creativity.