Panduan Lengkap Membangun Backend Next.js 16 dengan Cloudflare R2 dan PostgreSQL

# Database PostgreSQL
DATABASE_URL="postgresql://username:password@host:5432/postgres?sslmode=require"

# Cloudflare R2 Storage
R2_ACCOUNT_ID="account_id_cloudflare_anda"
R2_BUCKET_NAME="portfolio-blog"
R2_ACCESS_KEY_ID="access_key_id_anda"
R2_SECRET_ACCESS_KEY="secret_access_key_anda"
R2_PUBLIC_DOMAIN="https://pub-xxxxxx.r2.dev"

npm install @aws-sdk/client-s3

import {
  S3Client,
  PutObjectCommand,
  DeleteObjectCommand,
} from '@aws-sdk/client-s3'

const accountId = process.env.R2_ACCOUNT_ID
const accessKeyId = process.env.R2_ACCESS_KEY_ID
const secretAccessKey = process.env.R2_SECRET_ACCESS_KEY
const bucketName = process.env.R2_BUCKET_NAME || 'portfolio-blog'
const publicDomain = process.env.R2_PUBLIC_DOMAIN

export const isR2Configured = Boolean(accessKeyId && secretAccessKey)

export const r2Client = isR2Configured
  ? new S3Client({
      region: 'auto',
      endpoint: `https://${accountId}.r2.cloudflarestorage.com`,
      credentials: {
        accessKeyId: accessKeyId!,
        secretAccessKey: secretAccessKey!,
      },
    })
  : null

// Fungsi Upload Gambar ke R2
export async function uploadToR2(
  fileBuffer: Buffer,
  fileName: string,
  contentType: string,
  folder = 'general',
): Promise<string> {
  if (!r2Client || !isR2Configured) {
    throw new Error('Cloudflare R2 belum terkonfigurasi.')
  }

  const key = `${folder}/${fileName}`

  await r2Client.send(
    new PutObjectCommand({
      Bucket: bucketName,
      Key: key,
      Body: fileBuffer,
      ContentType: contentType,
    }),
  )

  if (publicDomain) {
    const cleanDomain = publicDomain.replace(/\/$/, '')
    return `${cleanDomain}/${key}`
  }

  return `https://${bucketName}.${accountId}.r2.cloudflarestorage.com/${key}`
}

// Fungsi Hapus Gambar dari R2
export async function deleteFromR2(fileUrl: string): Promise<boolean> {
  if (!r2Client || !isR2Configured) return false

  try {
    const url = new URL(fileUrl)
    const key = url.pathname.replace(/^\//, '')

    await r2Client.send(
      new DeleteObjectCommand({
        Bucket: bucketName,
        Key: key,
      }),
    )
    return true
  } catch (err) {
    console.warn('Gagal menghapus file dari R2:', err)
    return false
  }
}

import { NextRequest, NextResponse } from 'next/server'
import path from 'path'
import { getSession } from '@/lib/auth/guard'
import { isR2Configured, uploadToR2 } from '@/lib/r2'

export const runtime = 'nodejs'

const ALLOWED_MIME_TYPES = [
  'image/jpeg',
  'image/png',
  'image/webp',
  'image/avif',
  'image/gif',
]
const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB

export async function POST(request: NextRequest) {
  try {
    // 1. Proteksi Hak Akses (Role Admin / Editor)
    const session = await getSession()
    const role = (session?.user as { role?: string })?.role
    if (
      process.env.NODE_ENV === 'production' &&
      (!session || (role !== 'admin' && role !== 'editor'))
    ) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 403 })
    }

    const formData = await request.formData()
    const file = formData.get('file') as File | null
    const folder = (formData.get('folder') as string) || 'general'

    if (!file)
      return NextResponse.json(
        { error: 'File tidak ditemukan' },
        { status: 400 },
      )
    if (!ALLOWED_MIME_TYPES.includes(file.type)) {
      return NextResponse.json(
        { error: 'Format file tidak didukung' },
        { status: 400 },
      )
    }

    // 2. Buat Nama File Unik & Aman
    const sanitizedFolder = folder.replace(/[^a-zA-Z0-9_-]/g, '') || 'general'
    const ext = path.extname(file.name).toLowerCase() || '.png'
    const fileName = `${Date.now()}-${crypto.randomUUID().slice(0, 8)}${ext}`

    const bytes = await file.arrayBuffer()
    const buffer = Buffer.from(bytes)

    // 3. Upload Langsung ke Cloudflare R2
    const publicUrl = await uploadToR2(
      buffer,
      fileName,
      file.type,
      sanitizedFolder,
    )

    return NextResponse.json({
      success: true,
      url: publicUrl,
      fileName,
    })
  } catch (error) {
    return NextResponse.json(
      { error: 'Gagal mengunggah file' },
      { status: 500 },
    )
  }
}

import { deleteFromR2 } from '@/lib/r2'
import { db } from '@/lib/db'
import { posts } from '@/lib/db/schema'
import { eq } from 'drizzle-orm'

export async function deletePostAction(id: string) {
  // 1. Ambil URL Cover Gambar
  const [post] = await db.select().from(posts).where(eq(posts.id, id))

  if (post?.coverImage) {
    // 2. Hapus file fisik dari Cloudflare R2
    await deleteFromR2(post.coverImage)
  }

  // 3. Hapus baris data dari database PostgreSQL
  await db.delete(posts).where(eq(posts.id, id))

  return { success: true }
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/webp', 'image/avif'],
    remotePatterns: [
      { protocol: 'https', hostname: '**.r2.dev' },
      { protocol: 'https', hostname: '**.cloudflarestorage.com' },
      { protocol: 'https', hostname: '**.danyakmallun.dev' },
    ],
  },
}

export default nextConfig