Proyek Akhir Fase 4

npm view next version                 # cek versi terbaru (saat ditulis: 16.4.3)
npx create-next-app@latest blog --js --app --eslint --tailwind --no-src-dir --import-alias "@/*" --use-npm --yes
cd blog
npm install drizzle-orm @libsql/client zod jose server-only
npm install -D drizzle-kit vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom @playwright/test

printf 'SESSION_SECRET=%s\nADMIN_PASSWORD=rahasia-belajar-123\nREVALIDATE_SECRET=%s\nNEXT_PUBLIC_SITE_URL=http://localhost:3000\n' \
  "$(openssl rand -base64 32)" "$(openssl rand -hex 16)" > .env.local

blog/
├── app/
│   ├── actions/
│   │   ├── auth.js          # login, logout
│   │   └── posts.js         # createPost, updatePost, deletePost, togglePublish
│   ├── admin/
│   │   ├── [id]/edit/page.js
│   │   ├── new/page.js
│   │   └── page.js          # dashboard
│   ├── api/
│   │   ├── posts/[slug]/route.js
│   │   ├── posts/route.js
│   │   └── revalidate/route.js
│   ├── blog/[slug]/page.js
│   ├── login/
│   │   ├── LoginForm.jsx
│   │   └── page.js
│   ├── globals.css
│   ├── layout.js
│   ├── page.js
│   ├── robots.js
│   └── sitemap.js
├── components/  PostForm.jsx  PostRows.jsx  SubmitButton.jsx
├── db/schema.js
├── lib/  dal.js  db.js  session.js  slugify.js
├── scripts/seed.mjs
├── __tests__/  slugify.test.js  SubmitButton.test.jsx
├── e2e/blog.spec.mjs
├── proxy.js
├── drizzle.config.js  vitest.config.mjs  playwright.config.mjs  next.config.mjs
└── .env.local           # TIDAK di-commit

// lib/slugify.js, fungsi murni, mudah dites
export function slugify(text) {
  return text
    .toLowerCase()
    .normalize('NFD')
    .replace(/[̀-ͯ]/g, '') // buang aksen: é → e
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')
}

// lib/dal.js, satu-satunya pintu ke data
import 'server-only'
import { cache } from 'react'
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
import { cacheLife, cacheTag } from 'next/cache'
import { eq, desc, and } from 'drizzle-orm'
import { db } from '@/lib/db'
import { posts } from '@/db/schema'
import { decrypt } from '@/lib/session'

// ---------- Autentikasi ----------
export const verifyAdmin = cache(async () => {
  const token = (await cookies()).get('session')?.value
  const session = await decrypt(token)
  if (session?.role !== 'admin') redirect('/login')
  return { role: 'admin' }
})

// ---------- Data publik (di-cache, ikut static shell) ----------
export async function getPublishedPosts() {
  'use cache'
  cacheLife('hours')
  cacheTag('posts')
  return db
    .select({ slug: posts.slug, title: posts.title, excerpt: posts.excerpt, createdAt: posts.createdAt })
    .from(posts)
    .where(eq(posts.published, true))
    .orderBy(desc(posts.createdAt))
}

export async function getPublishedPost(slug) {
  'use cache'
  cacheLife('hours')
  cacheTag('posts', `post-${slug}`)
  const rows = await db
    .select()
    .from(posts)
    .where(and(eq(posts.slug, slug), eq(posts.published, true)))
    .limit(1)
  return rows[0] ?? null
}

// ---------- Data admin (selalu segar, wajib login) ----------
export async function getAllPostsForAdmin() {
  await verifyAdmin()
  return db
    .select({ id: posts.id, title: posts.title, slug: posts.slug, published: posts.published })
    .from(posts)
    .orderBy(desc(posts.createdAt))
}

export async function getPostById(id) {
  await verifyAdmin()
  const rows = await db.select().from(posts).where(eq(posts.id, id)).limit(1)
  return rows[0] ?? null
}

