Headless WordPress + Next.js + WPGraphQL – Phần 01

App/page.tsx

async function getPosts() {
  const res = await fetch(
    "http://wp.blogcongnghe.local/wp-json/wp/v2/posts",
    { cache: "no-store" }
  );

  if (!res.ok) {
    throw new Error("Failed to fetch posts");
  }

  return res.json();
}

export default async function Home() {
  const posts = await getPosts();

  return (
    <main style={{ padding: 40 }}>
      <h1>Blog Công Nghệ (Headless)</h1>

      <ul>
        {posts.map((post: any) => (
          <li key={post.id} style={{ marginBottom: 20 }}>
            <a href={`/post/${post.slug}`}>
                <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
            </a>
            
            <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
          </li>
        ))}
      </ul>
    </main>
  );
}

App/post/[slug]/page.tsx

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

async function getPost(slug: string) {
  const res = await fetch(
    `http://wp.blogcongnghe.local/wp-json/wp/v2/posts?slug=${slug}`,
    { next: { revalidate: 60 }, }
  );

  if (!res.ok) throw new Error("Failed to fetch post");

  const data = await res.json();
  return data[0];
}

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

  const post = await getPost(slug);

  if (!post) return <div>Không tìm thấy bài viết</div>;

  return (
    <main style={{ padding: 40 }}>
      <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
      <div>Test----8888</div>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </main>
  );
}

App/api/register/route.ts

export async function POST(req: Request) {
  const body = await req.json();

  const res = await fetch("http://wp.blogcongnghe.local/wp-json/headless/v1/register", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });

  const data = await res.json();

  return Response.json(data, { status: res.status });
}

App/register/page.tsx

"use client";
import { useState } from "react";

export default function RegisterPage() {
  const [msg, setMsg] = useState("");

  async function handleSubmit(e: any) {
    e.preventDefault();

    const formData = {
      username: e.target.username.value,
      email: e.target.email.value,
      password: e.target.password.value,
    };

    const res = await fetch("/api/register", {
      method: "POST",
      body: JSON.stringify(formData),
    });

    const data = await res.json();
    setMsg(data.message || "Done");
  }

  return (
    <main style={{ padding: 40 }}>
      <h1>Đăng ký</h1>

      <form onSubmit={handleSubmit}>
        <input name="username" placeholder="Username" required />
        <br /><br />
        <input name="email" placeholder="Email" required />
        <br /><br />
        <input name="password" type="password" placeholder="Password" required />
        <br /><br />
        <button type="submit">Register</button>
      </form>

      <p>{msg}</p>
    </main>
  );
}

Tìm hiểu thêm HeadLess

Tìm hiểu cơ bản về Headless WordPress – WpGraphQL