Files
nobat724_front/app/blog/[slug]/page.js
T
hamed 06a877a725 feat(metadata): enhance SEO by adding Open Graph and Twitter metadata across various pages
feat(blog): implement loading and error handling components for blog pages

feat(clinic): add loading and error handling components for clinic pages

feat(doctor): create loading and error handling components for doctor pages

feat(clinics): add loading component for clinics page

feat(specialties): improve metadata for specialties page with Open Graph and Twitter images

feat(layout): add structured data for Organization and WebSite in layout

fix(middleware): restrict middleware execution to specific routes to improve performance

chore(audit): add comprehensive SEO and performance audit documentation
2026-06-21 11:38:39 +03:30

125 lines
3.4 KiB
JavaScript

import { cache } from "react";
import BlogPage from "@/components/blog";
import Layout from "@/components/layout/StLayout";
import { fetchReq } from "@/lib/req";
import { getStateInfo } from "@/lib/getStateInfo";
import { normalizeBlog, imageUrl } from "@/helper";
const FALLBACK_IMG = "https://www.nobat724.com/assets/images/logo.png";
const API_URL = process.env.NEXT_PUBLIC_API_URL;
const getBlog = cache(async (slug) => {
try {
const res = await fetch(`${API_URL}/api/v1/blog/${slug}`, {
next: { revalidate: 3600, tags: [`blog-${slug}`] },
});
if (!res.ok) return null;
const json = await res.json();
return json?.data?.data ?? null;
} catch {
return null;
}
});
export async function generateMetadata({ params }) {
const { slug } = await params;
const { matchedCity } = await getStateInfo();
const siteName = matchedCity?.site_name || "نوبت 724";
try {
const blog = await getBlog(slug);
if (!blog) return {};
const title = `${blog.title} | ${siteName}`;
const rawText = (blog.summary || blog.body || "")
.replace(/<[^>]*>/g, "")
.trim();
const description = rawText.slice(0, 160) || blog.title;
const image = blog.image_url ? imageUrl(blog.image_url) : FALLBACK_IMG;
return {
title,
description,
openGraph: {
title,
description,
type: "article",
...(blog.created_at && {
publishedTime: new Date(blog.created_at * 1000).toISOString(),
}),
images: [image],
},
twitter: {
card: "summary_large_image",
title,
description,
images: [image],
},
};
} catch {
return {};
}
}
async function Blog({ params }) {
const { slug } = await params;
const blog = normalizeBlog(await getBlog(slug));
let relatedBlogs = [];
const relatedResponse = await fetchReq(
`${API_URL}/api/v1/blogs?page=1&limit=6`
);
relatedBlogs = (relatedResponse?.data || [])
.filter((b) => b.uuid !== blog?.uuid)
.slice(0, 4)
.map(normalizeBlog);
const jsonLd = blog
? {
"@context": "https://schema.org",
"@type": "Article",
headline: blog.title,
...(blog.images?.[0]?.url && { image: imageUrl(blog.images[0].url) }),
...(blog.created && {
datePublished: new Date(blog.created * 1000).toISOString(),
}),
...(blog.author && { author: { "@type": "Person", name: blog.author } }),
}
: null;
const breadcrumbJsonLd = blog
? {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
itemListElement: [
{ "@type": "ListItem", position: 1, name: "خانه", item: "https://www.nobat724.com" },
{ "@type": "ListItem", position: 2, name: "مقالات", item: "https://www.nobat724.com/blogs" },
{ "@type": "ListItem", position: 3, name: blog.title },
],
}
: null;
return (
<>
{jsonLd && (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
)}
{breadcrumbJsonLd && (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
/>
)}
<Layout>
<BlogPage blog={blog} blogs={relatedBlogs} />
</Layout>
</>
);
}
export default Blog;