DEV Community: Rama Can

Modular Architecture Example for Next.js 16

Rama Can — Tue, 27 Jan 2026 04:47:32 +0000

Modular Architecture Example for Next.js 16

Insight: A well‑structured codebase reduces cognitive load, accelerates onboarding, and makes future scaling painless.

Introduction

Next.js 16 introduces server‑components, edge‑runtime, and a more flexible routing system. While these features unlock powerful patterns, they also raise the question: how do we keep the project maintainable as it grows? This post walks you through a modular architecture that isolates features, promotes reuse, and aligns with the latest Next.js conventions.

What You Will Learn

How to organize feature modules and shared layers.
Best practices for routing, API routes, and edge functions.
Configuration tricks for incremental static regeneration and bundle analysis.
A ready‑to‑copy file‑tree and sample code snippets.

Project Layout Overview {#project-layout}

my-next-app/
├─ src/
│  ├─ app/                # App Router (pages, layout, loading, error)
│  │  ├─ (auth)/
│  │  │  └─ page.tsx
│  │  └─ (dashboard)/
│  │     └─ page.tsx
│  ├─ features/           # Feature‑centric modules
│  │  ├─ cart/
│  │  │  ├─ components/
│  │  │  ├─ hooks/
│  │  │  └─ api/
│  │  └─ product/
│  │     ├─ components/
│  │     └─ api/
│  ├─ shared/             # Reusable utilities, UI, types
│  │  ├─ ui/
│  │  ├─ lib/
│  │  └─ types/
│  └─ config/             # Next.js and third‑party configs
│     └─ next.config.mjs
└─ public/
   └─ images/

Why This Layout?

Feature folders (src/features/*) keep all code related to a domain together – components, hooks, and API calls live side‑by‑side.
Shared layer (src/shared/*) houses generic UI primitives and utilities, avoiding duplication.
App Router (src/app) follows the new file‑system routing, allowing server components where appropriate.

Feature Modules {#feature-modules}

Each feature is a self‑contained module exposing a public API through an index.ts barrel file.

// src/features/cart/index.ts
export { CartProvider } from './hooks/useCart';
export { CartButton } from './components/CartButton';
export { cartApi } from './api/cartApi';

Using a Feature in a Page

// src/app/(dashboard)/page.tsx
import { CartButton } from '@/features/cart';
import { ProductList } from '@/features/product';

export default function DashboardPage() {
  return (
    <section>
      <h1>Dashboard</h1>
      <ProductList />
      <CartButton />
    </section>
  );
}

Tip: Exporting only the public surface keeps internal implementation details private and enables tree‑shaking.

Shared Utilities {#shared-utilities}

The src/shared/lib folder contains helpers that are agnostic to any feature.

// src/shared/lib/fetcher.ts
export async function fetcher<T>(url: string, init?: RequestInit): Promise<T> {
  const res = await fetch(url, init);
  if (!res.ok) throw new Error(`Failed to fetch ${url}`);
  return (await res.json()) as T;
}

You can now reuse fetcher across feature APIs:

// src/features/product/api/productApi.ts
import { fetcher } from '@/shared/lib/fetcher';

export const getProducts = () => fetcher<Product[]>('/api/products');

Routing & API Layers {#routing-api}

Next.js 16 encourages Route Handlers for server‑only logic. Place them under app/api.

// src/app/api/cart/route.ts
import { NextResponse } from 'next/server';
import { cartService } from '@/features/cart/api/cartService';

export async function POST(request: Request) {
  const { productId, quantity } = await request.json();
  const result = await cartService.add(productId, quantity);
  return NextResponse.json(result);
}

Edge‑Ready Handlers

Add the runtime: 'edge' export to run the handler at the edge.

// src/app/api/health/route.ts
export const runtime = 'edge';
export async function GET() {
  return new Response('OK', { status: 200 });
}

Configuration & Build Optimizations {#config-build}

A minimal next.config.mjs that enables bundling analysis and incremental static regeneration defaults:

// src/config/next.config.mjs
import { defineConfig } from 'next';

export default defineConfig({
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
  images: {
    remotePatterns: [{ hostname: 'cdn.example.com' }],
  },
  webpack: (config, { dev, isServer }) => {
    if (!dev) {
      config.optimization.minimize = true;
    }
    return config;
  },
});

Run next build && next export to generate a fully static site, or drop the output: 'standalone' flag for a server‑only deployment.

Testing Strategy {#testing}

Keep tests module‑scoped using the same folder structure.

src/
├─ features/
│  └─ cart/
│     └─ __tests__/
│        └─ cart.test.ts

Use Jest with React Testing Library for component tests and Playwright for end‑to‑end scenarios.

Conclusion

By adopting a feature‑first modular architecture, you gain:

Clear ownership boundaries.
Faster builds thanks to better tree‑shaking.
Easier onboarding for new developers.
Seamless migration to future Next.js releases.

Next step: Clone the starter repo, replace the placeholder components with your business logic, and ship your first production‑ready Next.js 16 module today.

Happy coding!

Formello: Laravel Package for Creating Forms Quickly & Easily

Rama Can — Fri, 05 Sep 2025 18:55:18 +0000

Formello: A Practical Solution for Creating Forms in Laravel 🚀
If you frequently code in Laravel, you’ve probably experienced the hassle of creating repetitive forms. From creating input fields, validation, error handling, to rendering in Blade. Well, now there’s Formello, a Laravel package specifically designed to simplify developers’ lives when creating forms.

Formello offers the perfect compromise:

Simpler than complex form libraries.
Lighter than full-featured admin panels such as Nova or Filament.

So, if you need to create forms quickly but still want them to be flexible and easy to manage, Formello could be your new best friend.

Key Features of Formello

Easy-to-use form definition using Laravel classes.
Automatic rendering directly to Blade.
Supports various fields: text, textarea, select, select2, radio, checkbox, toggle, date, datetime, upload, hidden, and custom widgets.
Automatic error handling (no need to create manually).
Form validation is directly integrated.
Styling support: Bootstrap 5 (Tailwind CSS coming soon).
With this feature, you can focus on the logic of the application without having to copy and paste boilerplate forms.

Formello Installation

Installation is very easy. Install the package via composer:

composer require metalogico/laravel-formello

Publish your assets:

php artisan vendor:publish --tag=formello-assets

To automatically update assets every time composer updates, just add this to composer.json:

"scripts": {
    "post-update-cmd": [
        "@php artisan vendor:publish --tag=formello-assets --force"
    ]
}

How to Use Formello in Laravel

Alright, let’s get hands-on with Formello. Here’s how you can start using it in your Laravel project.

1. Create a Form Class

First, create a form class that extends Metalogico\Formello\Formello.
Here’s a simple example for a ProductForm:

<?php

namespace App\Forms;

use Metalogico\Formello\Formello;
use Metalogico\Formello\Widgets\SelectWidget;

class ProductForm extends Formello
{
    protected function create(): array
    {
        return [
            'method' => 'POST',
            'action' => route('products.store'),
        ];
    }

    protected function edit(): array
    {
        return [
            'method' => 'POST',
            'action' => route('products.update', $this->model->id),
        ];
    }    

    protected function fields(): array
    {
        return [
            'name' => [
                'label' => __('Product Name'),
                'help' => 'Enter the name of the product',
            ],
            'description' => [
                'label' => __('Description'),
            ],
            'category_id' => [
                'label' => __('Category'),
                'widget' => 'select',
                'choices' => Category::pluck('name', 'id')->toArray(),
            ],
            'in_stock' => [
              'label' => __('In Stock'),
            ],
        ];
    }
}

⚠️ Note: Make sure these fields are added to your model’s $fillable array, otherwise Formello won’t render them.

class Product extends Model
{
    protected $fillable = [
        'name',
        'category_id',
        'description',
        'in_stock',
    ];
}

👉 Read the full article at ramacan.dev