update

.claude/settings.local.json

@@ -5,7 +5,9 @@
       "Bash(npm install:*)",
       "Bash(npx tsc:*)",
       "Bash(curl -s http://localhost:3000/tin-tuc)",
-      "Bash(grep '\"\"url\"\"' src/data/article/ListArticleNews.ts)"
+      "Bash(grep '\"\"url\"\"' src/data/article/ListArticleNews.ts)",
+      "Bash(cat src/features/Article/HomeArticlePage/index.tsx src/features/Article/CategoryPage/index.tsx src/features/Article/DetailPage/index.tsx src/features/Article/DetailPage/TocBox/index.tsx src/hooks/useApiData.ts src/app/[slug]/page.tsx src/features/Article/HomeArticlePage/BoxArticleMid/index.tsx src/features/Article/HomeArticlePage/BoxVideoArticle/index.tsx src/features/Article/HomeArticlePage/BoxArticleReview/index.tsx src/features/Article/ArticleTopLeft/index.tsx src/features/Article/ArticleTopRight/index.tsx src/components/Common/ItemArticle/index.tsx)",
+      "Bash(find /c/Users/APC/Downloads/work/nguyencongpc_nextjs/src -type f -name *.ts -o -name *.tsx)"
     ]
   }
 }

package.json

@@ -16,8 +16,11 @@
     "@fancyapps/ui": "^6.1.7",
     "@tippyjs/react": "^4.2.6",
     "@types/dompurify": "^3.0.5",
+    "cors": "^2.8.6",
     "date-fns": "^4.1.0",
     "dompurify": "^3.3.3",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
     "framer-motion": "^12.23.26",
     "lightgallery": "^2.9.0",
     "next": "^16.1.6",
@@ -37,6 +40,7 @@
     "eslint-config-next": "^16.1.6",
     "eslint-config-prettier": "^10.1.8",
     "msw": "^2.12.7",
+    "nodemon": "^3.1.14",
     "prettier": "^3.7.4",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^4.1.18",

src/app/[slug]/page.tsx

@@ -9,26 +9,14 @@ import ProductHotPage from '@/features/Product/ProductHot';
 import ArticlePage from '@/features/Article/HomeArticlePage';
 import ArticleCategoryPage from '@/features/Article/CategoryPage';
 import ArticleDetailPage from '@/features/Article/DetailPage';
