DEV Community: Hamza Sehouli

How to connect Next.js 16 with MySQL using Drizzle ORM: A straightforward guide with a concrete example

Hamza Sehouli — Wed, 11 Mar 2026 18:38:52 +0000

When developing a web application, it is essential to have an efficient way of managing your data. MySQL is a widely used relational database that offers a reliable solution for this. Connecting MySQL to Next.js enables your application to interact seamlessly with your data, whether you are inserting, fetching, updating or deleting records.

To avoid common issues such as incorrect data types and complex SQL queries, using the Drizzle ORM makes the connection type-safe and easier to manage and maintain, providing a clear bridge between your Next.js application and the MySQL database.

A Quick Introduction to Next.js.
Next.js is a popular React framework that allows developers to build fast, modern, and scalable web applications.

It extends React by adding features like routing for navigating between pages, server-side rendering to improve performance and SEO, static site generation for pre-rendered pages, caching to speed up repeated requests, asset bundling to optimize code delivery, prefetching to load pages in advance and make navigation instant, and data streaming for dynamic content.

These features make it easier to create high-performance web apps, while simplifying development and deployment.

Why Use Drizzle ORM with Next.js?
Drizzle ORM offers several key advantages for developers building Next.js applications that use SQL databases.

By leveraging Static Type Inference, Drizzle ORM ensures your database queries are synchronized with your code’s logic. This allows the TypeScript compiler to catch schema mismatches, typos, and missing data at compile time and long before the code is even deployed.

By shifting error detection to the earliest stage of development, you eliminate common runtime crashes, drastically reduce the time spent debugging, and create a more resilient, self-documenting codebase.

The library is also lightweight and modern, providing fast performance. It is also SQL-friendly, allowing you to write raw SQL when needed for flexibility and more complex queries.

Additionally, Drizzle works well with serverless applications, making it a strong choice for deployments on cloud platforms.

1- Setting Up Your Next.js Project
First, create a new Next.js project if you don’t have one already:

pnpm create next-app@latest my-nextjs-mysql-app --yes
cd my-nextjs-mysql-app
pnpm dev
Let’s break down what each command does:

pnpm create next-app@latest my-nextjs-mysql-app -yes
This command scaffolds a new Next.js project using the latest version of the framework which is 16 at this time.

pnpm is the package manager used to install dependencies.
.......

You can read the full step-by-step tutorial on Medium, where I walk through the entire setup, configuration, and practical examples:

medium.com

Next.js 16 for Beginners: Start Building Full-Stack React Apps

Hamza Sehouli — Wed, 11 Mar 2026 18:36:48 +0000

The world of web development moves quickly, new tools with their new releases coming out constantly, which can feel overwhelming for both beginners and experienced developers.

Some developers make the mistake of trying to shortcut the learning journey by jumping straight into frameworks like Next.js without mastering the fundamentals. This often leads to getting stuck, moving aimlessly from documentation to Google searches or AI tools, and feeling lost in a tangled web of ever-changing technologies.

In this chaos, it’s easy to lose track of the connections between tools and the natural progression of learning web development.

Next.js is built on JavaScript and React, so jumping straight into it without understanding React can be challenging. So before diving into it, it’s important to get comfortable with React basics so you have a solid foundation to confidently start building Next.js applications.

A great place to begin is the React foundations tutorial available on the official Next.js website: https://nextjs.org/learn/react-foundations

So you may ask, why do we need another tool if React is already there?

Although React is a powerful library, as its name indicates, just a library, it doesn’t provide everything needed to build a complete, full-stack application on its own.

Because of this, developers often use other tools and technologies with React to handle the other parts of the app.

To get your head around this, it helps to know the difference between a library and a framework.

A library is a collection of functions, utilities, or components that you can use. You remain in control of how your application should be and decide when and how to call the library’s features.

React follows this approach. It focuses on building user interfaces and provides several APIs that developers can use to create and manage components.

For example, React DOM connects React to the browser and is responsible for rendering and updating React components in the DOM. React also includes functions such as useState, useEffect, createContext, and useContext, which help manage state, handle side effects, etc.

