파일에서 페이지로

정적 파일	Next.js
index.html	app/page.js. 주소는 /
about.html	app/about/page.js. 주소는 /about
모든 페이지의 머리글·바닥글	app/layout.js. html과 body는 여기만 둔다
반복되는 카드	components 안의 함수 컴포넌트
style.css	파일을 복사하고 layout.js에서 불러온다. 규칙을 새로 짜지 않는다
이미지	public에 두고 src="/파일명"으로 연결한다

페이지 안 링크는 <a href="/webdev/nextjs/convert/about"> 대신 Link와 href="/about"를 쓴다. JSX에서는 class가 className, for가 htmlFor다. 반환은 부모 하나다. 이 문법은 React · 컴포넌트·JSX에 있다.

스크립트

document.querySelector로 글을 바꾸고 입력을 읽는 코드는 'use client' 파일의 useState와 이벤트로 다시 쓴다. 상태 예제는 React · 상태·이벤트에 있다.

jQuery나 페이지마다 따로 있는 스크립트는 동작을 하나씩 확인해야 한다. 라이브러리 태그를 페이지에 그대로 붙여 두는 것은 변환이 아니다.

클릭이 없는 제목과 문단은 서버 컴포넌트로 둔다. 'use client'는 입력과 클릭이 있는 파일에만 붙인다. 기준은 React · Next.js에서와 같다.

주의

• 상대 경로 ../img/a.png는 라우트가 깊어지면 깨진다. 이미지는 public으로 모은다.
• 변환이 끝날 때까지 정적 원본은 남긴다. 브라우저에서 링크와 버튼을 확인한 뒤에 지운다.
• 데이터베이스가 없으면 이 단계에서 Supabase를 붙이지 않는다. 화면이 열린 뒤에 따로 연결한다.
• 키와 비밀번호는 페이지 소스에 복사하지 않는다.