기준

링크와 버튼을 확인해 변환이 끝나면 Next.js 폴더만 고친다. 정적 HTML은 그때까지 둔 확인용 원본이다. 같은 문구를 양쪽에서 계속 고치지 않는다.

이 단원은 그렇게 옮긴 Next.js 앱의 이야기다. Java로 동작하는 Spring Boot 앱의 수정 절차와는 다르다.

고치는 위치

위치는 대응·주의에서 나눈 그대로다.

고칠 것	파일
한 페이지의 문구·구성	그 페이지의 page.js. index.html은 app/page.js, about.html은 app/about/page.js
머리글·바닥글·공통 메뉴	app/layout.js 한곳. 여기만 고치면 모든 페이지에 같이 반영된다
반복되는 카드	그 컴포넌트 파일
색·간격·글자	레이아웃에서 불러 쓰는 기존 CSS
클릭·입력·열고 닫기	'use client'가 붙은 파일의 useState와 이벤트. 예제는 React · 상태·이벤트
새 화면	폴더와 page.js를 추가하고, 링크는 Link와 /경로로 건다. 주소에 .html을 붙이지 않는다
이미지	public에 넣고 src="/파일"로 연결한다

반영

1. npm run dev로 연 뒤, 고친 페이지의 링크와 버튼을 누른다.
2. GitHub에 연결되어 있으면 그 Next.js 폴더를 커밋하고 main에 푸시한다. 저장 방법은 GitHub · 저장과 동기화에 있다.
3. Vercel이 다시 빌드해 운영 주소에 반영한다. 미리보기와 운영의 차이는 Vercel · 미리보기·운영에 있다.

HTML 파일을 FileZilla로 올리는 단계는 없다. 올리는 대상은 Next.js 저장소의 변경이다.

다시 요청할 때

문구 하나를 고치려고 변환을 처음부터 다시 요청하지 않는다. 페이지가 어긋났을 때만 그 페이지 이름과 누른 버튼을 적어 그 부분만 요청한다.

데이터베이스가 없는 화면의 유지보수에 Supabase를 끼워 넣지 않는다. 화면이 열린 뒤에 연결은 따로 한다.

Next.js 폴더: (create-next-app으로 만든 경로)
고칠 페이지: app/about/page.js
바꿀 내용: (문구, 링크, 버튼 동작)

이 페이지만 고쳐 줘.
- 정적 HTML과 다른 프로젝트 폴더는 수정하지 마.
- CSS와 공통 레이아웃은 이 수정에 필요하면만 건드려 줘.
- npm run dev로 그 페이지의 링크와 버튼을 확인해 줘.