-import PreLoader from '@/components/Common/PreLoader';
+import { resolvePageType } from '@/lib/resolvePageType';
-import { getResolvedPageType } from '@/lib/api/page';
-import { useApiData } from '@/hooks/useApiData';
 
 export default function DynamicPage() {
   const { slug } = useParams();
+  if (typeof slug !== 'string' || slug.length === 0) return <NotFound />;
+
   const fullSlug = `/${slug}`;
-
+  const pageType = resolvePageType(fullSlug);
-  const { data: pageType, isLoading } = useApiData(
-    () => getResolvedPageType(fullSlug),
-    [fullSlug],
-    {
-      initialData: '404',
-      enabled: typeof slug === 'string' && slug.length > 0,
-    },
-  );
-
-  if (isLoading) {
-    return <PreLoader />;
-  }
 
   switch (pageType) {
     case 'category':

src/app/buildpc/BtnAction/index.tsx

@@ -40,7 +40,7 @@ const BtnAction = ({
       <div className="grid gap-5 xl:grid-cols-[0.9fr_1.1fr]">
         <div className="space-y-4">
           <div>
-            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-white/45">
+            <p className="text-sm font-semibold tracking-[0.2em] text-white/45 uppercase">
               Tóm tắt cấu hình
             </p>
             <p className="mt-3 text-3xl font-semibold">

src/app/buildpc/page.tsx

@@ -38,11 +38,11 @@ export default async function BuildPcPage() {
               <div className="relative overflow-hidden rounded-[24px] bg-[linear-gradient(135deg,#7f1d1d_0%,#b91c1c_48%,#111827_100%)] p-6 text-white shadow-[0_22px_60px_rgba(127,29,29,0.28)]">
                 <div className="absolute inset-y-0 right-0 w-40 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.3),transparent_65%)]" />
                 <div className="relative space-y-4">
-                  <span className="inline-flex rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-white/80">
+                  <span className="inline-flex rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-semibold tracking-[0.24em] text-white/80 uppercase">
                     Build PC theo nhu cầu
                   </span>
                   <div className="space-y-3">
-                    <h1 className="max-w-3xl text-3xl font-semibold leading-tight md:text-4xl">
+                    <h1 className="max-w-3xl text-3xl leading-tight font-semibold md:text-4xl">
                       {snapshot.title}
                     </h1>
                     <p className="max-w-2xl text-sm leading-6 text-white/80 md:text-base">
@@ -51,14 +51,14 @@ export default async function BuildPcPage() {
                   </div>
                   <div className="grid gap-3 sm:grid-cols-2">
                     <div className="rounded-2xl border border-white/15 bg-white/10 p-4">
-                      <p className="text-xs uppercase tracking-[0.24em] text-white/70">Số bước</p>
+                      <p className="text-xs tracking-[0.24em] text-white/70 uppercase">Số bước</p>
                       <p className="mt-2 text-2xl font-semibold">{snapshot.categories.length}</p>
                       <p className="mt-1 text-sm text-white/75">
                         Danh mục được chia theo từng linh kiện để lắp cấu hình nhanh hơn.
                       </p>
                     </div>
                     <div className="rounded-2xl border border-white/15 bg-white/10 p-4">
-                      <p className="text-xs uppercase tracking-[0.24em] text-white/70">
+                      <p className="text-xs tracking-[0.24em] text-white/70 uppercase">
                         Trạng thái dữ liệu
                       </p>
                       <p className="mt-2 text-2xl font-semibold">Live</p>
@@ -74,7 +74,7 @@ export default async function BuildPcPage() {
             <section className="rounded-[24px] border border-slate-200 bg-slate-50/80 p-4 md:p-5">
               <div className="mb-3 flex items-center justify-between gap-3">
                 <div>
-                  <p className="text-sm font-semibold uppercase tracking-[0.18em] text-slate-500">
+                  <p className="text-sm font-semibold tracking-[0.18em] text-slate-500 uppercase">
                     Bộ cấu hình
                   </p>
                   <p className="mt-1 text-sm text-slate-600">

src/components/Cart/Home/ItemCart/index.tsx

@@ -28,7 +28,7 @@ export const ItemCart: React.FC<PropsCart> = ({ item, onUpdate, onDelete }) => {
 
   return (
     <div className="cart-item-info js-item-row flex justify-between">
-      <div className="cart-item-left flex">
+      <div className="cart-item-left flex gap-3">
         <Link className="cart-item-img relative" href={item.item_info.productUrl}>
           <Image
             src={item.item_info.productImage.large}
@@ -37,7 +37,7 @@ export const ItemCart: React.FC<PropsCart> = ({ item, onUpdate, onDelete }) => {
             width={100}
             height={100}
           />
-          {item.item_info.sale_rules?.type == 'deal' && (
+          {item.item_info.sale_rules?.type === 'deal' && (
             <Image
               className="icon-deal-cart lazy"
               src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/static-icon-cart-deal.png"
@@ -99,15 +99,9 @@ export const ItemCart: React.FC<PropsCart> = ({ item, onUpdate, onDelete }) => {
       </div>
       <div className="box-item-right flex flex-col items-end justify-between">
         <div className="price-cart-item">
-          {item.in_cart.price == '0' ? (
+          <p className="price cart-item-price item-cart-price js-total-item-price font-bold">
-            <p className="price cart-item-price item-cart-price js-total-item-price font-bold">
+            {item.in_cart.price === '0' ? '0' : formatCurrency(item.in_cart.total_price)} đ
-              0 đ
+          </p>
-            </p>
-          ) : (
-            <p className="price cart-item-price item-cart-price js-total-item-price font-bold">
-              {formatCurrency(item.in_cart.total_price)} đ
-            </p>
-          )}
         </div>
         <button
           onClick={() => onDelete(item._id)}

src/components/Cart/Home/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -29,42 +29,49 @@ const HomeCart = () => {
 
   const formRef = useRef<FormCartRef>(null);
 
-  const updateCartItem = (id: string, quantity: number) => {
+  const updateCartItem = useCallback(
-    const newCart = cart.map((item) =>
+    (id: string, quantity: number) => {
-      item._id === id
+      const newCart = cart.map((item) =>
-        ? {
+        item._id === id
-            ...item,
+          ? {
-            in_cart: {
+              ...item,
-              ...item.in_cart,
+              in_cart: {
-              quantity: quantity.toString(),
+                ...item.in_cart,
-              total_price: quantity * Number(item.in_cart.price),
+                quantity: quantity.toString(),
-            },
+                total_price: quantity * Number(item.in_cart.price),
-          }
+              },
-        : item,
+            }
-    );
+          : item,
-    writeCartToStorage(newCart);
+      );
-  };
+      writeCartToStorage(newCart);
+    },
+    [cart],
+  );
 
-  const deleteCartItem = (id: string) => {
+  const deleteCartItem = useCallback(
-    if (!window.confirm('Bạn có chắc chắn xóa sản phẩm này không?')) return;
+    (id: string) => {
-    const newCart = cart.filter((item) => item._id !== id);
+      if (!window.confirm('Bạn có chắc chắn xóa sản phẩm này không?')) return;
-    writeCartToStorage(newCart);
+      const newCart = cart.filter((item) => item._id !== id);
-  };
+      writeCartToStorage(newCart);
+    },
+    [cart],
+  );
 
-  const deleteCart = () => {
+  const deleteCart = useCallback(() => {
     if (!window.confirm('Bạn có chắc chắn xóa toàn bộ giỏ hàng không?')) return;
     clearCartStorage();
-  };
+  }, []);
 
-  const getTotalPrice = () => {
+  const totalPrice = useMemo(
-    return formatCurrency(cart.reduce((sum, item) => sum + Number(item.in_cart.total_price), 0));
+    () => formatCurrency(cart.reduce((sum, item) => sum + Number(item.in_cart.total_price), 0)),
-  };
+    [cart],
+  );
 
-  const handleClickOrder = () => {
+  const handleClickOrder = useCallback(() => {
     if (formRef.current?.validateForm()) {
       router.push('/send-cart');
     }
-  };
+  }, [router]);
 
   return (
     <>
@@ -134,14 +141,12 @@ const HomeCart = () => {
                   <p className="price-total1 flex items-center justify-between">
                     <b className="txt">Tổng cộng</b>
                     <b className="price js-total-before-fee-cart-price" id="total-cart-price">
-                      {getTotalPrice()} đ
+                      {totalPrice} đ
                     </b>
                   </p>
                   <p className="price-total2 flex items-center justify-between">
                     <b className="txt">Thành tiền</b>
-                    <b className="price color-red js-total-cart-price font-bold">
+                    <b className="price color-red js-total-cart-price font-bold">{totalPrice} đ</b>
-                      {getTotalPrice()} đ
-                    </b>
                   </p>
                   <span className="has-vat">(Giá đã bao gồm VAT)</span>
                 </div>

src/components/Product/BoxFilter/index.tsx

@@ -83,7 +83,9 @@ const BoxFilter: React.FC<BoxFilterProps> = ({ filters }) => {
             {primaryBrandFilter && (
               <div
                 className={`item ${
-                  isFilterUrlActive(pathname, currentSearch, primaryBrandFilter.url) ? 'current' : ''
+                  isFilterUrlActive(pathname, currentSearch, primaryBrandFilter.url)
+                    ? 'current'
+                    : ''
                 }`}
               >
                 <div className="flex items-center">

src/features/Article/ArticleTopLeft/index.tsx

@@ -15,12 +15,10 @@ export const ArticleTopLeft = () => {
   return (
     <div className="flex gap-3">
       <div className="box-left">
-        {articles.slice(0, 1).map((item) => (
+        {articles[0] && <ItemArticle item={articles[0]} key={articles[0].id} />}
-          <ItemArticle item={item} key={item.id} />
-        ))}
       </div>
       <div className="box-right flex flex-1 flex-col gap-3">
-        {articles.slice(0, 4).map((item) => (
+        {articles.slice(1, 5).map((item) => (
           <ItemArticle item={item} key={item.id} />
         ))}
       </div>

src/features/Article/CategoryPage/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import Link from 'next/link';
-import Image from 'next/image';
 
 import type { TypeArticleCatePage } from '@/types/article/TypeArticleCatePage';
 
@@ -96,29 +95,7 @@ const ArticleCategoryPage: React.FC<CategoryPageProps> = ({ slug }) => {
               <p className="title-box-article font-bold">Tin nổi bật</p>
               <div className="list-article-global flex flex-col gap-2">
                 {articles.slice(0, 5).map((item) => (
-                  <div className="item-article flex gap-4" key={item.id}>
+                  <ItemArticle item={item} key={item.id} />
-                    <Link href={item.url} className="img-article boder-radius-10 relative">
-                      <Image
-                        className="boder-radius-10"
-                        src={item.image.original}
-                        fill
-                        alt={item.title}
-                      />
-
-                      <i className="sprite sprite-icon-play-video-detail icon-video-feature incon-play-youtube"></i>
-                      <i className="sprite sprite-play-youtube incon-play-youtube"></i>
-                    </Link>
-                    <div className="content-article content-article-item flex flex-1 flex-col">
-                      <Link href={item.url} className="title-article">
-                        <h3 className="line-clamp-2 font-[400]">{item.title}</h3>
-                      </Link>
-                      <p className="time-article flex items-center gap-2">
-                        <i className="sprite sprite-clock-item-article"></i>
-                        <span>{item.createDate}</span>
-                      </p>
-                      <p className="descreption-article line-clamp-2">{item.summary}</p>
-                    </div>
-                  </div>
                 ))}
               </div>
             </div>

src/features/Article/DetailPage/TocBox/index.tsx

@@ -11,9 +11,9 @@ type HeadingItem = {
 function convertToSlug(text: string) {
   return text
     .toLowerCase()
+    .replace(/đ/g, 'd') // phải xử lý trước NFD vì NFD sẽ phân rã đ thành ký tự khác
     .normalize('NFD')
     .replace(/[\u0300-\u036f]/g, '')
-    .replace(/đ/g, 'd')
     .replace(/[^\w ]+/g, '')
     .trim()
     .replace(/\s+/g, '-');

src/features/Article/DetailPage/index.tsx

@@ -57,7 +57,7 @@ const ArticleDetailPage: React.FC<DetailPageProps> = ({ slug }) => {
             <Link
               href={item.url}
               key={`${item.id}-${index}`}
-              className={`item-tab-article ${page.article_detail.categoryInfo[0].id === item.id ? 'active' : ''}`}
+              className={`item-tab-article ${page.article_detail.categoryInfo[0]?.id === item.id ? 'active' : ''}`}
             >
               <h2 className="title-cate-article font-[400]">{item.title}</h2>
             </Link>
@@ -75,7 +75,7 @@ const ArticleDetailPage: React.FC<DetailPageProps> = ({ slug }) => {
             </div>
           </div>
 
-          {page.article_other_same_category && (
+          {combinedList.length > 0 && (
             <div className="col-md-4">
               <div className="box-article-relay">
                 <p className="title-ar">

src/features/Article/HomeArticlePage/BoxArticleMid/index.tsx

@@ -2,7 +2,6 @@
 
 import ItemArticle from '@/components/Common/ItemArticle';
 import Link from 'next/link';
-import Image from 'next/image';
 import { getArticles } from '@/lib/api/article';
 import { useApiData } from '@/hooks/useApiData';
 import type { ListArticle } from '@/types/article/TypeListArticle';
@@ -35,29 +34,7 @@ export const BoxArticleMid = () => {
           <p className="title-box-article font-bold">Tin nổi bật</p>
           <div className="list-article-hot">
             {articles.slice(0, 5).map((item) => (
-              <div className="item-article flex gap-4" key={item.id}>
+              <ItemArticle item={item} key={item.id} />
-                <Link href={item.url} className="img-article boder-radius-10 relative">
-                  <Image
-                    className="boder-radius-10"
-                    src={item.image.original}
-                    fill
-                    alt={item.title}
-                  />
-
-                  <i className="sprite sprite-icon-play-video-detail icon-video-feature incon-play-youtube"></i>
-                  <i className="sprite sprite-play-youtube incon-play-youtube"></i>
-                </Link>
-                <div className="content-article content-article-item flex flex-1 flex-col">
-                  <Link href={item.url} className="title-article">
-                    <h3 className="line-clamp-2 font-[400]">{item.title}</h3>
-                  </Link>
-                  <p className="time-article flex items-center gap-2">
-                    <i className="sprite sprite-clock-item-article"></i>
-                    <span>{item.createDate}</span>
-                  </p>
-                  <p className="descreption-article line-clamp-2">{item.summary}</p>
-                </div>
-              </div>
             ))}
           </div>
         </div>

src/features/Article/HomeArticlePage/BoxArticleReview/index.tsx

@@ -29,11 +29,11 @@ export const BoxArticleReview = () => {
             slidesPerView={3}
             loop={true}
           >
-            {articles.map((item) => (
+            {articles.slice(0, 9).map((item) => (
               <SwiperSlide key={item.id}>
                 <div className="item-article">
                   <Link href={item.url} className="img-article">
-                    <Image src={item.image.original} fill alt={item.title} />
+                    <Image src={item.image.original} fill alt={item.title} sizes="(max-width: 768px) 100vw, 33vw" />
                   </Link>
                   <div className="content-article-item">
                     <Link href={item.url} className="title font-weight-500 line-clamp-2">

src/lib/api/article.ts

@@ -8,17 +8,23 @@ function normalizeSlug(slug: string) {
   return slug.replace(/^\/+/, '');
 }
 
-export function getArticles() {
+// Tạo hàm fetch có cache theo TTL — nhiều component gọi cùng lúc
-  return apiFetch<ListArticle>('/articles');
+// sẽ share 1 request thay vì gửi nhiều request trùng lặp.
+function makeCache<T>(fetcher: () => Promise<T>, ttl = 30_000) {
+  let cache: Promise<T> | null = null;
+  return () => {
+    if (!cache) {
+      cache = fetcher().finally(() => {
+        setTimeout(() => { cache = null; }, ttl);
+      });
+    }
+    return cache;
+  };
 }
 
-export function getArticleVideos() {
+export const getArticles = makeCache(() => apiFetch<ListArticle>('/articles'));
-  return apiFetch<ListArticle>('/articles/videos');
+export const getArticleVideos = makeCache(() => apiFetch<ListArticle>('/articles/videos'));
-}
+export const getArticleCategories = makeCache(() => apiFetch<TypeArticleCategory[]>('/articles/categories'));
-
-export function getArticleCategories() {
-  return apiFetch<TypeArticleCategory[]>('/articles/categories');
-}
 
 export function getArticleCategoryDetail(slug: string) {
   return apiFetch<TypeArticleCatePage>(`/articles/categories/${normalizeSlug(slug)}`);

src/lib/api/client.ts

@@ -23,7 +23,6 @@ export async function apiFetch<T>(
   try {
     const res = await fetch(`${API_URL}${path}`, {
       ...fetchOptions,
-      cache: 'no-store',
       signal: controller.signal,
     });