Next.js, 화면과 서버를 한 번에

이 장의 내용 · 5

웹사이트는 두 부분으로 나뉩니다. 눈에 보이는 화면(프론트엔드)과, 보이지 않는 곳에서 데이터를 저장하고 처리하는 서버(백엔드)입니다. 예전에는 둘을 따로 만드는 경우가 많았는데, Next.js는 둘을 한 프로젝트에서 만들 수 있게 해 줍니다.

Next.js는 React라는 화면 도구를 바탕으로 한 웹 프레임워크입니다.

12.1폴더가 곧 주소입니다

Next.js의 App Router 방식에서는 app 폴더 안의 폴더 구조가 그대로 사이트 주소가 됩니다.

코드

app/page.tsx              →  사이트.com/
app/blog/page.tsx         →  사이트.com/blog
app/blog/[slug]/page.tsx  →  사이트.com/blog/글주소

"후기 페이지 만들어 줘"라고 하면 AI가 app/reviews/page.tsx 파일을 만드는 식입니다. 파일 위치만 봐도 어떤 페이지인지 알 수 있어서, AI가 만든 코드를 따라가기 쉽습니다.

컴포넌트: 화면을 이루는 레고 블록입니다. 버튼, 카드, 헤더를 한 번 만들어 두면 여러 페이지에서 다시 씁니다.
서버에서 그리기: Next.js는 화면을 서버에서 미리 만들어 보내는 방식을 기본으로 씁니다. 첫 화면이 빨리 뜨고, 검색 엔진도 내용을 잘 읽습니다.
서버 액션: 폼을 제출했을 때 서버에서 실행할 일을 같은 프로젝트 안에 함수로 적습니다. 비밀 키16장가 필요한 일처럼 브라우저에 보이면 안 되는 일은 서버 쪽에서 처리합니다.

바이브공장장 홈페이지도 Next.js로 만들었습니다. 기수 선택 화면, 신청 폼, 결제 확인, 관리자 페이지가 모두 한 프로젝트 안에 있습니다.

코드

npm install      필요한 도구 설치 (처음 한 번)
npm run dev      개발 서버 켜기

터미널1장에 나오는 주소(보통 http://localhost:3000)를 브라우저에서 열면 내 사이트가 보입니다. 코드를 고치고 저장하면 화면이 바로 바뀝니다. 끌 때는 터미널에서 Ctrl + C를 누릅니다.

13장에서는 Next.js로 만든 화면에 옷을 입히는 도구, Tailwind CSS를 알아보겠습니다.

— 12장 끝 —