[Refactor] nextjs 마이그레이션

[rtttr1]

📌 Related Issues

• close [Refactor] Next js 마이그레이션 #676

✅ 체크 리스트

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 리뷰어와 라벨을 지정했나요?

📄 Tasks

• next js 마이그레이션

⭐ PR Point

일단 큰틀에서 마이그레이션 진행했습니다.

버전

Next: 15.5.7
React: 18.3.1

Next 16을 사용하려 했지만, vanilla-extract에서 이슈가 있었습니다. (tailwind 마이그레이션 해줄사람?)
Next 16 의 가장 큰 장점이 번들러로 turbopack을 사용해 next의 가장 큰 단점인 build 시간을 개선한건데, vanilla-extract의 next plugin이 turbopack과 호환이 잘 안되는 이슈가 있습니다. (바엑은 webpack을 사용함) (next와 바엑 모두 빌드타임에 작업을 해 호환 문제가 있음)
해당 이슈에서 자세한 내용 확인 가능하고, 이 이슈가 머지되어야지 16버전으로 업그레이드해서 사용할 수 있을거 같아요.
결론적으로는 서버 컴포넌트 활용하며, app 라우터 사용하는데 webpack을 기본 번들러로 사용하는 next 15 버전으로 결정했어요.

React까지 19로 마이그레이션하면 너무 복잡할거 같아서 일단 react는 18로 냅뒀습니다.

라우팅 url

app 폴더를 깔끔하게 유지하고 싶어서 라우트 그룹 (home)으로 홈페이지 코드를 분리해주었어요.
error, loading 페이지는 일단 냅뒀고, 추후 pr에서 next의 템플릿 활용해 고도화 해줄 예정입니다.

큰 변화는 mypage 부분인거 같아요.
우선, mypage 명칭을 my로 변경했습니다. 라우트 경로에 page가 붙는게 어색하다 생각했어요.

그리고 mypage 내부의 페이지들을 다 최상단으로 분리할까 했지만,,,,,,,
mypage 내부에서만 접근이 가능하고, '유저' 라는 도메인에 종속되는 페이지들이라서 고민고민 하다가 my 폴더 내부에 냅두었습니다.
대신 구분하기 편하게 (instructor) (student) 라우트 그룹으로 한뎁스 묶어서 role에 따른 도메인을 분리해주었어요.

그리고 기존에 헷갈리고 모호한 네이밍을 변경해주었어요.
my 폴더 내부에서 뎁스가 깊어지면 파일을 찾기 어려울거라 판단해 최대한 동사-명사 네이밍으로 뎁스를 안두고 이해하기 쉬운 네이밍을 가지게 했어요.

기본 경로

이전	현재
/mypage	/my

(instructor) 그룹

이전	현재
/mypage/class-register	/my/create-class
/mypage/class-register/completion	/my/create-class/completion
/mypage/class-register/[id]/edit	/my/create-class/[id]/edit
/mypage/account-register	/my/manage-account
/mypage/classes	/my/manage-classes
/mypage/classes/[id]	/my/manage-classes/[id]
/mypage/profile-register	/my/manage-profile
/mypage/profile-register-completion	/my/profile-register-completion

(student) 그룹

이전	현재
/mypage/reservations	/my/classes
/mypage/reservations/[id]	/my/classes/[id]
/mypage/reservations/[id]/cancel	/my/classes/[id]/cancel
/mypage/reservations/[id]/cancel-confirm	/my/classes/[id]/cancel-confirm
/mypage/edit-profile	/my/edit-profile

공통

이전	현재
/mypage/withdraw	/my/withdraw

네이밍이 맘에 안들거나 더 좋은 아이디어 있으시면 코리보다는 이 url 네이밍 추천해주시면 너무너무 좋을거 같아요!

cors 우회

서버형님들이 cors 작업을안해줘서,, 일단 proxy로 개발단에서만 우회 해두었어요.

어느정도 개선 결과

정말 프레임워크만 next로 마이그레이션 해줬는데 FCP는 많이 좋아졌어요.
모바일 / prod 환경에서 FCP 권장 기준인 1.8초 내로 들어왔어요. 아마 추가적인 폰트 최적화, 이미지 최적화, 서버 컴포넌트화 등등 을 더 하면 훨씬 수치가 좋아질거라 예상해요!

또한 예상한대로 static 페이지들이 많아서 react일때보다 전반적인 페이지 전환 속도가 좋아질거 같아요. (물론 static이면 안되는데 static인 페이지들도 있을 수 있긴해요 아직)
각 페이지 전환 속도에 대한 수치를 측정해보면 좋을거 같긴한데 이런거 할 수 있는 툴 아는사람 있나요? 일단 센트리로 되는지 확인해보긴 할겁니다.

📷 Screenshot

🔔 ETC

남은 할일들

• 에러 핸들링
• 로딩 설정
• img Image 컴포넌트로 변경
• 폰트 최적화
• 큰 틀에서 클라이언트 컴포넌트 서버 컴포넌트화
• 헤더 구분 문제
• 인증 플로우 점검 (Next auth 활용 예정)
• tanstack-query + 서버컴포넌트 패턴 관리

심심한데 관심있는거 있으면 도와줘라 얘들아

[github-actions]

✅ Storybook 배포 완료! 🔗 https://67e4fd1fd2c7078dceec04a4-shjoagonkp.chromatic.com/

[cloudflare-workers-and-pages]

Deploying dash-client-dev with    Cloudflare Pages

Latest commit:	4985fbd
Status:	🚫  Build failed.

View logs

[cloudflare-workers-and-pages]

Deploying dash-client with    Cloudflare Pages

Latest commit:	4985fbd
Status:	🚫  Build failed.

View logs