Use Meshkee {id}/{fa-slug} detail URLs for products and blogs.

Resolve pages via by-id APIs, slugify Farsi titles for public paths, and redirect legacy slug-only URLs to the canonical form. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-22 23:52:45 +03:30
parent 24b5649abd
commit 0cb9aa57e2
14 changed files with 426 additions and 307 deletions
@@ -36,7 +36,7 @@ export async function GET(request: Request) {

    return Response.json({
      items: (catalogData.items ?? []).map((item) => ({
-        id: item.slug || item.id,
+        id: item.id,
        productId: item.id,
        productNameFa: item.nameFa,
        productTitle: item.title,
@@ -0,0 +1,99 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { Container } from "@/components/Container";
+import { PageHero } from "@/components/layout/PageHero";
+import { ProductTabs } from "@/components/product/ProductTabs";
+import { Placeholder } from "@/components/Placeholder";
+import { blogHref, blogImage, blogTitleSlug, fetchBlogById } from "@/lib/blog";
+import { fetchComments } from "@/lib/comments";
+import { getBlogPost } from "@/lib/data";
+import { formatFaDate } from "@/lib/format";
+
+export const revalidate = 60;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string; slug: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const apiPost = await fetchBlogById(id);
+  if (apiPost) return { title: apiPost.title, description: apiPost.abstract ?? undefined };
+  const local = getBlogPost(id);
+  if (!local) return { title: "مقاله" };
+  return { title: local.title, description: local.excerpt };
+}
+
+export default async function BlogPostPage({
+  params,
+}: {
+  params: Promise<{ id: string; slug: string }>;
+}) {
+  const { id, slug } = await params;
+  const apiPost = await fetchBlogById(id);
+
+  if (apiPost) {
+    const canonical = blogTitleSlug(apiPost.title);
+    if (decodeURIComponent(slug) !== canonical) {
+      redirect(blogHref(apiPost));
+    }
+
+    const comments = await fetchComments("blog", apiPost.id);
+    return (
+      <>
+        <PageHero kicker="Blog" title={apiPost.title} image={blogImage(apiPost)} />
+        <section className="py-16 sm:py-24">
+          <Container className="max-w-3xl">
+            <p className="text-[13px] text-muted">
+              {formatFaDate(apiPost.publishedAt || apiPost.createdAt)}
+            </p>
+            {apiPost.abstract ? <p className="mt-6 text-[16px] leading-9 text-muted">{apiPost.abstract}</p> : null}
+            {apiPost.mainTextHtml ? (
+              <div
+                className="rich-text mt-8 text-[16px] leading-9 text-muted"
+                dangerouslySetInnerHTML={{ __html: apiPost.mainTextHtml }}
+              />
+            ) : null}
+            <ProductTabs showDescription={false} comments={comments} />
+            <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
+              بازگشت به مقالات
+              <span className="h-px w-10 bg-brand" />
+            </Link>
+          </Container>
+        </section>
+      </>
+    );
+  }
+
+  const post = getBlogPost(id);
+  if (!post) notFound();
+
+  const canonical = blogTitleSlug(post.title);
+  if (decodeURIComponent(slug) !== canonical) {
+    redirect(blogHref({ id: post.slug, title: post.title }));
+  }
+
+  return (
+    <>
+      <PageHero kicker="Blog" title={post.title} image={post.image} />
+      <section className="py-16 sm:py-24">
+        <Container className="max-w-3xl">
+          <p className="text-[13px] text-muted">{post.date}</p>
+          <div className="mt-8 space-y-5 text-[16px] leading-9 text-muted">
+            {post.body.map((paragraph) => (
+              <p key={paragraph}>{paragraph}</p>
+            ))}
+          </div>
+          <div className="mt-8 overflow-hidden rounded-2xl">
+            <Placeholder src={post.image} alt={post.title} className="aspect-[16/9] w-full object-cover" />
+          </div>
+          <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
+            بازگشت به مقالات
+            <span className="h-px w-10 bg-brand" />
+          </Link>
+        </Container>
+      </section>
+    </>
+  );
+}
@@ -1,89 +1,22 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { Container } from "@/components/Container";
-import { PageHero } from "@/components/layout/PageHero";
-import { ProductTabs } from "@/components/product/ProductTabs";
-import { Placeholder } from "@/components/Placeholder";
-import { blogImage, fetchBlog } from "@/lib/blog";
-import { fetchComments } from "@/lib/comments";
+import { notFound, redirect } from "next/navigation";
+import { blogHref, fetchBlogBySlug } from "@/lib/blog";
 import { getBlogPost } from "@/lib/data";
-import { formatFaDate } from "@/lib/format";

 export const revalidate = 60;

-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}): Promise<Metadata> {
-  const { slug } = await params;
-  const apiPost = await fetchBlog(slug);
-  if (apiPost) return { title: apiPost.title, description: apiPost.abstract ?? undefined };
-  const local = getBlogPost(slug);
-  if (!local) return { title: "مقاله" };
-  return { title: local.title, description: local.excerpt };
-}
-
-export default async function BlogPostPage({
+/** Legacy `/blog/{slug}` → canonical `/blog/{id}/{titleSlug}`. */
+export default async function LegacyBlogRedirect({
  params,
 }: {
  params: Promise<{ slug: string }>;
 }) {
  const { slug } = await params;
-  const apiPost = await fetchBlog(slug);

-  if (apiPost) {
-    const comments = await fetchComments("blog", apiPost.id);
-    return (
-      <>
-        <PageHero kicker="Blog" title={apiPost.title} image={blogImage(apiPost)} />
-        <section className="py-16 sm:py-24">
-          <Container className="max-w-3xl">
-            <p className="text-[13px] text-muted">
-              {formatFaDate(apiPost.publishedAt || apiPost.createdAt)}
-            </p>
-            {apiPost.abstract ? <p className="mt-6 text-[16px] leading-9 text-muted">{apiPost.abstract}</p> : null}
-            {apiPost.mainTextHtml ? (
-              <div
-                className="rich-text mt-8 text-[16px] leading-9 text-muted"
-                dangerouslySetInnerHTML={{ __html: apiPost.mainTextHtml }}
-              />
-            ) : null}
-            <ProductTabs showDescription={false} comments={comments} />
-            <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
-              بازگشت به مقالات
-              <span className="h-px w-10 bg-brand" />
-            </Link>
-          </Container>
-        </section>
-      </>
-    );
-  }
+  const apiPost = await fetchBlogBySlug(slug);
+  if (apiPost) redirect(blogHref(apiPost));

-  const post = getBlogPost(slug);
-  if (!post) notFound();
+  const local = getBlogPost(slug);
+  if (local) redirect(blogHref({ id: local.slug, title: local.title }));

-  return (
-    <>
-      <PageHero kicker="Blog" title={post.title} image={post.image} />
-      <section className="py-16 sm:py-24">
-        <Container className="max-w-3xl">
-          <p className="text-[13px] text-muted">{post.date}</p>
-          <div className="mt-8 space-y-5 text-[16px] leading-9 text-muted">
-            {post.body.map((paragraph) => (
-              <p key={paragraph}>{paragraph}</p>
-            ))}
-          </div>
-          <div className="mt-8 overflow-hidden rounded-2xl">
-            <Placeholder src={post.image} alt={post.title} className="aspect-[16/9] w-full object-cover" />
-          </div>
-          <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
-            بازگشت به مقالات
-            <span className="h-px w-10 bg-brand" />
-          </Link>
-        </Container>
-      </section>
-    </>
-  );
+  notFound();
 }
@@ -80,7 +80,7 @@ export default async function BlogPage({
              {blogPosts.map((post) => (
                <Link
                  key={post.slug}
-                  href={`/blog/${post.slug}`}
+                  href={blogHref({ id: post.slug, title: post.title })}
                  className="group block rounded-2xl border border-line bg-white p-3"
                >
                  <div className="overflow-hidden rounded-xl">
@@ -0,0 +1,183 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { Container } from "@/components/Container";
+import { ProductGallery } from "@/components/product/ProductGallery";
+import { ProductTabs } from "@/components/product/ProductTabs";
+import { fetchComments } from "@/lib/comments";
+import { formatPrice } from "@/lib/format";
+import {
+  brandName,
+  catalogTitle,
+  fetchCatalogProductById,
+  fetchStoreItemByProduct,
+  galleryUrls,
+  productHref,
+  productNameSlug,
+  variantTitle,
+  type CatalogProduct,
+  type StoreVariant,
+} from "@/lib/store";
+
+export const revalidate = 60;
+
+async function resolveProduct(id: string): Promise<{
+  variant: StoreVariant | null;
+  catalog: CatalogProduct | null;
+  productId?: string;
+}> {
+  const catalog = await fetchCatalogProductById(id);
+  if (catalog) {
+    const store = await fetchStoreItemByProduct(String(catalog.id));
+    const firstVariant = store.storeItem?.variants?.[0] ?? null;
+    return {
+      variant: firstVariant,
+      catalog,
+      productId: String(catalog.id),
+    };
+  }
+
+  const store = await fetchStoreItemByProduct(id);
+  const firstVariant = store.storeItem?.variants?.[0];
+  if (firstVariant) {
+    const linked = await fetchCatalogProductById(id);
+    return {
+      variant: { ...firstVariant, productId: id },
+      catalog: linked,
+      productId: id,
+    };
+  }
+
+  return { variant: null, catalog: null };
+}
+
+function stripHtml(html?: string | null) {
+  if (!html?.trim()) return undefined;
+  const text = html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  return text.slice(0, 180) || undefined;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string; slug: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const resolved = await resolveProduct(id);
+  const title =
+    (resolved.catalog ? catalogTitle(resolved.catalog) : null) ||
+    (resolved.variant ? variantTitle(resolved.variant) : null);
+  const description =
+    resolved.catalog?.summary?.trim() ||
+    stripHtml(resolved.catalog?.descriptionHtml) ||
+    undefined;
+  return {
+    title: title || "محصول",
+    description,
+  };
+}
+
+export default async function ProductDetailsPage({
+  params,
+}: {
+  params: Promise<{ id: string; slug: string }>;
+}) {
+  const { id, slug } = await params;
+  const { variant, catalog, productId } = await resolveProduct(id);
+  if (!variant && !catalog) notFound();
+
+  const title =
+    (catalog ? catalogTitle(catalog) : null) || (variant ? variantTitle(variant) : "محصول");
+  const canonicalSlug = productNameSlug(title);
+  if (decodeURIComponent(slug) !== canonicalSlug) {
+    redirect(productHref(productId || id, title));
+  }
+
+  const comments = productId ? await fetchComments("product", productId) : [];
+  const sibling = productId ? await fetchStoreItemByProduct(productId) : { storeItem: undefined };
+
+  const images = galleryUrls(catalog, variant?.productImage || catalog?.image || catalog?.thumbnailUrl);
+  const price = variant?.discountedPrice ?? variant?.price ?? catalog?.store?.minPrice ?? null;
+  const oldPrice = variant?.discountedPrice != null ? variant.price : null;
+  const brand = brandName(catalog);
+  const variants = sibling.storeItem?.variants ?? [];
+  const inStock =
+    variant != null
+      ? variant.stockQuantity == null || variant.stockQuantity > 0
+      : catalog?.store?.inStock !== false;
+
+  return (
+    <section className="py-10 sm:py-14">
+      <Container>
+        <p className="text-[13px] text-muted">
+          <Link href="/" className="hover:text-brand">
+            خانه
+          </Link>
+          <span className="mx-2">/</span>
+          <Link href="/products" className="hover:text-brand">
+            محصولات
+          </Link>
+          <span className="mx-2">/</span>
+          {title}
+        </p>
+
+        <div className="mt-5 grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
+          <ProductGallery images={images} alt={title} />
+          <div>
+            {brand ? <p className="text-[13px] font-medium text-brand">{brand}</p> : null}
+            {catalog?.categoryNameFa ? (
+              <p className="mt-1 text-[12px] text-muted">{catalog.categoryNameFa}</p>
+            ) : null}
+            <h1 className="mt-2 text-[22px] font-extrabold leading-9 text-ink">{title}</h1>
+            {variant?.label && variant.label !== title ? (
+              <p className="mt-2 text-[13px] text-muted">{variant.label}</p>
+            ) : null}
+
+            <div className="mt-5 flex items-end gap-3">
+              {oldPrice ? <p className="text-[13px] text-muted line-through">{formatPrice(oldPrice)} تومان</p> : null}
+              <p className="text-[22px] font-bold text-ink">
+                {price != null ? (
+                  <>
+                    {formatPrice(price)}
+                    <span className="mr-1 text-[13px] font-medium text-muted">تومان</span>
+                  </>
+                ) : (
+                  <span className="text-[16px] font-medium text-muted">برای قیمت تماس بگیرید</span>
+                )}
+              </p>
+            </div>
+            <p className={`mt-2 text-[13px] ${inStock ? "text-emerald-600" : "text-brand"}`}>
+              {inStock ? "موجود در فروشگاه" : "ناموجود"}
+            </p>
+
+            {variants.length > 1 ? (
+              <div className="mt-5 flex flex-wrap gap-2">
+                {variants.map((item) => (
+                  <Link
+                    key={item.id}
+                    href={productHref(productId || id, variantTitle(item))}
+                    className={`rounded-lg border px-3 py-1.5 text-[12px] ${item.id === variant?.id ? "border-brand bg-paper text-ink" : "border-line bg-white text-muted"}`}
+                  >
+                    {item.label || variantTitle(item)}
+                  </Link>
+                ))}
+              </div>
+            ) : null}
+
+            <Link
+              href="/contact"
+              className="mt-6 inline-flex h-12 items-center justify-center rounded-xl bg-brand px-6 text-[14px] font-bold text-white hover:bg-brand-dark"
+            >
+              استعلام و سفارش
+            </Link>
+          </div>
+        </div>
+
+        <ProductTabs descriptionHtml={catalog?.descriptionHtml || catalog?.summary} comments={comments} />
+      </Container>
+    </section>
+  );
+}
@@ -1,185 +1,26 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { Container } from "@/components/Container";
-import { ProductGallery } from "@/components/product/ProductGallery";
-import { ProductTabs } from "@/components/product/ProductTabs";
-import { fetchComments } from "@/lib/comments";
-import { formatPrice } from "@/lib/format";
+import { notFound, redirect } from "next/navigation";
 import {
-  brandName,
+  catalogTitle,
+  fetchCatalogProductById,
  fetchCatalogProductBySlug,
-  fetchCatalogProductByTitle,
-  fetchStoreItemByProduct,
-  fetchStoreVariant,
-  galleryUrls,
-  variantTitle,
-  type CatalogProduct,
-  type StoreVariant,
+  productHref,
 } from "@/lib/store";

 export const revalidate = 60;

-async function resolveProduct(id: string): Promise<{
-  variant: StoreVariant | null;
-  catalog: CatalogProduct | null;
-  productId?: string;
-}> {
-  const variant = await fetchStoreVariant(id);
-  if (variant) {
-    const catalog = await fetchCatalogProductByTitle(
-      variant.productNameFa || variant.productTitle,
-      variant.productId,
-    );
-    return { variant, catalog, productId: variant.productId };
-  }
-
-  const bySlug = await fetchCatalogProductBySlug(id);
-  if (bySlug) {
-    return { variant: null, catalog: bySlug, productId: bySlug.id };
-  }
-
-  const byProduct = await fetchStoreItemByProduct(id);
-  const firstVariant = byProduct.storeItem?.variants?.[0];
-  if (firstVariant) {
-    const catalog = await fetchCatalogProductByTitle(
-      firstVariant.productNameFa || firstVariant.productTitle,
-      id,
-    );
-    return {
-      variant: {
-        ...firstVariant,
-        productId: id,
-      },
-      catalog,
-      productId: id,
-    };
-  }
-
-  return { variant: null, catalog: null };
-}
-
-export async function generateMetadata({
+/** Legacy `/products/{id-or-slug}` → canonical `/products/{id}/{nameFaSlug}`. */
+export default async function LegacyProductRedirect({
  params,
 }: {
  params: Promise<{ id: string }>;
-}): Promise<Metadata> {
+}) {
  const { id } = await params;
-  const resolved = await resolveProduct(id);
-  const title =
-    resolved.catalog?.nameFa ||
-    resolved.catalog?.title ||
-    (resolved.variant ? variantTitle(resolved.variant) : null);
-  const description =
-    resolved.catalog?.summary?.trim() ||
-    stripHtml(resolved.catalog?.descriptionHtml) ||
-    undefined;
-  return {
-    title: title || "محصول",
-    description,
-  };
-}

-function stripHtml(html?: string | null) {
-  if (!html?.trim()) return undefined;
-  const text = html
-    .replace(/<[^>]+>/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
-  return text.slice(0, 180) || undefined;
-}
+  const byId = await fetchCatalogProductById(id);
+  if (byId) redirect(productHref(byId));

-export default async function ProductDetailsPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id } = await params;
-  const { variant, catalog, productId } = await resolveProduct(id);
-  if (!variant && !catalog) notFound();
+  const bySlug = await fetchCatalogProductBySlug(id);
+  if (bySlug) redirect(productHref(bySlug));

-  const comments = productId ? await fetchComments("product", productId) : [];
-  const sibling =
-    productId && variant
-      ? await fetchStoreItemByProduct(productId)
-      : { storeItem: undefined };
-
-  const images = galleryUrls(catalog, variant?.productImage || catalog?.image || catalog?.thumbnailUrl);
-  const price = variant?.discountedPrice ?? variant?.price ?? catalog?.store?.minPrice ?? null;
-  const oldPrice = variant?.discountedPrice != null ? variant.price : null;
-  const title = catalog?.nameFa || catalog?.title || (variant ? variantTitle(variant) : "محصول");
-  const brand = brandName(catalog);
-  const variants = sibling.storeItem?.variants ?? [];
-  const inStock =
-    variant != null
-      ? variant.stockQuantity == null || variant.stockQuantity > 0
-      : catalog?.store?.inStock !== false;
-
-  return (
-    <section className="py-10 sm:py-14">
-      <Container>
-        <p className="text-[13px] text-muted">
-          <Link href="/" className="hover:text-brand">
-            خانه
-          </Link>
-          <span className="mx-2">/</span>
-          <Link href="/products" className="hover:text-brand">
-            محصولات
-          </Link>
-          <span className="mx-2">/</span>
-          {title}
-        </p>
-
-        <div className="mt-5 grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
-          <ProductGallery images={images} alt={title} />
-          <div>
-            {brand ? <p className="text-[13px] font-medium text-brand">{brand}</p> : null}
-            {catalog?.categoryNameFa ? (
-              <p className="mt-1 text-[12px] text-muted">{catalog.categoryNameFa}</p>
-            ) : null}
-            <h1 className="mt-2 text-[22px] font-extrabold leading-9 text-ink">{title}</h1>
-            {variant?.label && variant.label !== title ? (
-              <p className="mt-2 text-[13px] text-muted">{variant.label}</p>
-            ) : null}
-
-            <div className="mt-5 flex items-end gap-3">
-              {oldPrice ? <p className="text-[13px] text-muted line-through">{formatPrice(oldPrice)} تومان</p> : null}
-              <p className="text-[22px] font-bold text-ink">
-                {price != null ? (
-                  <>
-                    {formatPrice(price)}
-                    <span className="mr-1 text-[13px] font-medium text-muted">تومان</span>
-                  </>
-                ) : (
-                  <span className="text-[16px] font-medium text-muted">برای قیمت تماس بگیرید</span>
-                )}
-              </p>
-            </div>
-            <p className={`mt-2 text-[13px] ${inStock ? "text-emerald-600" : "text-brand"}`}>
-              {inStock ? "موجود در فروشگاه" : "ناموجود"}
-            </p>
-
-            {variants.length > 1 ? (
-              <div className="mt-5 flex flex-wrap gap-2">
-                {variants.map((item) => (
-                  <Link
-                    key={item.id}
-                    href={`/products/${encodeURIComponent(item.id)}`}
-                    className={`rounded-lg border px-3 py-1.5 text-[12px] ${item.id === variant?.id ? "border-brand bg-paper text-ink" : "border-line bg-white text-muted"}`}
-                  >
-                    {item.label || variantTitle(item)}
-                  </Link>
-                ))}
-              </div>
-            ) : null}
-
-            <Link
-              href="/contact"
-              className="mt-6 inline-flex h-12 items-center justify-center rounded-xl bg-brand px-6 text-[14px] font-bold text-white hover:bg-brand-dark"
-            >
-              استعلام و سفارش
-            </Link>
-          </div>
-        </div>
-
-        <ProductTabs descriptionHtml={catalog?.descriptionHtml || catalog?.summary} comments={comments} />
-      </Container>
-    </section>
-  );
+  notFound();
 }