Since React operates as a library, not a framework, it delegates other features, including routing, data fetching, advanced state management, and server-side logic, to customized methods or third party tools.

A framework, on the other hand, provides a more complete structure for building an application. It defines how different parts of the project should be organized and usually includes built-in solutions for common tasks such as routing, server rendering, data fetching, bundling, caching, and other development tooling.

In this way, the framework controls the overall flow of the application and calls your code when needed, rather than the other way around.

For example, React is a library focused on UI components, while Next.js is a framework built on top of React that provides a full structure for developing modern full-stack applications.

Next.js has become a popular choice for building modern React applications that are fast, scalable, and SEO-friendly. This guide is intended for novice users and will provide an overview of the fundamentals of Next.js, including why developers use it, the process for creating your first project, and the core concepts such as pages and routing.

You can read the full step-by-step tutorial on Medium, where I walk through the entire setup, configuration, and practical examples.

medium.com

Image and Font Optimization in Next.js App Router — A Deep Dive with Examples

Hamza Sehouli — Sat, 21 Jun 2025 06:25:53 +0000

Next.js is built with performance as a core principle, especially with its App Router approach. Two important parts of making a website work well are making the images and fonts easy to see and read. Unoptimized images can make pages bigger and slower to load. Unoptimized fonts can lead to “Flash of Unstyled Text” (FOUT) or “Flash of Invisible Text” (FOIT). This can create a bad user experience.

The latest versions of Next.js, especially when using the App Router, offer strong, built-in ways to deal with these problems effectively.

Image Optimization

The Next.js next/image component is a useful addition to the standard HTML tag. It automatically optimizes images for performance and visual stability. In the App Router, it works perfectly and is highly recommended.

The Next.js component extends the HTML element to provide:

Responsive Images: Automatically serves correctly sized images for different device viewports and resolutions using modern image formats like WebP reducing file size without compromising quality.
Lazy Loading: Images are lazy-loaded by default, meaning they only load when they enter the viewport, improving initial page load times.
Prevent Layout Shift: Automatically adds width and height properties (or infers them from static imports), reserving space for the image before it loads to prevent layout shifts.
Example Usage:
Local Image: For images placed in your public directory, you can import them directly, and Next.js will handle the width and height automatically.

// public/image.jpg
export default function Page() {
  return (
    <Image
      src={'/image.jpg'}
      alt="Description of my image"
      // width and height are automatically determined for static imports
      // placeholder="…."
    />
  );
}

Remote Image:

If the images are hosted on a different website (for example, if they come from a CDN or CMS), you need to manually set the width and height. This will prevent any changes to the layout. You also need to configure remotePatterns in next.config.js for security.

// app/page.js
import Image from 'next/image';

export default function MyPage() {
  return (
  <Image
    src="https://example.com/image.png"
    alt="Description"
    width={800} // Actual width of the image
    height={600} // Actual height of the image
    priority // Optional: Use for LCP images (above the fold) to preload
  />
  );
}

More in https://medium.com/@sehouli.hamza/image-and-font-optimization-in-next-js-app-router-a-deep-dive-with-examples-3c6fab942f5c-3c6fab942f5c

Next.js 15 for Beginners. Your first step into the world of full-stack React

Hamza Sehouli — Sat, 21 Jun 2025 06:24:25 +0000

If you’re new to web development with React, you might feel excited and overwhelmed. React is a useful library for building user interfaces, but it’s not a comprehensive solution for building a full-stack application. This means that you often need to use other tools in addition to React.

Next.js has quickly become the preferred choice for building strong, fast, and SEO-friendly React applications. This guide is for people who are just starting out. It will teach you what Next.js is, why it’s so important, how to set up your first project, and the basics like pages and routing.

What is Next.js?
Next.js is a toolkit that helps you build sophisticated web applications. It integrates powerful features directly into the framework. It makes development easier with a sophisticated file system-based routing system that supports nested layouts. It also gives developers flexible styling options like CSS Modules and Tailwind CSS.

Next.js uses the latest React features, like Server Components, which reduce client-side JavaScript. It also uses Server Actions to run server code directly from your components. This eliminates the need for traditional API boilerplate. It allows components to fetch data asynchronously on both the server and client, while Route Handlers enable the creation of robust API endpoints.

