ทำเว็บ Blog ด้วย Next.js และ Strapi

npx create-strapi-app@latest my-project --quickstart

curl --location 'localhost:1337/api/auth/local' \
--header 'Content-Type: application/json' \
--data-raw '{
    "identifier": "[email protected]",
    "password": "Mike1234"
}'

curl --location 'localhost:1337/api/auth/local/register' \
--header 'Content-Type: application/json' \
--data-raw '{
    "identifier": "[email protected]",
    "password": "Mike1234"
}'

curl --location 'localhost:1337/api/users/me' \
--header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNzAxNjYwMjE2LCJleHAiOjE3MDQyNTIyMTZ9.YlcLibPvOzkPoyAvbp2UGqAQAHdKBXIPGbJIguYqf2Q'

curl --location --globoff 'http://localhost:1337/api/blogs/1?populate[0]=thumbnail'

.
├── README.md
├── app
│   ├── blog --> สำหรับแสดงผล Blog รายหน้า
│   │   └── [id]
│   │       └── page.js
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   ├── login --> สำหรับทำหน้า login (ด้วย Server action)
│   │   ├── action.js
│   │   └── page.js
│   ├── page.js --> หน้าหลัก
│   └── special-blogs --> สำหรับแสดงผล special blog หลังจาก login แล้ว
│       └── page.js
├── jsconfig.json
├── middleware.js
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
└── tailwind.config.js

npm install axios

STRAPI_BASE_URL=http://127.0.0.1:1337

import axios from "axios";
import Link from "next/link";

const fetchBlogs = async () => {
  try {
    const response = await axios.get(`${process.env.STRAPI_BASE_URL}/api/blogs`);
    return response.data.data;
  } catch (error) {
    console.log("error", error);
    return [];
  }
};

export default async function Page() {
  const blogs = await fetchBlogs();
  return (
    <div>
      Home page (Update new)
      {blogs.map((blog, index) => (
        <div className="flex gap-2" key={index}>
          <div>ID: {blog.id}</div>
          <div>{blog.attributes.title}</div>
          <div>{blog.attributes.description}</div>
          <div>
            <Link href={`blog/${blog.id}`}>Read more...</Link>
          </div>
        </div>
      ))}
    </div>
  );
}

import axios from "axios";

const fetchBlog = async (id) => {
  try {
    const response = await axios.get(
      `${process.env.STRAPI_BASE_URL}/api/blogs/${id}?populate[0]=thumbnail`,
    );
    return response.data.data;
  } catch (error) {
    console.log("error", error);
    return [];
  }
};

export default async function Page({ params }) {
  const blog = await fetchBlog(params.id);
  console.log("blog", blog);
  return (
    <div>
      <img
        src={`${process.env.STRAPI_BASE_URL}${blog.attributes.thumbnail.data.attributes.formats.thumbnail.url}`}
      />
      {blog.id}
      {blog.attributes.description}
    </div>
  );
}

"use client";

import { useFormState } from "react-dom";
import { login } from "./action";

export default async function Page() {
  const initialState = {
    message: null,
  };

  const [state, formAction] = useFormState(login, initialState);

  return (
    <div>
      <form action={formAction}>
        <div>
          Email <input name="email" />
        </div>
        <div>
          Password <input name="password" type="password" />
        </div>
        <button>Login</button>
        <div>Message: {state?.message}</div>
      </form>
    </div>
  );
}

"use server";

import { cookies } from "next/headers";
import { isRedirectError } from "next/dist/client/components/redirect";
import { redirect } from "next/navigation";

import axios from "axios";

export async function login(prevState, formData) {
  try {
    const email = formData.get("email");
    const password = formData.get("password");

    console.log("email", email);
    console.log("password", password);

    const response = await axios.post(`${process.env.STRAPI_BASE_URL}/api/auth/local`, {
      identifier: email,
      password,
    });

    if (response.data.jwt) {
      cookies().set("token", response.data.jwt);
    }
  } catch (error) {
    return { message: error.message || "Failed to create" };
  }

  redirect("/special-blogs");
}

import { NextResponse } from "next/server";

// This function can be marked `async` if using `await` inside
export async function middleware(request) {
  try {
    let token = request.cookies.get("token");
    let response = await fetch(`${process.env.STRAPI_BASE_URL}/api/users/me`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token.value}`,
      },
    });

    if (!response.ok) {
      throw new Error("Request error");
    }

    const payload = await response.json();

    const requestHeaders = new Headers(request.headers);
    requestHeaders.set("user", JSON.stringify({ email: payload.email }));

    response = NextResponse.next({
      request: {
        headers: requestHeaders,
      },
    });

    return response;
  } catch (error) {
    console.log("error", error);
    return NextResponse.redirect(new URL("/", request.url));
  }
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: "/special-blogs/:path*",
};

import { headers, cookies } from "next/headers";

import axios from "axios";

const fetchSpecialBlogs = async () => {
  try {
    const token = cookies().get("token");
    const response = await axios.get(`${process.env.STRAPI_BASE_URL}/api/special-blogs`, {
      headers: {
        Authorization: `Bearer ${token.value}`,
      },
    });

    return response.data.data;
  } catch (error) {
    console.log("error", error);
    return [];
  }
};

export default async function Page() {
  const headersList = headers();
  const user = JSON.parse(headersList.get("user"));
  const blogs = await fetchSpecialBlogs();

  return (
    <div>
      <div>Hello {user.email}</div>
      Special Blog
      {blogs.map((blog, index) => (
        <div className="flex gap-2" key={index}>
          <div>ID: {blog.id}</div>
          <div>{blog.attributes.title}</div>
          <div>{blog.attributes.description}</div>
        </div>
      ))}
    </div>
  );
}