[Next.js/JS] : Local JSON 파일 읽어서 dynamic route에서 출력하기

export async function getStaticProps({params}) {
    const helpData = await import('../../../public/json/app_help.json');
    const id = Number(params.id);
    const item = helpData[id - 1];
    return {
        props: {
            item,
        },
    };
}

데이터를 DB에 넣지 않고 로컬에서 두고 써도 되는 데이터가 있어서 Local JSON 파일을 생성했다. 그런데 읽어오려는 곳이 [id].js인 dyanmic route를 사용하는 것에 좀 애먹었다. 삽질끝에 해결해서 정리.

 

1. JSON 파일 생성

본래는 [id].js를 통해서 받는 id 값을 통해서 다른 JSON 파일을 불러오는 형태로 구성했다가 최종적으로는 하나로 합쳤다. 차라리 id로 받는 값을 가지고 json파일을 읽을 때 index로 사용하는 게 더 편하다고 판단했다. 

 

경로 : public/json/help.json 

[{"help1": [
  {
    "title": "타이틀 1",
    "detail": "상세내용1"
  },
  {
    "title": "타이틀2",
    "detail": "상세내용2"
  },
  {
    "title": "타이틀3",
    "detail": "상세내용3"
  }
]},

  {"help2": [
  {
    "title": "타이틀1",
    "detail": "상세내용1"
  },
  {
    "title": "타이틀2",
    "detail": "상세내용2"
  },
  {
    "title": "타이틀3",
    "datail": "상세내용3"
  }
    ]
}]

 

2. [id].js 로 가서 json 파일 import

import helpData from '../../../public/json/help.json';

 

3. JSON 파일을 읽기 위한 getStaticProps() 추가

export async function getStaticProps({params}) {
    const helpData = await import('../../../public/json/help.json');
    const id = Number(params.id);
    const item = helpData[id - 1];
    return {
        props: {
            item,
        },
    };
}

 

4. dynamic route 동적 라우팅을 사용하기에 getStaticPaths() 추가

export async function getStaticPaths() {
    const paths = helpData.map((item, index) => ({
        params: { id: `${index + 1}` },
    }));

    return {
        paths,
        fallback: false,
    };
}

 

5. getStaticProps에서 받은 item을 화면에 반영하기

URL 안의 id값에 따라서 내용을 바꿀 수 있도록 switch를 썼다.  case '1'에서 필요한 내용인 help1의 배열을 빼내서(appHelpContent) map으로 출력했다.

export default function QaPage({ item }) {
  const router = useRouter();
  const { id } = router.query;

    switch (id) {
        case '1':
            const appHelpContent = item.help1
            return (
                <>
                    <div style={{maxWidth: '500px', margin: "0 auto"}}>
                        <header style={{width: '100%', display: 'block', alignContent: 'center'}}>
                            <Nav>
                                <BackButton onClick={() => Router.back()}>
                                    <Image src={BackArrow} alt="Back arrow"/>
                                </BackButton>
                                <div style={{
                                    width: '100%', textAlign: 'center', display: 'flex',
                                    justifyContent: 'center'
                                }}>

                                    <InfoTitle>앱 이용 관련</InfoTitle>

                                </div>
                            </Nav>
                        </header>
                        <Container>
                            <ScrollableContainer>

                                {appHelpContent.map((help, i) =>
                                    <>
                                        <Item title={help.title}
                                              content={help.detail}></Item>
                                    </>
                                )}
                            </ScrollableContainer>
                        </Container>
                        <BottomNav name='more'/>
                    </div>
                </>
            );
        case '2':
            const accountHelpContent = item.help2

            return (
                <>
                   
                </>
            );
        default:
            return (
                <div>Invalid id</div>
            );
    }
}