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

장진님의 프로필 이미지
장진

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

회원 가입 페이지 기능 생성(2)

회원가입 누르면 404에러가 뜹니다 ;-;

작성

·

355

1

안녕하세요 ;-;

회원가입 누르니 404에러가 뜹니다..

완성 코드랑 비교해서 봐도 똑같은데 어떤 문제인지 모르겠스빈다... next.js가 13이긴 합니다만 ;-; 그 이유 일까요?..

 

어디를 살펴보면 될까요?;-;

스크린샷 2023-11-19 오전 12.36.34.png

답변 1

1

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요 ~

NextJS 버전과는 상관이 없습니다 ~
똑같은 Pages folder(Pages Router)를 사용하기에 전혀 차이가 없습니다.
현재 보면 3000번으로 요청을 보내고 계신데 서버가 4000번에 떠있다면 4000번으로 요청을 보내주셔야 합니다.

.env 부분에 이 부분을 생략하셨거나
NEXT_PUBLIC_SERVER_BASE_URL=http://localhost:4000

_app.tsx
부분에
Axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_BASE_URL + "/api"; Axios.defaults.withCredentials = true;
이 부분을 생략하신 것 같습니다.

감사합니다.

장진님의 프로필 이미지
장진
질문자

안녕하세요, 선생님 ;-; 주말에도 답변주셔서 감사합니다!!!

말씀주신 부분을 다시 체크해보았는데요..!!;-; 다 잘 설정되어 있는 것 같은데, 제가 체크한 곳이 아닌가요?...!

서버는 4000인 것을 확인하였습니다!;-;

 

  1. client/app/layout.tsx
    image

  2. client/.env


    image

흑 도움 부탁드립니다...!!

John Ahn님의 프로필 이미지
John Ahn
지식공유자

아 그렇군요! 혹시 저장소에 올린 다음에 저장소 주소 좀 올려주실 수 있을까요??!!

장진님의 프로필 이미지
장진
질문자

안녕하세요, 선생님 ;-; 저장소에 올려보았습니다...!!

https://github.com/jindory/redditClone

 

감사합니다...!!!

John Ahn님의 프로필 이미지
John Ahn
지식공유자

장진님 안녕하세요!
아 소스 코드를 보니깐 app 폴더에서 시작하셨네요~!
app folder => app router 사용 , pages folder => pages router 사용

이 되게 됩니다.

제가 이 부분을 빨리 수정했었어야했는데 강의 보시면
Section 2 -1 NextJS Typescript를 이용한 프론트엔드 구현하기
이 강의를 제가 새롭게 올려 놓았어요 ~ 이거 보고 리액트 앱 생성을 다시 해주시겠어요?!!

이렇게 하면 pages folder (pages router)를 이용해서 앱을 생성할수있게 됩니다 ~

장진님의 프로필 이미지
장진
질문자

안녕하세요, 선생님!!

앗, 제가 꼼꼼히 봤어야했는뎃!! 그런 사실이ㅎ-ㅎ!; 감사합니다!!!!!

장진님의 프로필 이미지
장진

작성한 질문수

질문하기