정적 생성 질무우우우운!!!!!!!!!!!!!!!!!!!(꼭 답해주세요)

[gayeong0916]

저기서 동그라미 친 부분들 빼고 정적 생성을 하라는 의견을 듣고 tanstack 리액트 쿼리를 사용해서
정적 생성을 하려고 하는데 getStaticProps()를 사용하라는 뜻이 맞는지 여쭤보고 싶슴다

[JiinSeok]

Next.js 앱라우터에서의 정적생성

1. app 디렉토리 내의 page.tsx 파일에서 데이터 패칭을 하면, 이 페이지는 정적 페이지로 생성!
2. 동적 라우터에서는 generateStaticParams를 사용해서, 각 동적 경로에 대해 어떤 페이지를 정적으로 생성할지를 명시적으로 정의
3. 정의된 경로의 정적생성 데이터를 받아오는 네트워크 요청 보낼 때 리액트 쿼리 쓰면 되겠네요~!

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  // 정적으로 생성할 동적 경로 정의: 페이지 파일에 적어 놨어요...!
  const paths = [
    { id: '1' },
    { id: '2' },
  ];

  return paths.map((path) => ({
    id: path.id,
  }));
}

const Post = async ({ params }) => { ==> 이  const { id } = params;

  // 정적으로 생성된 데이터 가져오기
  const res = await axios.get(`https://api.example.com/posts/${id}`);
  const post = res.data;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <Comments postId={id} /> {/* 클라이언트 컴포넌트 */}
    </div>

[gayeong0916]

오.. 이해 됐어요!! 감사합니당 ㅎㅎㅎ