[React] Next.js build 할 때, dynamic route 404 error 해결하는 방법

[Next.js] Nextjs build 할 때,  dynamic route  404 error  해결하는 방법

---

안녕하세요, 이번 포스팅에서는 Nextjs환경에서 build할 때, dynamic route를 처리하는 방법에 대해 알아보겠습니다 !

 

NEXTJS 개발환경에서는 분명, dynamic route에 정상적으로 접근이 됐었는데 .. build하고 배포를 하면 접근이 안되는 문제가 있었습니다.. 

하.. 이놈의 404.. 

NEXTJS Build과정에서, 정적페이지를 생성할 때 DynamicRoute의 경우에는 따로 처리를 해줘야 하는 것 같더라구요..

저는 NEXTJS 에서 제공하는 getStaticPaths, getStaticProps를 활용해서 DynamicRoute를 처리해주었습니다. 

 

예시코드를 통해 방법을 확인해보세요 ! 간단한 코드이니 쉽게 응용하실 수 있을 거라고 생각합니다 :D

// ...

const Post = () => {
  
  // ... 
  
};

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = [{ id: '3' }, { id: '4' }, { id: '5' }, { id: 'notebook' }]; 
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));
  return { paths, fallback: false };
};

export const getStaticProps: GetStaticProps = async (context) => {
  const postId = context.params?.id || '';
  const post = { id: postId, content: `I'm the post with id ${postId}!` }; 
  return { props: { post } };
};

export default Post;

이렇게 코드를 짜고 build를 하면 , 설정해준 DynamicRoute경로에 index.html이 정상적으로 build된 것을 확인 할 수 있습니다 !

 

 

---

감사합니다.

궁금하신점은 

댓글에 남겨주세요!