DEV Community: Hasanul Haque Banna

Host Nextjs 14 Application on cPanel

Hasanul Haque Banna — Mon, 18 Nov 2024 18:04:18 +0000

Deploying a Next.js application on a shared hosting platform like cPanel can be a little challenging, but with the right steps, it’s completely doable! This guide will walk you through configuring your Next.js app for a standalone build, preparing the files, and deploying them on cPanel with a Node.js setup.

For successfully deploying the application in this guide, I’ll walk you through deploying a basic Next.js setup on cPanel for the website noorgarments.store for a client of dummy content. By the end, you'll have a live Next.js application that’s ready for users.

Prerequisites

Before we get started, ensure you have:

Access to the cPanel account
A basic Next.js application ready on your local environment

Now, let’s get started!

Step 1: Configure Next.js for Standalone Output

First, let's configure your Next.js app to produce a standalone build. This is essential for deploying in environments like cPanel, where we may need to manually manage our dependencies and assets.

In your next.config.js or next.config.mjs file, add the following configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;

This configuration sets the output to standalone, making Next.js create a self-contained build. The images.remotePatterns setting allows Next.js to handle remote images securely, using a wildcard pattern to include images from any external source.

Important Notice: As of Next.js version 14.2.14, there may be compatibility issues with standalone output when using route groups. Make sure to test your setup carefully if you’re using route groups, as it may cause the deployment to fail on versions newer than 14.2.14.

Step 2: Build Your Application

Once you've configured your app for standalone output, it’s time to build the project. In your terminal, run:

npm run build

This command compiles the application into the .next directory, creating a production-ready version of your Next.js project.

Step 3: Locate the `.next` Directory and Files

After the build completes, you’ll find a .next directory in your project root. This directory contains all the assets and configurations needed to run your app.

Inside .next, you’ll see several folders, including standalone and static. These directories hold essential files that your server will use to serve the application.

Step 4: Gather the Necessary Files and Folders

From the .next directory, you’ll need to gather specific files and directories:

The standalone folder, which contains all the necessary server files.
The static folder, which contains public assets.

These two folders are essential for the standalone Next.js app to function properly.

For a detailed step-by-step guide, visit my blog or youtube video:
👉 Host a Next.js 14 Application on cPanel | Blog
👉 Host a Next.js 14 Application on cPanel | Video

Next.js Error Monitoring with Sentry: Enhancing Your Application’s Reliability

Hasanul Haque Banna — Fri, 15 Mar 2024 05:36:25 +0000

In the fast-paced world of web development, ensuring the reliability and stability of your applications is paramount. Next.js, a popular React framework for building web applications, offers a powerful solution to this challenge.

However, ensuring the reliability and performance of your Next.js app is equally crucial. That’s where Sentry comes into play. Combined with Sentry, an industry-leading error monitoring platform, Next.js empowers developers to proactively identify and resolve issues that may arise in their applications. In this article, we’ll explore how to integrate Sentry into your Next.js project for effective error monitoring and performance optimization.

1. Setting Up Sentry

1.1 Create a Sentry Account

Start by creating a free Sentry account on Sentry's website. This account will serve as your dashboard for tracking errors and performance issues.

1.2 Install the Sentry SDK

or

Run the following command in your Next.js project directory:

npx @sentry/wizard@latest -i nextjs

This command will:

Set up your Sentry account.
Automatically add the Sentry SDK to your project.
Begin capturing errors and performance data.

2. Error Monitoring

2.1 Insights and Stack Traces

Sentry provides actionable insights into your Next.js app's errors. You'll see detailed stack traces, which were previously only accessible via user debug consoles. Additionally, Sentry automatically applies source maps to convert minified or transpiled code back to its original form.

2.2 Private Source Maps

// next.config.js
module.exports = {
    productionBrowserSourceMaps: true,
  };

Keep your Next.js source maps private by uploading them directly to Sentry. This ensures that you can debug issues without compromising sensitive information.

3. Performance Monitoring

3.1 Tracing Performance Issues

Within minutes of installing Sentry, you can trace performance bottlenecks in your Next.js app. Identify slow API calls, inefficient code, and related errors.

3.2 Release Management

Sentry allows you to manage releases effectively. Mark Next.js errors as resolved, prioritize live issues, and gain a full view of your application's performance over time.

4. Session Replay

4.1 Contextual Insights

Sentry's session replay feature provides context for errors. Understand what happened when an error occurred, including user interactions, AJAX requests, and DOM events.

5. Breadcrumbs

5.1 Capturing User Journeys

Sentry captures breadcrumbs, showing what your app was doing when an error occurred. Use this information to prompt users for feedback and compare their experiences to the data.

6. Debugging Any Exception

6.1 Comprehensive Details

Record environment and usage specifics to recreate bugs down to the browser version, operating system, and query parameters specific to the session. Sentry's tag distribution graph helps isolate and prioritize Next.js errors based on frequency.

Conclusion

Effective error monitoring is essential for maintaining a smooth user experience. With Sentry, you'll be well-equipped to optimize your Next.js application and deliver fast, reliable results. So go ahead, write that blog article, and spread the word about Next.js and Sentry!

