Next.js 13 동적 경로 생성

폴더 구조

• 13v은 app 폴더를 생성한다.(1 2은 pages 폴더 사용)
• 13v은 온전히 폴더 방식 라우팅 방식을 사용한다. (12v은 파일 이름 라우팅 방식을 사용)

posts/post.tsx 12v       -> posts/post
posts/post/page.tsx 13v  -> posts/post 

• 13v 부터는 app 폴더 밑에 한 개의 layout.tsx 이 있어야 한다.

동적 경로 사용 예시

동적 세그먼트는 [id] 또는 [slug] 와 같이 동적 세그먼트는 폴더 이름을 대괄호로 묶어 생성한다.

posts - page.tsx

import Link from "next/link";

async function getPost() {
  const res = await fetch(
    "http:...",
    // 요청을 보낼 때마다 최신 데이터 가져오기
    { cache: "no-store" }
  );

  const data = await res.json();
  return data?.items as any[];
}

const PostPage = async () => {
  const posts = await getPost();

  return (
    <div>
      <h1>Posts</h1>
      {posts.map((post: any) => {
        return <PostItem key={post.id} post={post} />;
      })}
    </div>
  );
};

export default PostPage;

const PostItem = ({ post }: any) => {
  const { id, title, created } = post || {};
  return (
    // Link로 경로전환
    <Link href={`/posts/${id}`}>
      <div>
        <h3>{title}</h3>
        <p>c{created}</p>
      </div>
    </Link>
  );
};

---

posts - [id] - page.tsx

params로 id 값 받아오기

{ id : 'post1' } 

import React from "react";

async function getPost(postId: string) {
  const res = await fetch(
    `http://...`,
    // 캐시된 데이터를 일정 간격으로 재검증
    { next: { revalidate: 10 } }
  );

  const data = await res.json();
  return data;
}
const PostDetailPage = async ({ params }: any) => {
  console.log(params);
  const post = await getPost(params.id);
  return (
    <div>
      <h1>posts/{post.id}</h1>
      <div>
        <h3>{post.title}</h3>
        <p>{post.created}</p>
      </div>
    </div>
  );
};

export default PostDetailPage;