update/not found page

src/app/(main)/[...slug]/page.tsx

 "use client";
 
 import { useEffect } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { notFound, useParams, useRouter } from "next/navigation";
 import { useGetNewsPageConfigGetHierarchical } from "@/api/endpoints/news-page-config";
 import { GetNewsPageConfigResponseType } from "@/api/types/news-page-config";
 
@@ -52,4 +52,6 @@ export default function DynamicPage() {
   if (slug.length === 3) {
     return <ArticleDetailPage />;
   }
+
+  return notFound();
 }

src/app/(main)/[...slug]/templates/ArticleDetailPage.tsx

@@ -10,6 +10,7 @@ import EventCalendar from "@/components/base/event-calendar";
 import dayjs from "dayjs";
 import parse from "html-react-parser";
 import { Spinner } from "@/components/ui";
+import { notFound } from "next/navigation";
 
 export default function ArticleDetailPage() {
   // get url
@@ -25,6 +26,9 @@ export default function ArticleDetailPage() {
     filters: `external_link==/${path}`,
   });
 
+  if (data?.responseData?.rows.length === 0 && !isLoading) {
+    return notFound();
+  }
   return (
     <div className='container w-full flex justify-center items-center pb-10'>
       {isLoading ? (

src/app/(main)/[...slug]/templates/ArticlePage.tsx

@@ -3,7 +3,7 @@
 import { GetNewsPageConfigResponseType } from "@/api/types/news-page-config";
 import { useGetNewsPageConfigGetHierarchical } from "@/api/endpoints/news-page-config";
 import ListCategory from "@/components/base/list-category";
-import { useParams, useSearchParams, useRouter, usePathname } from "next/navigation";
+import { useParams, useSearchParams, useRouter, usePathname, notFound } from "next/navigation";
 import { useGetNews } from "@/api/endpoints/news";
 import { GetNewsResponseType } from "@/api/types/news";
 import CardNews from "@/components/base/card-news";
@@ -51,6 +51,9 @@ export default function ArticlePage() {
     currentPage: String(page),
   });
 
+  if (data?.responseData?.rows.length === 0 && !isLoading) {
+    return notFound();
+  }
   return (
     <div className="min-h-screen container mx-auto">
       {isLoading ? (

src/app/(main)/[...slug]/templates/EventDetailPage.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Image from "next/image";
-import { useParams } from "next/navigation";
+import { notFound, useParams } from "next/navigation";
 
 import dayjs from "dayjs";
 import parse from "html-react-parser";
@@ -33,6 +33,10 @@ export default function EventDetailPage() {
     filters: `id==${lastpath}`,
   });
 
+  if (eventsDetail?.responseData?.rows.length === 0 && !isLoading) {
+    return notFound();
+  }
+
   return (
     <div className='container w-full flex justify-center items-center pb-10'>
       {isLoading ? (

src/app/(main)/[...slug]/templates/EventPage.tsx

 'use client';
 
 import { useEffect, useState } from "react";
-import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
+import { notFound, useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 
 import { useGetEvents } from "@/api/endpoints/event";
 import { EventApiResponse } from "@/api/types/event";
@@ -52,6 +52,10 @@ export default function EventPage() {
     currentPage: String(page),
   });
 
+  if (events?.responseData?.rows.length === 0 && !isLoading) {
+    return notFound();
+  }
+
   //template
   return (
     <>

src/app/(main)/[...slug]/templates/InformationPage.tsx

@@ -9,6 +9,7 @@ import { GetNewsResponseType } from "@/api/types/news";
 import { useGetNews } from "@/api/endpoints/news";
 import dayjs from "dayjs";
 import parse from "html-react-parser";
+import { notFound } from "next/navigation";
 
 export default function InformationPage() {
   // get url
@@ -25,6 +26,10 @@ export default function InformationPage() {
     filters: `page_config.static_link==/${path}`,
   });
 
+  if (data?.responseData?.rows.length === 0 && !isLoading) {
+    return notFound();
+  }
+
   //template
   return (
     <div className='container w-full flex justify-center items-center pb-10'>

src/app/not-found.tsx

+'use client';
+
+import Link from 'next/link';
+
+export default function notFound() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-blue-50 via-white to-purple-50 px-4">
+      <div className="max-w-2xl w-full text-center space-y-8">
+        {/* 404 Number */}
+        <h1 className="text-9xl font-bold text-blue-800 ">
+          404
+        </h1>
+        {/* Message */}
+        <div className="space-y-4">
+          <h2 className="text-3xl md:text-4xl font-bold text-gray-800">
+            Trang không tồn tại
+          </h2>
+          <p className="text-lg text-gray-600 max-w-md mx-auto">
+            Xin lỗi, trang bạn đang tìm kiếm không tồn tại hoặc đã được di chuyển.
+          </p>
+        </div>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <Link
+            href="/"
+            className="px-8 py-3 bg-blue-800  text-white font-semibold rounded-lg shadow-lg hover:shadow-xl duration-200"
+          >
+            Về trang chủ
+          </Link>
+          <button
+            onClick={() => window.history.back()}
+            className="px-8 py-3 bg-white text-gray-700 font-semibold rounded-lg shadow-md hover:shadow-lg border border-gray-200 duration-200"
+          >
+            Quay lại
+          </button>
+        </div>
+
+        {/* Additional Help */}
+        <div className="pt-8 text-sm text-gray-500">
+          <p>Bạn có thể thử:</p>
+          <ul className="mt-2 space-y-1">
+            <li>• Kiểm tra lại URL</li>
+            <li>• Tìm kiếm nội dung bạn cần</li>
+            <li>• Liên hệ với chúng tôi nếu bạn nghĩ đây là lỗi</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}