nextjs 배포 후 문제가 있는데, 도와주실분 계신가요 ㅠ

Question

import React from 'react'; import { useRouter } from 'next/router'; import axios from 'axios'; import Pagination from '../../components/Pagination'; function Category({ postDataNum, postData, page, index }) { const router = useRouter(); page = parseInt(page); return (

router.push(`/postdetail/${_id}`)} >
{title}

{desc.split('<
>').map((i, idx) => { return (
{i}
); })}

{createdAt.slice(0, 10)}

); } export default Category; export async function getServerSideProps(context) { const { index, page } = context.query; let postDataNum; let postData; await axios .get(`${process.env.NEXT_PUBLIC_BACK_URL}/posts/getPost`, { params: { categories: index }, headers: { Origin: process.env.NEXT_PUBLIC_FRONT_HOST, }, }) .then((res) => { postData = res.data; postDataNum = res.data.length; }); return { props: { postDataNum, postData, page, index, }, }; } 해당 카테고리에 맞는 게시글을 호출하는 페이지 입니다.분명 로컬, 빌드시에는 아무 문제가 없었는데, 배포 후 문제가 생깁니다.크롬 네트워크 탭에서 확인해보니, 500 Internal Server Error 에러가 뜹니다. 정황상 getServerSideProps에서 문제가 생긴것이 맞는것같습니다. getServerSideProps가 있는 다른 페이지에서도 동일한 문제가 발생하였구요.로컬 서버를 구동해보니 getServerSideProps에서 보낸 요청이 서버에 전달되지 않습니다.뭐가 문제일까요...ㅠ

인생은_계단이다 · Answer

계속 생각해보다가, 자답을 구했습니다.next앱은 버셀에 배포중이지만, 서버는 로컬로 돌리고 있는 상황이었어요.그렇기 때문에 pre-rendering을 사용하지 않는 useEffect훅에서 일어나는 서버와의 통신은문제가 없었지만, pre-rendering은 버셀 서버(해외)에서 일어나기 때문에, 제 로컬 서버와 통신이 안되었던 겁니다...생각해보면 간단한 문제였는데, 왜 몰랐을까요ㅋㅋ;아 그리고 500에러같은 뚜렸한 원인을 알 수 없는 경우는 버셀 대시보드 로그에서 실시간으로 확인 가능하네요.

nextjs 배포 후 문제가 있는데, 도와주실분 계신가요 ㅠ

1개의 답변

Q&A 목록