DEV Community: Shyamalendu Nayak

App Router vs Pages Router in Next.js — a deep, practical guide

Shyamalendu Nayak — Sat, 09 Aug 2025 11:16:37 +0000

Next.js has revolutionized React development with its powerful routing systems. Over the years, it has evolved from the traditional Pages Router to the modern App Router, each offering unique advantages for different use cases. In this comprehensive guide, we'll explore both routing systems, their differences, and help you decide which one to use for your next project.

The Page Router (Legacy)

The Page Router was Next.js's original routing system, introduced from the beginning and still widely used today. It's stable, well-documented, and has been battle-tested in countless production applications.

How Page Router Works
In the Page Router system, every file in the pages directory automatically becomes a route:

pages/
├── index.js          // Route: /
├── about.js          // Route: /about
├── blog/
│   ├── index.js      // Route: /blog
│   └── [slug].js     // Route: /blog/[slug]
└── api/
    └── users.js      // API Route: /api/users

Key Features of Page Router

1. File-Based Routing

// pages/index.js
export default function Home() {
  return <h1>Welcome to the homepage!</h1>
}

// pages/about.js
export default function About() {
  return <h1>About Us</h1>
}

2. Dynamic Routes

// pages/blog/[slug].js
import { useRouter } from 'next/router'

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query

  return <h1>Blog Post: {slug}</h1>
}

3. API Routes

// pages/api/users.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ users: ['John', 'Jane'] })
  }
}

4. Data Fetching Methods

// Static Generation
export async function getStaticProps() {
  const data = await fetchData()
  return { props: { data } }
}

// Server-Side Rendering
export async function getServerSideProps() {
  const data = await fetchData()
  return { props: { data } }
}

// Static Generation with Dynamic Routes
export async function getStaticPaths() {
  return {
    paths: [{ params: { slug: 'post-1' } }],
    fallback: false
  }
}

Advantages of Page Router

Mature and Stable: Years of development and community usage
Simple Mental Model: Easy to understand file-to-route mapping
Extensive Documentation: Comprehensive guides and tutorials available
Wide Community Support: Large ecosystem of tutorials and solutions
Proven in Production: Used by countless large-scale applications

The App Router (Modern)

Introduced in Next.js 13, the App Router represents a significant evolution in Next.js routing. Built on React Server Components, it offers more flexibility, better performance, and modern React patterns.

How App Router Works
The App Router uses an app directory where folders define routes, and special files define UI components:

app/
├── layout.js         // Root layout
├── page.js          // Route: /
├── about/
│   └── page.js      // Route: /about
├── blog/
│   ├── layout.js    // Blog layout
│   ├── page.js      // Route: /blog
│   └── [slug]/
│       └── page.js  // Route: /blog/[slug]
└── api/
    └── users/
        └── route.js // API Route: /api/users

Key Features of App Router

1. Server Components by Default

// app/page.js (Server Component)
async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function HomePage() {
  const data = await getData()

  return <h1>Welcome! {data.message}</h1>
}

2. Layouts and Templates

// app/layout.js (Root Layout)
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <nav>Navigation</nav>
        {children}
        <footer>Footer</footer>
      </body>
    </html>
  )
}

// app/blog/layout.js (Nested Layout)
export default function BlogLayout({ children }) {
  return (
    <div className="blog-layout">
      <aside>Blog Sidebar</aside>
      <main>{children}</main>
    </div>
  )
}

3. Route Groups and Organization

app/
├── (marketing)/
│   ├── about/
│   │   └── page.js    // Route: /about
│   └── contact/
│       └── page.js    // Route: /contact
└── (shop)/
    ├── products/
    │   └── page.js      // Route: /products
    └── cart/
        └── page.js      // Route: /cart

4. Loading and Error UI

// app/blog/loading.js
export default function Loading() {
  return <div>Loading blog posts...</div>
}

// app/blog/error.js
'use client'
export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

5. Streaming and Suspense

