[떡국] 트러블슈팅 _ next.js [slug]

slug에 my가 들어올때 그거에 해당하는 데이터를 가지고 와야하는데 

자꾸 slug가 undefined라고 뜬다.

 

[data]

[
  {
    "id": "my",
    "nickname": "공주",
    "디데이": 30,
    "편지총개수": 7,
    "고명정보": [
      { "닉네임": "123", "고명키값": "딸기" },
      { "닉네임": "456", "고명키값": "고수" },
      { "닉네임": "789", "고명키값": "오이" },
      { "닉네임": "135", "고명키값": "페퍼론치노" },
      { "닉네임": "245", "고명키값": "파" },
      { "닉네임": "567", "고명키값": "계란" },
      { "닉네임": "64544", "고명키값": "고기" }
    ],
    "테이블매트정보": "빨강",
    "인입유저떡국설정완료여부": true
  }
]

[services]

import path from 'path'
import { promises as fs } from 'fs'

export type Tteokguk = {
  nickname: string
  id: string
  디데이: number
  편지총개수: number
  고명정보: [{ 닉네임: string; 고명키값: string }]
  테이블매트정보: string
  인입유저떡국설정완료여부?: boolean
}

export async function getTteokguks(): Promise<Tteokguk[]> {
  // JSON파일 경로 가져오기
  const filePath = path.join(process.cwd(), 'data', 'main.json')
  // 가져온 JSON파일에 데이터 가져오기
  const data = await fs.readFile(filePath, 'utf-8')
  return JSON.parse(data)
}

export async function getTteokguk(id: string): Promise<Tteokguk | undefined> {
  const tteokguk = await getTteokguks()
  // console.log('tteokguk', tteokguk)
  console.log('id', id)
  return tteokguk.find((item) => item.id === id)
}

[main.tsx]

import { getTteokguk, getTteokguks } from '@/services/main'

type Props = {
  params: {
    slug: string
  }
}

export default async function DishPage({ params: { slug } }: Props) {
  const 떡국 = await getTteokguk(slug)
  if (!떡국) {
    console.log('해당떡국없음')
  }

  return (
    <div>
      <h1></h1>
      <div>{`까치까치 설날 D- `}</div>
    </div>
  )
}

export async function generateStaticParams() {
  const tteokguks = await getTteokguks()
  console.log(tteokguks)
  return tteokguks.map((tteokguk) => ({
    slug: tteokguk.id,
  }))
}

 

아래 generateStaticParams() 함수는 정상적으로 데이터가 잘 나오는 상황이다. 

 

 

[해결 방법]

 

강의로만 봤다가 실전으로 하려다보니 slug를 [slug]로 사용하지 않고 [userId]로 사용을 해서 찾지 못했던 거였다 .

결국엔 

export default async function DishPage({ params: { userId } }: Props) {
  const 떡국 = await getTteokguk(userId)
  if (!떡국) {
    console.log('해당떡국없음')
  }

userId로 넣어주면 정상적으로 id를 받아올 수 있었다.