To make sure it performs at its best and provides a great experience for its users, Next.js automatically optimizes images, fonts, and scripts. It also streams UI from the server right away and offers detailed control over how it renders things, like Incremental Static Regeneration (ISR).

Finally, Middleware gives you powerful control over incoming requests. This lets you set advanced routing, authentication, and internationalization rules.

Why is Next.js So Powerful for Full-Stack Development?
There’s a lot of interest in Next.js for good reason. It offers many features that make the development process easier and improve the final product. Here are some of the main benefits:

Setup that doesn’t require any configuration: To get started with a new project, you just need to run one command. Next.js handles all the initial setup, including transpiling and bundling, so you can focus on writing code.

File-System Based Routing: This is one of the most intuitive features of Next.js. You can create routes for your application by organizing your files and folders in the app or pages directory. You don’t need any complicated routing libraries to get started.

More in https://medium.com/@sehouli.hamza/next-js-15-for-beginners-your-first-step-into-the-world-of-full-stack-react-990dbcbdc728

Handling PATCH and PUT Requests with Next.js and Laravel

Hamza Sehouli — Sat, 21 Jun 2025 05:17:45 +0000

When building modern web apps, it’s super important to handle API requests properly. In this tutorial, we’re going to take a look at how to manage PATCH and PUT requests in a Laravel API and integrate them seamlessly with a Next.js frontend.

PATCH and PUT are both ways to update resources, but they do different things. PATCH is used for partial updates (only updating the fields that change), while PUT is typically used for full updates (replacing the entire resource). This guide will show you how to use these methods in a Next.js app that talks to a Laravel backend.

You may wonder why we just use POST to update resources, but doing that would go against the usual RESTful practices. POST is usually used to create new resources, not modify existing ones. Using PUT or PATCH makes sure your API follows the HTTP standard, giving you clear and predictable behaviors.

Setting Up Laravel for PATCH and PUT Requests

To begin, let’s explore how you can configure your Laravel backend to handle PATCH and PUT requests.

1-Step: Define Routes in api.php
In your routes/api.php, you need to define the routes that will handle the PATCH and PUT requests.

// PATCH Request - Partial update of a project
Route::patch('/projects/{id}', [ProjectController::class, 'update']);

// PUT Request - Full update of a project
Route::put('/projects/{id}', [ProjectController::class, 'update']);

2-Step: Controller Method
In your ProjectController, you’ll define the logic for handling these requests. Laravel makes it simple to handle both types of updates by using validation and updating logic.

public function update(Request $request, Project $project){
  // Validation for both PATCH and PUT
  $validated = $request->validate([
    'title' => 'required|string|max:255',
    'description' => 'required|string',
    // Add other fields as necessary
  ]);

  // Update the project
  $project->update($validated);
  return response()->json(['message' => 'Project updated successfully.']);
 }

The same update method is used for both PATCH and PUT. This is because both methods usually do the same thing: update an existing resource. The main difference is that a PATCH request updates only some parts of a resource, while a PUT replaces the resource entirely.

Handling PATCH and PUT Requests in Next.js

We’ve finished setting up the backend, so let’s focus on making the right requests from the Next.js.

1-Step: Create the Request Function
To do this, you’ll need to set up a server action to handle PATCH and PUT requests to your Laravel API. Here’s an example of how to do this in Next.js using fetch.

'use server'

export async function updateProject(initialState, formData) {
  formData.append('_method', 'PATCH'); //_method field will be used as the HTTP request method.

// Send the request to the Laravel API
  try {
    const response = await fetch(".../api/projects/id", {
      method :"POST", // We need to use the POST method to retrieve sent data in Laravel.
      body: formData // Send data
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data?.message || "Failed to update project.");
    }

    return { status: true, message: "Project updated successfully." };

  } catch (error) {
    return { status: false, message: error.message };
  }
}

More in
https://medium.com/@sehouli.hamza/handling-patch-and-put-requests-with-next-js-and-laravel-263f62b3e647

Role-based access control in Laravel with Spatie’s Laravel-permission package

