😍getStaticPaths && generateStaticParams

getStaticPaths chỉ dành cho Pages Router. Nếu bạn đang sử dụng App Router với các phân đoạn tuyến động thì có thể sử dụng generateStaticParams để trả về các tham số động cho việc tạo trang tĩnh.

Cliend

pages\posts[postId]\index.tsx

import Link from "next/link";
import "@/app/globals.css"
type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
}
export async function getStaticPaths() {
  console.log("aaaaaaaaa1");
  const response = await fetch('https://jsonplaceholder.typicode.com/posts?_page=1');
  const postList: Post[] = await response.json();
  // console.log(postList);
  return {
    paths: postList.map((post) => {
      return {
        params: {
          postId: `${post.id}`,
        },
      }
    }),
    fallback: false,
  }
}
/* eslint-disable @typescript-eslint/no-explicit-any */
export async function getStaticProps({ params }: any) {
  console.log(params);
  console.log("aaaaaaaaa2");
  // fetch single post detail
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params?.postId}`
  )
  const post = await response.json()
  return {
    props: post
  }
}
/* eslint-disable @typescript-eslint/no-explicit-any */
export default function PostIdPage(params: any) {
  console.log("aaaaaaaaa3");
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-2 sm:px-0">
      <div className="w-full rounded bg-white p-10 shadow-lg sm:w-1/2">
        <h1 className="mb-4 text-2xl font-bold text-blue-600 sm:text-3xl">
          PostId: {params.id} - {params.title}
        </h1>
        <p className="text-sm text-gray-700 sm:text-base md:text-lg">
          {params.body}
        </p>
      </div>
      <Link className="mt-4 text-black hover:text-blue-500" href="/posts">
        Go Back
      </Link>
    </div>
  );
}

pages\posts\index.tsx

const AB = () => {
  return (
    <div>
      aaaa 3
    </div>
  );
}
export default AB;

Server

app\posts[postId]\page.tsx

import Link from "next/link";
import "@/app/globals.css"
type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
}
export async function generateStaticParams() {
  const posts: Post[] = await fetch(
    "https://jsonplaceholder.typicode.com/posts",
  ).then((res) => res.json());
  return posts.map((post) => {
    return {
      postId: post.id.toString(),
    };
  });
}
/* eslint-disable @typescript-eslint/no-explicit-any */
export default async function PostIdPage({params}: any) {
  const {postId} = await params;
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`,
  );
  const post: Post = await response.json();
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-2 sm:px-0">
      <div className="w-full rounded bg-white p-10 shadow-lg sm:w-1/2">
        <h1 className="mb-4 text-2xl font-bold text-blue-600 sm:text-3xl">
          PostId: {post.id} - {post.title}
        </h1>
        <p className="text-sm text-gray-700 sm:text-base md:text-lg">
          {post.body}
        </p>
      </div>
      <Link className="mt-4 text-black hover:text-blue-500" href="/posts">
        Go Back
      </Link>
    </div>
  );
}

app\posts\page.tsx

const AB = () => {
  return (
    <div>
      aaaa 3
    </div>
  );
}
export default AB;