// app/dashboard/page.js
import { Suspense } from 'react'

async function UserData() {
  const data = await fetchUserData() // This can stream
  return <div>{data.name}</div>
}

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<div>Loading user...</div>}>
        <UserData />
      </Suspense>
    </div>
  )
}

Advantages of App Router

React Server Components: Better performance and smaller bundle sizes
Streaming: Progressive page rendering for better user experience
Flexible Layouts: Nested layouts that persist across route changes
Built-in Loading States: Automatic loading and error boundaries
Better SEO: Improved server-side rendering capabilities
Modern React Patterns: Leverages the latest React features

Key Differences Comparison

Features	Page Router	App Router
Directory	`pages/`	`app`
Routing Method	File-based	Folder based
Components	Client by default	Server by default
Date fetching	`getServerSideProps`, `getStaticProps`	fetch() in components
Layouts	`_app`,`_document.js`	`layout.js`
Loading state	Custom implementation	Built-in `loading.js`
Bundle Size	Larger client bundles	Smaller client bundles

Conclusion
Both Page Router and App Router have their place in the Next.js ecosystem. The Page Router remains a solid choice for many applications, offering stability and simplicity. The App Router, while more complex, provides powerful features that can significantly improve performance and developer experience.

Feel free to checkout my GitHub

React Lazy Loading: Boosting Performance with Code Splitting

Shyamalendu Nayak — Sun, 23 Feb 2025 06:02:20 +0000

As React applications grow, large JavaScript bundles can slow down initial page loads, leading to poor user experience. Lazy loading is a technique that helps mitigate this issue by loading components only when needed, improving performance and reducing unnecessary resource consumption.

In this blog, we'll explore React's built-in lazy loading capabilities and how to implement them effectively using React.lazy and Suspense.

What is Lazy Loading?
Lazy loading is a design pattern that defers the loading of non-essential resources until they are required. In React, this means loading components only when they are needed, instead of including them in the initial JavaScript bundle.

Benefits of Lazy Loading

Faster Initial Load: Only essential components are loaded upfront.
Reduced Bundle Size: Splitting code into smaller chunks makes the app more efficient.
Optimized Performance: Improves time-to-interactive, enhancing user experience.

Implementing Lazy Loading in React

Using React.lazy()

React provides the React.lazy function to dynamically import components. It returns a Promise-based component that loads only when needed.

Example:

import React, { Suspense } from "react";

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