// app/actions/posts.js, bagian setelah createPost (lihat Modul 2 untuk awal file)
export async function updatePost(id, prevState, formData) {
  await verifyAdmin()
  const values = readForm(formData)
  const parsed = PostSchema.safeParse(values)
  if (!parsed.success) {
    return { errors: z.flattenError(parsed.error).fieldErrors, values }
  }
  const [row] = await db
    .update(posts)
    .set(parsed.data)
    .where(eq(posts.id, id))
    .returning({ slug: posts.slug })
  updateTag('posts')
  if (row) updateTag(`post-${row.slug}`)
  redirect('/admin')
}

export async function deletePost(id) {
  await verifyAdmin()
  await db.delete(posts).where(eq(posts.id, id))
  updateTag('posts')
}

export async function togglePublish(id, published) {
  await verifyAdmin()
  const [row] = await db
    .update(posts)
    .set({ published })
    .where(eq(posts.id, id))
    .returning({ slug: posts.slug })
  updateTag('posts')
  if (row) updateTag(`post-${row.slug}`)
}
// Jangan lupa: import { eq } from 'drizzle-orm' di atas file.

// app/layout.js
import Link from 'next/link'
import './globals.css'

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000'

export const metadata = {
  metadataBase: new URL(siteUrl), // URL relatif di metadata jadi absolut
  title: { default: 'Blog Kodingup', template: '%s | Blog Kodingup' },
  description: 'Catatan belajar coding full-stack dengan Next.js.',
  openGraph: { type: 'website', siteName: 'Blog Kodingup' },
}

export default function RootLayout({ children }) {
  return (
    <html lang="id">
      <body className="mx-auto flex min-h-screen max-w-2xl flex-col gap-8 p-6">
        <header className="flex justify-between">
          <Link href="/" className="font-bold">Blog Kodingup</Link>
          <Link href="/admin" className="text-sm underline">Admin</Link>
        </header>
        <main>{children}</main>
      </body>
    </html>
  )
}

// app/blog/[slug]/page.js
import { Suspense } from 'react'
import { notFound } from 'next/navigation'
import { getPublishedPost } from '@/lib/dal'

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPublishedPost(slug)
  if (!post) return { title: 'Artikel tidak ditemukan' }
  return {
    title: post.title, // → "Halo Dunia | Blog Kodingup" lewat template di layout
    description: post.excerpt,
    alternates: { canonical: `/blog/${post.slug}` },
    openGraph: { type: 'article', title: post.title, description: post.excerpt },
  }
}

async function PostBody({ params }) {
  const { slug } = await params
  const post = await getPublishedPost(slug)
  if (!post) notFound()

  return (
    <article className="flex flex-col gap-4">
      <h1 className="text-3xl font-bold">{post.title}</h1>
      <time className="text-sm text-gray-500" dateTime={post.createdAt.toISOString()}>
        {post.createdAt.toLocaleDateString('id-ID', { dateStyle: 'long' })}
      </time>
      {post.content.split(/\n\s*\n/).map((para, i) => (
        <p key={i}>{para}</p>
      ))}
    </article>
  )
}

// params = data request → dibaca di dalam Suspense, sisa halaman tetap prerender
export default function PostPage({ params }) {
  return (
    <Suspense fallback={<p>Memuat artikel...</p>}>
      <PostBody params={params} />
    </Suspense>
  )
}

// app/login/page.js
import { LoginForm } from './LoginForm'

export const metadata = { title: 'Login Admin', robots: { index: false } }

export default function LoginPage() {
  return (
    <section className="flex flex-col gap-4">
      <h1 className="text-2xl font-bold">Login Admin</h1>
      <LoginForm />
    </section>
  )
}

// app/admin/new/page.js
import { Suspense } from 'react'
import { verifyAdmin } from '@/lib/dal'
import { createPost } from '@/app/actions/posts'
import { PostForm } from '@/components/PostForm'

async function Guarded() {
  await verifyAdmin() // halaman juga dicek, bukan hanya action-nya
  return <PostForm action={createPost} initial={{ title: '', excerpt: '', content: '', published: false }} />
}

