한 줄로

화면을 HTML, CSS, JavaScript로 먼저 만든 뒤, 그 파일을 Next.js 페이지와 React 컴포넌트로 다시 짤 수 있다. 변환은 빈 폴더에 만들어 둔 Next.js 앱 안에서 한다.

순서

1. 정적 파일로 화면과 동작을 확정한다. 파일 구성은 정적 사이트 · 파일에 있다.
2. 그 폴더와 분리된 빈 위치에 npx create-next-app@latest로 앱을 만든다. 고르는 항목은 준비에 있다.
3. HTML은 페이지로, 반복 블록은 컴포넌트로, 클릭과 입력은 useState로 옮긴다. 대응은 대응·주의에 있다.
4. 두 폴더 경로와 지킬 동작을 문장으로 적어 변환을 요청한다. 문장 틀은 요청에 있다.
5. npm run dev로 링크와 버튼을 눌러 본 뒤에, 정적 원본을 지울지 정한다.
6. 그 다음부터는 Next.js 폴더만 고친다. 고치는 위치는 유지보수에 있다.

이 변환의 대상

대상은 브라우저가 바로 여는 HTML, CSS, JavaScript다. Java로 이미 동작하는 Spring Boot 앱은 대상이 아니다. 그 앱은 화면, 로그인, 데이터베이스, 배포가 다른 구조라 파일을 페이지로 옮기는 작업이 되지 않는다.

React 문법 자체는 React 강좌에 있다. 이 묶음은 그 문법으로 정적 파일을 옮길 때의 절차만 다룬다.