function App() {
  return (
    <div>
      <h1>React Lazy Loading Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Explanation:

React.lazy(() => import("./LazyComponent")): Dynamically imports the component.

Suspense: Provides a fallback UI (e.g., Loading...) until the lazy component is fully loaded.

Best Practices for Lazy Loading

Use Suspense for a Better UX: Provide a meaningful fallback UI (e.g., a spinner or skeleton loader).
Group Related Components: Avoid excessive splitting by grouping related components.
Preload Critical Components: Use dynamic imports to preload components that might be required soon.
Combine with Code Splitting: Use Webpack's code-splitting and tools like Loadable Components for advanced performance optimization.

Conclusion

Lazy loading in React is a powerful feature that significantly enhances performance by reducing initial load time and optimizing resource usage. By leveraging React.lazy and Suspense, developers can efficiently manage their application's bundle size while maintaining a smooth user experience.

Start implementing lazy loading in your React projects today and experience a noticeable improvement in performance!

[Boost]

Shyamalendu Nayak — Fri, 07 Feb 2025 06:05:30 +0000

Building a Simple Chrome Extension with Next.js

Shyamalendu Nayak ・ Sep 8 '24

#extensions #nextjs #webdev

🚀 Docker Commands You Must Know! 🐳

Shyamalendu Nayak — Thu, 06 Feb 2025 17:27:17 +0000

Docker simplifies application deployment, making it easier to build, ship, and run applications anywhere. Whether you're a beginner or a seasoned developer, here are the key Docker commands you should have at your fingertips!

🚀 Why Do We Need Docker? 🐳

"It works on my machine" Problem 🛑
Developers often face issues where an application works on one system but fails on another due to different environments, dependencies, or OS configurations. Docker solves this by containerizing applications, ensuring consistency across different machines.

🔹Docker Basics

docker version        # Check Docker version  
docker info           # Get system-wide information  
docker help           # Get help on Docker commands

🔹Managing Containers

docker ps                      # List running containers  
docker ps -a                   # List all containers (including stopped ones)  
docker run <image>             # Run a container from an image  
docker start <container_id>    # Start a stopped container  
docker stop <container_id>     # Stop a running container  
docker restart <container_id>  # Restart a container  
docker rm <container_id>       # Remove a container  
docker logs <container_id>     # View container logs

🔹Working with Images

docker images             # List all images  
docker pull <image>       # Download an image from Docker Hub  
docker build -t <name> .  # Build an image from a Dockerfile  
docker rmi <image_id>     # Remove an image

🔹Executing Commands in Containers

docker exec -it <container_id> bash       # Access a running container  
docker inspect <container_id>             # Get detailed container info  
docker cp <container_id>:/path/to/file .  # Copy file from container

🔹Volumes & Storage

docker volume create <volume_name>  # Create a volume  
docker volume ls                    # List volumes  
docker volume rm <volume_name>      # Remove a volume  
docker run -v <volume_name>:/app <image> # Mount a volume to a container

🔹Networking in Docker

docker network ls                      # List networks  
docker network create <network_name>   # Create a custom network  
docker network connect <network_name> <container_id> # Connect a container to a network  
docker network inspect <network_name>  # Get details of a network

🔹Docker Compose

docker compose up -d  # Start services in the background  
docker compose down   # Stop and remove containers  
docker compose ps     # List services  
docker compose logs   # View logs of all services

🔹Clean Up Docker Resources

docker system prune -a          # Remove unused data, containers, and images  
docker volume prune             # Remove unused volumes  
docker network prune            # Remove unused networks  
docker rmi $(docker images -q)  # Remove all images  
docker rm $(docker ps -aq)      # Remove all containers

🔥 Mastering these commands will make your Docker experience much smoother! Which one do you use the most? Let me know in the comments! 👇

Local Storage vs Session Storage

Shyamalendu Nayak — Mon, 21 Oct 2024 01:30:24 +0000

When building modern web applications, managing client-side data efficiently is crucial for enhancing user experience. Two popular methods for storing data on the client side are Local Storage and Session Storage, both part of the Web Storage API. While they may appear similar in purpose, they have distinct features and use cases. In this blog post, we’ll explore the differences, benefits, and best practices for using Local Storage and Session Storage in your projects.

Introduction to Web Storage API
The Web Storage API allows web applications to store key-value pairs in a user's browser. It offers two main mechanisms:

Local Storage: Stores data with no expiration time, meaning the data persists even after the browser is closed and reopened.
Session Storage: Stores data only for the duration of the session, which is erased when the browser is closed or the tab is closed.

Key Differences Between Local Storage and Session Storage

Feature	Local Storage	Session Storage
Persistence	Data persists indefinitely (until explicitly deleted).	Data persists only for the duration of the browser session (until the tab or window is closed).
Storage Capacity	Approximately 5-10 MB, depending on the browser.	Roughly 5 MB, similar to Local Storage but may be lower depending on the browser.
Scope	Shared across all tabs and windows of the same origin (domain).	Scoped to the tab or window where it was created. Not shared between tabs.
Use Cases	Storing user preferences, theme settings, authentication tokens, etc.	Temporary data such as form data or per-session state (e.g., filters).
Access Method	Accessed via `localStorage` object in JavaScript.	Accessed via `sessionStorage` object in JavaScript.

By using these storage methods wisely, you can improve your app’s performance, provide a better user experience, and optimize client-side state management.

Happy coding!!!

Understanding chunk.js in Modern Web Development: A Guide to Code Splitting and Performance Optimization

Shyamalendu Nayak — Mon, 16 Sep 2024 17:53:17 +0000

In web development, particularly with modern JavaScript frameworks like React, Vue, or Angular, chunk.js refers to a JavaScript bundle file that is created during the build process of an application.

When bundling or compiling a web application, build tools like Webpack or Vite split the JavaScript code into smaller files called "chunks." These chunks are typically created for performance optimization and lazy loading. This approach is known as code-splitting.

Here’s a breakdown of what chunk.js files are:

Code Splitting: Instead of loading the entire JavaScript application in one large file, the code is split into smaller chunks that are loaded only when they are needed. For example, a certain feature or page might only load when the user navigates to it, rather than at the initial page load.
Dynamic Imports: Frameworks use dynamic imports (e.g., import() in JavaScript) to load these chunks as the user interacts with different parts of the app. This reduces the initial load time.
Caching: These chunk files often come with unique names (e.g., chunk.[hash].js), so browsers can cache them for future use, improving page load speed.
Performance: By splitting the application into smaller pieces, the browser doesn’t have to load everything at once, resulting in faster load times, especially for larger apps.

Understanding Git's -m and -am Options: Simplifying Your Commit Workflow

Shyamalendu Nayak — Wed, 11 Sep 2024 02:21:49 +0000

Git is a powerful version control tool used by developers worldwide, but getting the hang of its many commands and flags can sometimes feel overwhelming. Two such flags, -m and -am, are particularly useful for streamlining your workflow when committing changes. In this blog post, we'll break down what these options mean, how they work, and when to use them.

What is Git?
Before we dive into the specifics of -m and -am, let's quickly revisit what Git does. Git is a distributed version control system that tracks changes in your code. It enables developers to manage and collaborate on code projects efficiently by creating snapshots, or commits, of changes over time. Each commit is like a save point, allowing you to revert back to previous versions if needed.

Making a commit in Git involves three basic steps:

Making changes to your files.
Staging those changes (i.e., marking them as ready to be committed).
Committing the changes, often with a descriptive message.

Git’s -m Option: Commit with a Message
One of the most common actions you'll perform in Git is making a commit. Normally, Git opens an editor to let you write a detailed commit message, but when you want to save time or don't need a long message, you can use the -m option.

The -m flag stands for "message" and allows you to include your commit message directly from the command line. Instead of opening a text editor to write your commit message, you simply add it as part of the command.

Example:

git add . //or git add <file-name>
git commit -m "Fixed user authentication bug"

When to Use -m:

When you want to quickly commit changes with a brief message.
For small, isolated changes that don’t require detailed explanations.
When you're working in a collaborative environment and need to commit changes frequently.

Git’s -am Option: Stage and Commit All Changes
While the -m flag is useful for adding a message, the -am flag is a combination of two flags:

-a: Stands for "all" and stages all changes to tracked files (files that are already being tracked by Git).
-m: As before, this allows you to specify a commit message.

In essence, git commit -am stages and commits all the modified files in one command. This can save you a step by automatically staging files that have been changed, so you don't need to run git add separately.

Example:

git commit -am "Refactored login component and updated styles"

Here, Git will:

Stage all the modified files (i.e., any changes you've made to tracked files).
Commit those changes with the message "Refactored components and updated styles".

When to Use -am:

When you have multiple changes to tracked files and want to commit them all in one go.
When you're working on a large project and don't want to manually stage each file before committing.
For quick, iterative commits where you’re not adding any new files, only modifying existing ones.

-m vs -am: Which One Should You Use?
While both options streamline your Git workflow, they serve different purposes. If you’re making small, focused changes and want to explicitly decide which files to commit, use the -m option. It gives you more control over what gets included in the commit.

On the other hand, if you’re working on a larger update that involves modifying several tracked files, -am is a time-saver. It stages all your modified files and commits them in one step, letting you focus on the work rather than managing file stages.

Now that you understand the differences between -m and -am, you can incorporate these options into your daily Git workflow for a more efficient, organized process.

Happy coding!!!

Building a Simple Chrome Extension with Next.js

Shyamalendu Nayak — Sun, 08 Sep 2024 11:40:54 +0000

Creating a Chrome extension can seem daunting, but with the power of Next.js and some basic knowledge, you can have a working extension up and running in no time. In this blog post, we'll walk through the process of building a simple Chrome extension using Next.js, setting up icons, and configuring the necessary files.

What You'll Need

Node.js: Make sure you have Node.js installed.
Next.js: We'll be using Next.js for our project setup.
Basic HTML, CSS, and JavaScript: Familiarity with these is helpful but not required.

Step 1: Setting Up Your Next.js Project
First, let's create a new Next.js project. Open your terminal and run the following commands:
npx create-next-app@latest my-chrome-extension
cd my-chrome-extension

This will scaffold a new Next.js project for you. Once the setup is complete, navigate into your project directory.

Step 2: Adding a "Hello World" Component
To display a simple "Hello World" message in your Chrome extension, you'll need to create a React component in your Next.js project. This component will be part of the static files exported to the out folder.

export default function Home() {
  return (
    <main>
      <div>
        <span className="text-gray-800">Hello world</span>
      </div>
    </main>
  );
}

Step 3: Configure Next.js for Static Export
Since Chrome extensions are static by nature, we need to configure our Next.js project to generate static files. Edit your next.config.js file as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    assetPrefix: process.env.NODE_ENV === 'production' ? '/.' : '',
    output: 'export',
    trailingSlash: true,
  };

  export default nextConfig;

This configuration ensures that your Next.js application is exported as static files, ready to be used in a Chrome extension.

Step 4: Creating the Chrome Extension Manifest
A Chrome extension requires a manifest.json file to define the extension's metadata and behavior. Create a manifest.json file in your project's root directory with the following content:

{
  "manifest_version": 3,
  "name": "Hello world Extension",
  "version": "1.0",
  "description": "Extension that displays hello world.",
  "action": {
    "default_popup": "index.html",
    "default_icon": {
      "16": "icon16.svg",
      "48": "icon48.svg",
      "128": "icon128.svg"
    }
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  }
}

Step 5: Build the Project
With the configuration in place, let's build the project:
npm run build
This command will generate a static version of your site in the out folder, which is what we'll use for our Chrome extension.
Now rename the _next file in the out folder as chrome extensions cannot include directories or filenames that start with an underscore (e.g., _next).

Step 6: Adding Icons
Chrome extensions require icons of various sizes for different parts of the UI. Create an icons directory within your project and add the following icon files:

icon16.png (16x16 pixels)
icon48.png (48x48 pixels)
icon128.png (128x128 pixels)

Make sure these icons are correctly sized and placed in the icons directory. The paths in the manifest.json file should match the location of these icons.

Step 7: Load the Extension into Chrome
Now that everything is set up, let's load our extension into Chrome:

Open Chrome and navigate to chrome://extensions/.
Enable "Developer mode" by toggling the switch in the top-right corner.
Click "Load unpacked" and select the out folder generated by the build process.
Test Your Extension: You should see your extension in the Chrome toolbar. Clicking on it should display the "Hello World" message you set up in your Next.js project.

Step 8: Test and Iterate
Your basic "Hello World" Chrome extension is now up and running! From here, you can add more functionality, styles, and features as needed.

Final Thoughts
Building a Chrome extension using Next.js allows you to leverage the power of modern React-based development while still creating something simple and static.

Whether you're creating a personal tool or something to share with the world, Next.js makes the development process smooth and efficient.

With the knowledge from this guide, you can easily create more complex extensions, integrate APIs, or enhance the user experience with custom styles and interactivity. The sky's the limit!

Happy coding! 🚀