Hamza Sehouli — Thu, 03 Apr 2025 04:35:35 +0000

A fundamental requirement of modern web applications is the efficient management of user roles and permissions. However, for implementing it, the Laravel Permissions package simplifies the process with a powerful and straightforward workflow.

In this article, we will explore how to set up and use the latest version (v6) of Spatie’s Laravel Permissions for managing roles and permissions.

medium.com

Laravel Cashier with Stripe. An introductory guide to handling subscriptions and payments

Hamza Sehouli — Thu, 03 Apr 2025 04:34:04 +0000

Laravel Cashier provides an easy way to integrate Stripe with Laravel. It makes it easier to implement subscription billing functionality by abstracting the complexity of Stripe’s API.

Laravel Cashier can handle coupons, subscriptions, cancellations, and generate invoice PDFs.

This guide covers installation, configuration, workflows, and practical examples to help you implement a robust billing system using Laravel Cashier for Stripe.

medium.com

What’s New in Laravel 12?

Hamza Sehouli — Thu, 03 Apr 2025 04:32:41 +0000

Laravel 12 is shipped with minimal disruptive changes, focusing on updated dependencies and introducing powerful new Starter Kits and other significant improvements without disrupting your existing codebase.

As with Laravel 11, Laravel 12 requires PHP version of 8.2–8.4.

Laravel 12 is officially out. What’s new?

Changes with minimal disruption to your existing code
Laravel 12 is designed as a maintenance release, meaning most applications can upgrade without modifying their code. Instead of introducing disruptive changes, this version enhances stability and refines the framework’s internals.

medium.com

Laravel repositories — Do you really need them?

Hamza Sehouli — Thu, 03 Apr 2025 04:30:31 +0000

If you’re developing Laravel, you’ve probably come across Repositories when contributing to an open source project, seeing it in the demo, or searching for a bug fix. They’re widely used to abstract the data layer and organize code better. Is this really needed in every Laravel project?

I’m personally not a huge fan of repositories, especially in small to medium-sized projects. From my experience, repositories tend to introduce unnecessary complexity and scatter code through extra layers and directories that, in my opinion, don’t always add significant value.

In simpler applications, where the database interaction is relatively straightforward, I believe repositories can overcomplicate things, leading to more files and potentially more confusion for developers coming onto the project later. However, I can see how repositories are beneficial for larger, more complex applications, where the need for scalability and testing is more prominent.

Let’s take a closer look at Laravel’s repositories, what they are, and whether they are worth implementing. Repositories can certainly bring benefits like better testability and cleaner code. However, they’re not always the right tool for every job.

medium.com

Top Laravel Packages 2025

Hamza Sehouli — Thu, 03 Apr 2025 04:25:05 +0000

In the world of PHP frameworks, Laravel is a big name. It’s got a reputation for being elegant, beginners friendly, rigorous documentation and having appealing features. A big part of what makes it so powerful and flexible is its ecosystem of packages. These packages are usually made by the Laravel community who love Laravel and add to the framework’s extra features, and lift daunting operations, plus they can handle both simple and complex tasks.

With that in mind, we’re going to explore: what are packages, how they’re categorized, and what you should know before you’re integrating them into your Laravel project.

medium.com

Understanding Rate Limiting and Throttling in Laravel 12 APIs

Hamza Sehouli — Thu, 03 Apr 2025 04:14:13 +0000

It’s important to put limits on how many requests a user can make and to limit the number of requests per user. This helps to prevent abuse of your API system. Laravel 12 has built-in support for setting limits on requests. This makes sure that resources are used fairly and efficiently, and it protects against too much traffic.

This guide will show you how to use and personalize rate limiting with Laravel’s ThrottleRequests middleware and the RateLimiter facade.

medium.com

Avoid common problems and leaks by managing PHP memory efficiently

Hamza Sehouli — Thu, 03 Apr 2025 04:12:27 +0000

Managing memory is an important part of developing efficient, scalable, and fast PHP applications and is crucial for scripts that run for a long time, APIs, and applications with a lot of traffic.
If you don’t manage it properly, memory may increase and become overloaded. This can lead to slower applications or memory leaks....

medium.com