인프런 커뮤니티 질문&답변

SJ님의 프로필 이미지

작성한 질문수

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

8.4 song card - 2

정적배포

해결된 질문

24.07.06 21:25 작성

·

114

0

안녕하세요 ! 강의를 따라하고있다가

문득 생각이 들었는데요.

channel / [id] 이렇게 동적 페이지가 나오게 되면

정적 배포를 하게 될땐

어떤 방식으로 하시게 되나요 ?

답변 1

0

도도(코딩루팡)님의 프로필 이미지
도도(코딩루팡)
지식공유자

2024. 07. 06. 21:36

강의에서 다루지 않는 부분인데, SSR을 사용하는 중요한 이유중 하나 입니다.!

  • 다이나믹 Routes 에서 channel / [id] 의 id 부분을 결정해야 합니다.

  • id 1번에는 어떤 데이터를 가져와서 정적 페이지를 만들지

  • id 2번에는 어떤 데이터를 가져와서 정적 페이지를 만들지를요.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    id: post.slug,
  }))
}

위 코드를 보시면 id 부분을 결정할 수 있는 특별함수 'generateStaticParams' 가 있습니다.

예를들어 posts가 1번부터 100번까지 나오면 총 100개의 static page가 만들어지겠죠!

 

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

 

참고 GPT 요약

Next.js의 App Router에서 동적 라우트에 페이지들을 동적으로 배포하기 위해서는 `generateStaticParams` 함수를 사용하여 빌드 시점에 동적 경로를 생성할 수 있습니다. 아래는 그 방법을 설명하는 예제입니다:

1. **폴더 구조 설정**:
   ```
   /app
     /products
       /[id]
         page.js
   ```

2. **`page.js` 파일 작성**:
   ```jsx
   export default function ProductPage({ params }) {
     return (
       <div>
         <h1>Product ID: {params.id}</h1>
       </div>
     );
   }
   ```

3. **`generateStaticParams` 함수 사용**:
   ```jsx
   export async function generateStaticParams() {
     const products = await fetch('https://api.example.com/products').then(res => res.json());
     return products.map(product => ({ id: product.id }));
   }
   ```

이렇게 하면 빌드 시점에 동적 라우트가 생성되어, 각 제품 페이지가 정적으로 생성됩니다. 자세한 내용은 [Next.js 문서](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params)를 참고하세요.

 

SJ님의 프로필 이미지
SJ
질문자

2024. 07. 06. 21:45

예를들어 posts가 1번부터 100번까지 나오면 총 100개의 static page가 만들어지겠죠!

말씀주셨는데요 ㅎ

그렇다면 처음에는 정적 페이지가 하나도 생성이 되지 않다가 사용자에 따라서 정적 페이지수가 증가하게 되나요 ?

SJ님의 프로필 이미지

작성한 질문수

질문하기