Building a Modern Blog with Next.js 16 & Server Actions

Welcome to my new technical blog. This project was built from scratch to explore the latest features of Next.js 16 and the App Router.

This isn't just a static site; it's a full-stack application with authentication, database connections, and protected routes.

🛠️ The Tech Stack

I chose a modern, edge-ready stack for this project:

• Framework: Next.js 16 (App Router)
• Database: PostgreSQL (via Neon)
• ORM: Prisma
• Styling: Tailwind CSS
• Authentication: Clerk
• Deployment: Vercel

💻 Code Snippet: Server Actions

One of the coolest features I used is Server Actions. Instead of creating separate API endpoints, I can call server code directly from my components.

Here is how I handle post creation:

export async function createPost(formData: FormData) {
  'use server'
  
  const { userId } = await auth();
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;

  await prisma.post.create({
    data: {
      title,
      content,
      userId,
    },
  });

  revalidatePath("/blog");
}

🔐 Security & Auth

Authentication is handled by Clerk. I implemented middleware to protect the dashboard routes, ensuring that only authenticated users can create or edit posts. Furthermore, the backend verifies that a user is the owner of a post before allowing deletion.

🚀 What's Next?

I plan to add more features soon, such as:

• Image uploads

• Comment section

• Dark mode toggle

Thanks for reading!