"Sentry has changed how we monitor and respond to errors at Vercel by increasing code visibility and reducing resolution times. I’m thrilled for the new SDK to make error monitoring even easier for the Next.js ecosystem." — Lee Robinson, Head of Developer Relations at Vercel

4 Ways To Make React Outside Click Handler

Hasanul Haque Banna — Tue, 12 Mar 2024 08:11:55 +0000

Greetings, fellow developers! Welcome to the fascinating world of React.js, the renowned JavaScript library created by Facebook that has taken the development community by storm. Within the captivating realm of React.js, a wide array of projects prominently feature modal dialogs, stylish sidebars, and various user interface components.

However, one common challenge developers often face is detecting clicks outside these engaging components. Picture a scenario where a modal should elegantly disappear or a sidebar should smoothly retract when a user clicks outside their designated areas.

The great news is that React provides a wealth of innovative techniques to master the art of managing "React outside click" scenarios, enabling us to craft enchanting user experiences. In this article, I will present four distinct approaches to gracefully handle outside clicks in your React applications, each offering its own unique charm and elegance.

1. Pure React Approach

You can achieve this with a pure React implementation by using a combination of the useEffect and useRef hooks. Here's an example:

import React, { useRef, useEffect, useState } from "react";
const OutsideClick: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const ref = useRef<HTMLDivElement | null>(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleClickOutside = (event: MouseEvent) => {
    if (ref.current && !ref.current.contains(event.target as Node)) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    document.addEventListener("click", handleClickOutside);
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, []);

  return (
    <div ref={ref}>
      {isOpen ? (
        <div> {children}</div>
      ) : (
        <button onClick={() => setIsOpen(true)}>Open</button>
      )}
    </div>
  );
};

export default OutsideClick;

This implementation listens for click events on the document and checks if the clicked element is outside the component's ref using the contains method.

2. Using a Third-Party Library (React Outside Click)

If you prefer using a third-party library, there's a popular one called react-outside-click-handler. Here's how you can use it:

First, install the library:

npm install react-detect-click-outside

Then, use it in your component:

import React from "react";
import { useDetectClickOutside } from "react-detect-click-outside";

const OutsideClick = ({ closeDropdown }) => {
  const ref = useDetectClickOutside({ onTriggered: closeDropdown });
  return (
    <div className="dropdown" ref={ref}>
      <p>This is a dropdown!</p>
    </div>
  );
};

export default OutsideClick;

This library simplifies the process by providing hooks as a wrapper component that handles the outside click event for you.

3. Using Event Bubbling (No Refs)

Another way to implement an "outside click" feature is by leveraging event bubbling in React. Here's an example:

import React, { useState } from "react";

const OutsideClick = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClickOutside = () => {
    setIsOpen(false);
  };

  const handleClickInside = (event) => {
    event.stopPropagation();
    setIsOpen(true);
  };

  return (
    <div onClick={handleClickOutside}>
      {isOpen ? (
        <div onClick={handleClickInside}>{children}</div>
      ) : (
        <button onClick={() => setIsOpen(true)}>Open</button>
      )}
    </div>
  );
};

export default OutsideClick;

4. Making Custom Hooks (almost same concept)

In this sophisticated way, we are presently engendering a React custom hook, one that bears striking semblance to the concept expounded earlier:

import { useEffect } from "react";

const useOutsideClick = (ref, callback) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        callback();
      }
    }

    document.addEventListener("click", handleClickOutside);

    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, [ref, callback]);
};

export default useOutsideClick;

Conclusion

Recognizing the nuances of user interface design, the judicious use of outside click detection proves highly beneficial in a variety of UI elements such as popups, dropdowns, and menus. It is a wise practice to note that web developers frequently lean towards integrating third-party libraries for tasks that can be handled independently.

This preference for excessive dependencies can lead to the unnecessary burden on web applications, resulting in larger bundle sizes and a detrimental effect on codebase maintainability.

DEV Community: Hasanul Haque Banna

Host Nextjs 14 Application on cPanel

Prerequisites

Step 1: Configure Next.js for Standalone Output

Step 2: Build Your Application

Step 3: Locate the .next Directory and Files

Step 4: Gather the Necessary Files and Folders

Next.js Error Monitoring with Sentry: Enhancing Your Application’s Reliability

1. Setting Up Sentry

1.1 Create a Sentry Account

1.2 Install the Sentry SDK

or

2. Error Monitoring

2.1 Insights and Stack Traces

2.2 Private Source Maps

3. Performance Monitoring

3.1 Tracing Performance Issues

3.2 Release Management

4. Session Replay

4.1 Contextual Insights

5. Breadcrumbs

5.1 Capturing User Journeys

6. Debugging Any Exception

6.1 Comprehensive Details

Conclusion

4 Ways To Make React Outside Click Handler

1. Pure React Approach

2. Using a Third-Party Library (React Outside Click)

3. Using Event Bubbling (No Refs)

4. Making Custom Hooks (almost same concept)

Conclusion

Step 3: Locate the `.next` Directory and Files