export default function NewPostPage() {
  return (
    <section className="flex flex-col gap-4">
      <h1 className="text-2xl font-bold">Artikel Baru</h1>
      <Suspense fallback={<p>Memeriksa sesi...</p>}>
        <Guarded />
      </Suspense>
    </section>
  )
}

// app/admin/[id]/edit/page.js
import { Suspense } from 'react'
import { notFound } from 'next/navigation'
import { getPostById } from '@/lib/dal'
import { updatePost } from '@/app/actions/posts'
import { PostForm } from '@/components/PostForm'

async function EditForm({ params }) {
  const { id } = await params
  const post = await getPostById(Number(id)) // sudah memanggil verifyAdmin()
  if (!post) notFound()
  const action = updatePost.bind(null, post.id) // → updatePost(id, prevState, formData)
  return <PostForm action={action} initial={post} />
}

export default function EditPostPage({ params }) {
  return (
    <section className="flex flex-col gap-4">
      <h1 className="text-2xl font-bold">Edit Artikel</h1>
      <Suspense fallback={<p>Memuat...</p>}>
        <EditForm params={params} />
      </Suspense>
    </section>
  )
}

// app/api/posts/route.js
import { getPublishedPosts } from '@/lib/dal'

export async function GET() {
  const posts = await getPublishedPosts()
  return Response.json({ count: posts.length, posts })
}
// → {"count":1,"posts":[{"slug":"halo-dunia","title":"Halo Dunia",...}]}

// app/sitemap.js
import { getPublishedPosts } from '@/lib/dal'

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000'

export default async function sitemap() {
  const posts = await getPublishedPosts()
  return [
    { url: siteUrl, lastModified: new Date(), changeFrequency: 'daily', priority: 1 },
    ...posts.map((post) => ({
      url: `${siteUrl}/blog/${post.slug}`,
      lastModified: post.createdAt,
      changeFrequency: 'monthly',
      priority: 0.7,
    })),
  ]
}

// app/robots.js
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000'

export default function robots() {
  return {
    rules: { userAgent: '*', allow: '/', disallow: ['/admin', '/login'] },
    sitemap: `${siteUrl}/sitemap.xml`,
  }
}
// /robots.txt → User-Agent: *  Allow: /  Disallow: /admin  Disallow: /login  Sitemap: .../sitemap.xml

// scripts/seed.mjs, dijalankan dengan: npm run db:seed
import { createClient } from '@libsql/client'

const client = createClient({
  url: process.env.DATABASE_URL ?? 'file:local.db',
  authToken: process.env.DATABASE_AUTH_TOKEN,
})

await client.execute({
  sql: `INSERT OR IGNORE INTO posts (slug, title, excerpt, content, published, created_at)
        VALUES (?, ?, ?, ?, 1, ?)`,
  args: [
    'halo-dunia',
    'Halo Dunia',
    'Artikel pertama di blog full-stack Next.js.',
    'Ini paragraf pertama.\n\nIni paragraf kedua, ditulis dari seed script.',
    Math.floor(Date.now() / 1000), // kolom timestamp Drizzle disimpan dalam detik
  ],
})
console.log('Seed selesai')

{
  "scripts": {
    "db:push": "drizzle-kit push",
    "db:seed": "node --env-file-if-exists=.env.local scripts/seed.mjs",
    "test": "vitest run",
    "test:e2e": "playwright test"
  }
}

Route (app)             Revalidate  Expire
┌ ○ /                           1h      1d
├ ◐ /admin
├   /admin/[id]/edit
│ └ ◐ /admin/[id]/edit
├ ◐ /admin/new
├ ○ /api/posts                  1h      1d
├ ƒ /api/posts/[slug]
├ ƒ /api/revalidate
├   /blog/[slug]
│ └ ◐ /blog/[slug]
├ ○ /login
├ ○ /robots.txt
└ ƒ /sitemap.xml

ƒ Proxy (Middleware)