ساخت فهرست و صفحه‌ی جزئیات نوشته‌ها

// lib/posts.ts
// لایه‌ی موقت داده برای آموزش؛ در محیط Production مناسب نیست.
// داده در حافظه‌ی برنامه است و هیچ‌چیز ذخیره نمی‌شود.
// در فصل «پایگاه داده با Prisma و SQLite» پیاده‌سازی با Prisma جایگزین می‌شود.

export type Post = {
  slug: string;
  title: string;
  excerpt: string;
  body: string;
  publishedAt: string; // تاریخ به‌صورت ISO، مثل 2026-10-01
};

const posts: Post[] = [
  {
    slug: "hello-nextjs",
    title: "سلام Next.js",
    excerpt: "اولین نوشته‌ی DevNotes درباره‌ی شروع کار با Next.js.",
    body: "Next.js یک فریم‌ورک فول‌استک مبتنی بر React است که مسیریابی و رندر روی سرور را در اختیار شما می‌گذارد.",
    publishedAt: "2026-10-01",
  },
  {
    slug: "app-router-intro",
    title: "آشنایی با App Router",
    excerpt: "نگاهی کوتاه به مسیریابی مبتنی بر پوشه‌ها.",
    body: "در App Router هر پوشه یک بخش از آدرس را می‌سازد و فایل page.tsx آن بخش را قابل دسترسی می‌کند.",
    publishedAt: "2026-10-05",
  },
  {
    slug: "server-components",
    title: "Server Componentها چه می‌کنند؟",
    excerpt: "چرا کامپوننت‌ها به‌صورت پیش‌فرض روی سرور اجرا می‌شوند؟",
    body: "Server Componentها روی سرور اجرا می‌شوند و کد کمتری به مرورگر می‌فرستند.",
    publishedAt: "2026-10-09",
  },
  {
    slug: "layouts-and-routing",
    title: "Layoutها و ساختار صفحه",
    excerpt: "هر Layout چگونه درون Layoutهای دیگر قرار می‌گیرد.",
    body: "Layoutها ساختار مشترک صفحات را نگه می‌دارند و هنگام ناوبری دوباره ساخته نمی‌شوند.",
    publishedAt: "2026-10-12",
  },
  {
    slug: "dynamic-routes",
    title: "مسیرهای پویا در Next.js",
    excerpt: "ساخت صفحه‌ی هر نوشته با یک فایل و پارامتر slug.",
    body: "با پوشه‌ی [slug] یک فایل صفحه برای هر مقدار آدرس کافی است و مقدار از params خوانده می‌شود.",
    publishedAt: "2026-10-15",
  },
  {
    slug: "search-params",
    title: "خواندن Query String با searchParams",
    excerpt: "جست‌وجو و صفحه‌بندی را در آدرس نگه دارید.",
    body: "حالت‌هایی مثل جست‌وجو و شماره‌ی صفحه بهتر است داخل Query String باشند تا قابل اشتراک‌گذاری بمانند.",
    publishedAt: "2026-10-18",
  },
  {
    slug: "client-components",
    title: "کِی به Client Component نیاز داریم؟",
    excerpt: "State، رویداد و APIهای مرورگر دلیل اصلی هستند.",
    body: "فقط وقتی به State، رویداد یا APIهای مرورگر نیاز دارید فایل را با use client به Client Component تبدیل کنید.",
    publishedAt: "2026-10-21",
  },
  {
    slug: "data-fetching-basics",
    title: "مقدمه‌ای بر دریافت داده",
    excerpt: "خواندن داده مستقیم داخل Server Component.",
    body: "کامپوننت‌های سروری می‌توانند async باشند و داده را مستقیماً با await بخوانند.",
    publishedAt: "2026-10-24",
  },
];

export const POSTS_PER_PAGE = 3;

export type PostsResult = {
  posts: Post[]; // نوشته‌های همین صفحه
  total: number; // تعداد کل نتایج (پیش از صفحه‌بندی)
  totalPages: number;
};

type GetPostsOptions = {
  q?: string;
  page?: number;
};

// جدیدترین نوشته‌ها اول
function sortedPosts(): Post[] {
  return [...posts].sort((a, b) => b.publishedAt.localeCompare(a.publishedAt));
}

export async function getAllPosts(): Promise<Post[]> {
  return sortedPosts();
}

export async function getPostBySlug(slug: string): Promise<Post | undefined> {
  return posts.find((post) => post.slug === slug);
}

export async function getPosts(
  { q = "", page = 1 }: GetPostsOptions = {},
): Promise<PostsResult> {
  const term = q.trim().toLocaleLowerCase();

  const filtered = term
    ? sortedPosts().filter(
        (post) =>
          post.title.toLocaleLowerCase().includes(term) ||
          post.excerpt.toLocaleLowerCase().includes(term),
      )
    : sortedPosts();

  const total = filtered.length;
  const totalPages = Math.ceil(total / POSTS_PER_PAGE);
  const start = (page - 1) * POSTS_PER_PAGE;

  return {
    posts: filtered.slice(start, start + POSTS_PER_PAGE),
    total,
    totalPages,
  };
}

