// posts collection 中的一筆
{
  id: "abc123",
  title: "我的食譜筆記",
  category: "food",          // ⭐ 用欄位分類
  tags: ["dessert", "asian"],
  authorId: "user-uuid",
  content: [...],
  createdAt: serverTimestamp(),
}

// 查特定類別 + 最新
import { collection, query, where, orderBy, limit, getDocs } from 'firebase/firestore';

const q = query(
  collection(db, 'posts'),
  where('category', '==', 'food'),
  orderBy('createdAt', 'desc'),
  limit(10)
);
const snapshot = await getDocs(q);

{
  title: "My Blog Article",
  author: "John Doe",
  category: "cooking",
  content: [
    { type: "p", text: "段落內容..." },
    { type: "h1", text: "章節標題" },
    { type: "img", src: "https://...", alt: "說明" },
    { type: "p", text: "另一段..." }
  ],
  cover: "https://..."
}

{
  title: "...",
  body: "# 標題\n\n段落...\n\n## 子標題\n..."
}

import { addDoc, collection, serverTimestamp } from 'firebase/firestore';
import { db } from '../../lib/init-firebase';

const article = {
  title: "Example Article",
  author: "John Doe",
  category: "tech",
  body: "...",
  createdAt: serverTimestamp(),    // ⭐ 用 server 時間,不用 client 時間
};

async function uploadArticle(article: typeof article) {
  try {
    const docRef = await addDoc(collection(db, 'posts'), article);
    console.log('Document written with ID:', docRef.id);
    return docRef.id;
  } catch (error) {
    console.error('Error adding document:', error);
    throw error;
  }
}

import MarkdownIt from 'markdown-it';
import { addDoc, collection, serverTimestamp } from 'firebase/firestore';

const md = new MarkdownIt();

const markdownText = `
# Example Article

This is an example.

## Subsection
`;

const htmlBody = md.render(markdownText);

await addDoc(collection(db, 'posts'), {
  title: 'Example',
  body: htmlBody,
  rawMarkdown: markdownText,    // ⭐ 也存原始 md,以後可重新 render
  createdAt: serverTimestamp(),
});

import { query, orderBy, limit, startAfter, getDocs, DocumentSnapshot } from 'firebase/firestore';

let lastDoc: DocumentSnapshot | null = null;
const PAGE_SIZE = 10;

async function loadNextPage() {
  let q = query(
    collection(db, 'posts'),
    orderBy('createdAt', 'desc'),
    limit(PAGE_SIZE)
  );

  if (lastDoc) {
    q = query(q, startAfter(lastDoc));
  }

  const snap = await getDocs(q);
  lastDoc = snap.docs[snap.docs.length - 1];

  return snap.docs.map((d) => ({ id: d.id, ...d.data() }));
}

// 在 page N 顯示時,啟動 N+1 prefetch
useEffect(() => {
  if (currentPage === N) {
    prefetchPage(N + 1).then(setNextPageCache);
  }
}, [currentPage]);

// ❌ 撈完整 doc(包含巨大的 body)
const snap = await getDocs(query(collection(db, 'posts')));

// ✅ Firestore 不像 SQL 有 SELECT,但可以拆 collection
// 主 collection 只放 metadata,body 另存
{
  posts: { id, title, excerpt, category, createdAt },     // 列表用
  posts_content: { postId → body, html, raw },            // 詳情頁才查
}

npm install redux-persist

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { configureStore } from '@reduxjs/toolkit';

const persistConfig = { key: 'root', storage };
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({ reducer: persistedReducer });
export const persistor = persistStore(store);

// App.tsx
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

<Provider store={store}>
  <PersistGate persistor={persistor}>
    <App />
  </PersistGate>
</Provider>

import { useQuery } from '@tanstack/react-query';

const { data: posts } = useQuery({
  queryKey: ['posts', { category: 'food' }],
  queryFn: () => fetchPosts('food'),
  staleTime: 5 * 60_000,           // 5 分鐘內視為新鮮,不重 fetch
  gcTime: 30 * 60_000,             // 30 分鐘後才從 cache 移除
});

SSG(Static Site Generation)
- 適合:部落格、文件、商品介紹(內容變化頻率低)
- 優:首屏快、SEO 滿分、零 server 成本
- 劣:每次更新內容要重 build

SSR(Server-Side Rendering)
- 適合:dashboard、個人化頁面
- 優:資料即時、SEO OK
- 劣:server 負擔、響應較慢

CSR(Client-Side Rendering)
- 適合:後台工具、社群網站
- 優:互動性最強
- 劣:首屏慢、SEO 弱

// app/posts/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getAllPosts();   // 從 Firestore 撈
  return posts.map((p) => ({ slug: p.slug }));
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  return <article>...</article>;
}

// posts collection
{
  slug: "react-hooks-deep-dive",         // 唯一 URL slug
  title: "React Hooks 深入",
  excerpt: "前 200 字摘要,給列表用",
  category: "tech",
  tags: ["react", "frontend"],
  authorId: "bobo-uuid",
  coverImageUrl: "...",
  rawMarkdown: "# Title\n\n...",
  htmlBody: "<h1>Title</h1>...",
  publishedAt: <timestamp>,
  updatedAt: <timestamp>,
  viewCount: 0,
  isPublished: true,
}

// users collection
{
  uid: "bobo-uuid",
  displayName: "Bobo",
  avatarUrl: "...",
  bio: "...",
}

// comments collection(scoped by post)
{
  postSlug: "react-hooks-deep-dive",
  authorId: "user-uuid",
  body: "...",
  createdAt: <timestamp>,
}