// lib/format.ts
const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
  dateStyle: "long",
  timeZone: "UTC",
});

export function formatDate(iso: string): string {
  return dateFormatter.format(new Date(iso));
}

// app/(public)/posts/_components/PostCard.tsx
import Link from "next/link";
import type { Post } from "@/lib/posts";
import { formatDate } from "@/lib/format";

type PostCardProps = {
  post: Post;
};

export default function PostCard({ post }: PostCardProps) {
  return (
    <article>
      <h2>
        <Link href={`/posts/${post.slug}`}>{post.title}</Link>
      </h2>
      <p>{post.excerpt}</p>
      <time dateTime={post.publishedAt}>
        {formatDate(post.publishedAt)}
      </time>
    </article>
  );
}

// app/(public)/posts/_components/Pagination.tsx
import Link from "next/link";

type PaginationProps = {
  q: string;
  page: number;
  totalPages: number;
};

function buildHref(q: string, page: number): string {
  const search = new URLSearchParams();
  if (q) search.set("q", q);
  if (page > 1) search.set("page", String(page));
  const queryString = search.toString();
  return queryString ? `/posts?${queryString}` : "/posts";
}

export default function Pagination({ q, page, totalPages }: PaginationProps) {
  if (totalPages <= 1) {
    return null;
  }

  return (
    <nav aria-label="صفحه‌بندی">
      {page > 1 && (
        <Link href={buildHref(q, page - 1)} rel="prev">
          صفحه‌ی قبل
        </Link>
      )}{" "}
      <span>
        صفحه‌ی {page} از {totalPages}
      </span>{" "}
      {page < totalPages && (
        <Link href={buildHref(q, page + 1)} rel="next">
          صفحه‌ی بعد
        </Link>
      )}
    </nav>
  );
}

// app/(public)/posts/page.tsx
import { notFound } from "next/navigation";
import SearchBox from "@/components/SearchBox";
import { getPosts } from "@/lib/posts";
import PostsIntro from "./_components/PostsIntro";
import PostCard from "./_components/PostCard";
import Pagination from "./_components/Pagination";

type PostsPageProps = {
  searchParams: Promise<{
    [key: string]: string | string[] | undefined;
  }>;
};

function first(value: string | string[] | undefined): string | undefined {
  return Array.isArray(value) ? value[0] : value;
}

export default async function PostsPage({ searchParams }: PostsPageProps) {
  const params = await searchParams;

  const q = first(params.q)?.trim() ?? "";

  const rawPage = Number(first(params.page));
  const page = Number.isInteger(rawPage) && rawPage >= 1 ? rawPage : 1;

  const { posts, total, totalPages } = await getPosts({ q, page });

  // صفحه‌ای بیرون از محدوده‌ی نتایج وجود ندارد.
  if (page > Math.max(totalPages, 1)) {
    notFound();
  }

  return (
    <main>
      <h1>نوشته‌ها</h1>
      <PostsIntro />

      <SearchBox key={q} defaultValue={q} />

      <p>
        {q
          ? `${total} نتیجه برای «${q}»`
          : `${total} نوشته`}
      </p>

      {posts.length === 0 ? (
        <p>نوشته‌ای با این مشخصات پیدا نشد.</p>
      ) : (
        <div>
          {posts.map((post) => (
            <PostCard key={post.slug} post={post} />
          ))}
        </div>
      )}

      <Pagination q={q} page={page} totalPages={totalPages} />
    </main>
  );
}

// app/(public)/posts/[slug]/page.tsx
import Link from "next/link";
import { notFound } from "next/navigation";
import BackButton from "@/components/BackButton";
import { formatDate } from "@/lib/format";
import { getAllPosts, getPostBySlug } from "@/lib/posts";

type PostPageProps = {
  params: Promise<{ slug: string }>;
};

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function PostPage({ params }: PostPageProps) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  if (!post) {
    notFound();
  }

  return (
    <main>
      <BackButton />
      <article>
        <h1>{post.title}</h1>
        <p>
          <time dateTime={post.publishedAt}>
            {formatDate(post.publishedAt)}
          </time>
        </p>
        <p>{post.body}</p>
      </article>
      <p>
        <Link href="/posts">همه‌ی نوشته‌ها</Link>
      </p>
    </main>
  );
}

devnotes/
├── lib/
│   ├── posts.ts                        ← داده‌ی نمونه، getAllPosts، getPostBySlug، getPosts
│   └── format.ts                       ← قالب‌بندی تاریخ فارسی (جدید)
├── components/
│   ├── NavLink.tsx
│   ├── SearchBox.tsx
│   ├── BackButton.tsx
│   ├── SiteHeader.tsx
│   └── SiteFooter.tsx
└── app/
    └── (public)/
        └── posts/
            ├── page.tsx                ← فهرست با جست‌وجو و صفحه‌بندی
            ├── not-found.tsx
            ├── _components/
            │   ├── PostsIntro.tsx
            │   ├── PostCard.tsx        ← جدید
            │   └── Pagination.tsx      ← جدید
            └── [slug]/
                └── page.tsx            ← جزئیات نوشته