Next.js가 필요한 경우와 필요하지 않은 경우

먼저 결론부터 말하기

Next.js는 좋은 도구입니다. 하지만 모든 웹사이트에 필요한 도구는 아닙니다.

비개발자에게 가장 중요한 질문은 "이 도구가 좋은가?"가 아닙니다. "내가 만들려는 사이트에 이 정도 도구가 필요한가?"입니다. 컵라면을 끓이려고 전문 주방을 빌릴 필요는 없습니다. 반대로 손님이 계속 늘어날 식당을 만들 계획이라면 처음부터 주방 동선을 생각해야 합니다.

웹사이트도 같습니다. 아주 간단한 소개 페이지라면 노션, 워드프레스, 웹플로우 같은 도구가 더 빠를 수 있습니다. 온라인 쇼핑몰이라면 쇼피파이가 더 현실적일 수 있습니다. 하지만 디자인을 더 자유롭게 바꾸고 싶고, 검색엔진에 잘 보이고 싶고, 여러 페이지를 체계적으로 운영하고 싶다면 Next.js가 좋은 선택이 됩니다.

이번 장의 목표는 Next.js를 무조건 추천하는 것이 아닙니다. 처음부터 너무 어려운 도구를 고르지 않도록, 선택 기준을 세우는 것입니다.

AI 생성 이미지

Next.js가 잘 맞는 사이트

Next.js는 "보여 줄 내용이 있고, 그 내용을 빠르고 보기 좋게 전달해야 하는 사이트"에 잘 맞습니다.

대표적인 예는 다음과 같습니다.

• 회사 소개 사이트

• 제품이나 서비스 랜딩페이지

• 블로그

• 포트폴리오

• 도움말 문서 사이트

• 교육 콘텐츠 사이트

• 예약 안내 페이지

• 이벤트 안내 페이지

• 간단한 회원 전용 페이지가 있는 웹앱

여기서 랜딩페이지는 광고나 검색을 통해 들어온 사람이 처음 보는 홍보용 페이지를 말합니다. 전단지 한 장을 웹으로 만든 것이라고 생각하면 쉽습니다. 서비스의 핵심 설명, 가격, 후기, 신청 버튼이 한 화면 또는 몇 개의 화면에 정리되어 있습니다.

Next.js가 이런 사이트에 잘 맞는 이유는 페이지를 미리 만들어 둘 수 있기 때문입니다. 이를 정적 생성이라고 합니다. 정적 생성은 식당에서 손님이 오기 전에 기본 반찬을 미리 준비해 두는 것과 비슷합니다. 손님이 올 때마다 처음부터 무를 썰고 양념을 만들지 않아도 되니 빠르게 내놓을 수 있습니다.

Next.js 공식 학습 자료에서도 가능한 경우 정적 생성을 권장하며, 마케팅 페이지, 블로그, 제품 목록, 도움말 문서처럼 미리 만들어 둘 수 있는 페이지에 잘 맞는다고 설명합니다.¹ 회사 소개, 서비스 설명, 예약 안내처럼 모든 방문자에게 거의 같은 내용을 보여 주는 페이지라면 이 방식이 특히 잘 어울립니다.

예를 들어 펜션 예약 안내 사이트를 생각해 봅시다.

• 객실 사진

• 위치 안내

• 체크인 시간

• 요금표

• 예약 문의 버튼

• 주변 관광지 소개

이런 내용은 방문자마다 크게 달라지지 않습니다. 매일 실시간으로 새로 계산할 필요도 없습니다. 이런 사이트는 Next.js로 빠르고 깔끔하게 만들기 좋습니다.

다만 위 목록에 있는 "회원 전용 페이지"는 조금 조심해서 이해해야 합니다. 단순히 외부 로그인 서비스와 연결해 일부 화면을 보여 주는 정도라면 Next.js와 잘 맞을 수 있습니다. 하지만 개인정보, 결제 정보, 권한 관리가 깊게 들어가면 비개발자가 혼자 처리하기보다 검증된 서비스나 전문가의 도움을 받는 편이 안전합니다.

Next.js가 꼭 필요하지 않은 경우

반대로, Next.js가 오히려 부담이 되는 경우도 많습니다.

가장 쉬운 판단 기준은 이것입니다.

"템플릿을 조금 고쳐서 빨리 공개하는 것이 더 중요한가, 아니면 구조와 디자인을 직접 통제하는 것이 더 중요한가?"

빨리 공개하는 것이 중요하다면 노코드 도구가 더 낫습니다. 노코드 도구는 코드를 직접 쓰지 않고 화면에서 블록을 조립하듯 사이트를 만드는 도구입니다.

노션이 더 적합한 경우

노션은 내부 문서, 간단한 소개 페이지, 행사 안내, 채용 공고, 자료 모음에 좋습니다.

예를 들어 "이번 주 워크숍 안내 페이지를 오늘 안에 만들어야 한다"면 Next.js보다 노션이 훨씬 빠릅니다. 디자인 자유도는 낮지만 작성과 수정이 쉽습니다. 링크만 공유하면 바로 볼 수 있다는 장점도 큽니다.

워드프레스가 더 적합한 경우

워드프레스는 글을 자주 올리는 블로그나 매거진형 사이트에 좋습니다.

개발보다는 글쓰기, 카테고리 관리, 댓글, 검색, 관리자 화면이 중요하다면 워드프레스가 편합니다. 이미 만들어진 테마와 플러그인도 많습니다. 단, 플러그인을 너무 많이 붙이면 속도나 보안 관리가 어려워질 수 있습니다.

웹플로우가 더 적합한 경우

웹플로우는 디자인을 눈으로 보면서 정교하게 만들고 싶을 때 좋습니다.

디자이너가 직접 랜딩페이지를 만들거나, 애니메이션이 들어간 브랜드 사이트를 빠르게 제작할 때 유용합니다. 코드를 깊게 몰라도 꽤 완성도 높은 화면을 만들 수 있습니다. 다만 특정한 기능을 마음대로 추가하려면 한계가 생길 수 있습니다.

쇼피파이가 더 적합한 경우

쇼피파이는 온라인 쇼핑몰에 특화된 도구입니다.

상품 등록, 장바구니, 결제, 주문 관리, 배송, 할인 쿠폰처럼 쇼핑몰에 꼭 필요한 기능이 이미 준비되어 있습니다. 단순한 쇼핑몰을 만들 계획이라면 Next.js로 처음부터 만드는 것보다 쇼피파이를 쓰는 편이 안전합니다.

결제와 개인정보가 들어가는 기능은 실수가 비용으로 이어질 수 있습니다. 이 부분은 비개발자가 혼자 구현하려 하기보다 검증된 서비스를 쓰거나 전문가와 함께 진행하는 편이 좋습니다.

Next.js를 쓰면 좋은 상황을 더 구체적으로 보기

Next.js가 특히 빛나는 경우는 다음과 같습니다.

검색엔진에 잘 보여야 할 때

구글이나 네이버 검색에서 잘 발견되어야 하는 사이트라면 Next.js가 도움이 됩니다. Next.js는 페이지를 미리 만들거나 서버에서 만들어 브라우저에 전달할 수 있습니다. 그래서 검색엔진이 내용을 읽기 쉬운 형태로 받을 수 있습니다.

물론 Next.js를 쓴다고 검색 순위가 자동으로 올라가지는 않습니다. 좋은 제목, 설명, 콘텐츠, 빠른 속도, 적절한 구조가 함께 필요합니다. 하지만 검색엔진이 읽기 좋은 페이지를 만들기에는 유리한 기반을 제공합니다.

페이지 수가 늘어날 때

처음에는 페이지가 3개뿐이어도, 시간이 지나면 이런 식으로 늘어납니다.

• 서비스 소개

• 가격

• 고객 사례

• 블로그

• 자주 묻는 질문

• 문의하기

• 이벤트 페이지

• 기능별 상세 페이지

이때 복사해서 붙여 넣기로만 관리하면 금방 지칩니다. 버튼 하나를 바꾸려고 여러 페이지를 열어야 합니다. Next.js에서는 반복되는 화면을 컴포넌트로 나눌 수 있습니다. 컴포넌트는 레고 블록 같은 화면 조각입니다. 버튼, 카드, 메뉴, 푸터처럼 반복되는 부분을 하나의 조각으로 만들어 여러 곳에서 다시 씁니다.

이 책의 뒤쪽 장에서 이 개념을 직접 다룰 것입니다. 지금은 "반복되는 화면이 많아질수록 Next.js의 장점이 커진다" 정도만 기억하면 됩니다.

디자인과 구조를 오래 가져가고 싶을 때

노코드 도구는 빠릅니다. 대신 그 도구가 제공하는 방식 안에서 움직여야 합니다. Next.js는 느리게 시작할 수 있지만, 내가 원하는 구조로 쌓아 갈 수 있습니다.

예를 들어 블로그 글을 단순히 나열하는 것에서 끝나지 않고, 나중에 다음 기능을 붙이고 싶을 수 있습니다.

• 글마다 관련 상품 보여 주기

• 카테고리별 추천 콘텐츠 보여 주기

• 이메일 구독 폼 연결하기

• 특정 글을 랜딩페이지처럼 꾸미기

• 외부 CMS와 연결하기

이런 확장 가능성을 생각한다면 Next.js를 배울 가치가 있습니다.

프론트엔드 전용으로 써도 될까?

됩니다. Next.js를 처음 배울 때는 프론트엔드 전용으로 써도 충분합니다.

프론트엔드는 사용자가 보는 화면입니다. 즉, 글자, 이미지, 버튼, 메뉴, 입력창 같은 부분입니다. Next.js로 다음과 같은 일을 할 수 있습니다.

• 홈페이지 화면 만들기

• 여러 페이지 만들기

• 공통 메뉴와 푸터 만들기

• 블로그 글 목록 보여 주기

• 외부 서비스의 데이터를 가져와 보여 주기

• 모바일에서도 보기 좋게 정리하기

이 단계에서는 복잡한 서버 기능을 직접 만들지 않아도 됩니다. 문의 폼은 구글 폼, 타입폼, 설문 도구로 연결할 수 있습니다. 예약은 네이버 예약이나 캘린더 예약 서비스로 연결할 수 있습니다. 결제는 쇼피파이, 스마트스토어, 결제 링크 같은 외부 서비스를 이용할 수 있습니다.

비개발자에게는 이 방식이 매우 현실적입니다. Next.js는 화면과 구조를 담당하고, 어려운 기능은 이미 검증된 외부 서비스에 맡기는 것입니다.

서버 기능까지 쓰면 좋은 경우

Next.js는 화면만 만드는 도구가 아닙니다. 필요한 경우 서버 쪽 기능도 일부 처리할 수 있습니다.

여기서 서버 기능은 손님이 보지 못하는 직원 공간과 비슷합니다. 손님은 카운터에서 주문만 하지만, 안쪽에서는 재고를 확인하고, 주문서를 정리하고, 결제 정보를 처리합니다. 웹사이트에서도 사용자는 버튼만 누르지만, 뒤에서는 데이터 저장, 이메일 발송, 권한 확인 같은 일이 일어납니다.

Next.js의 서버 기능이 도움이 되는 경우는 다음과 같습니다.

• 문의 폼 내용을 받아 이메일로 보내기

• 외부 서비스의 비밀 키를 숨겨서 사용하기

• 로그인한 사용자에게만 특정 페이지 보여 주기

• 관리자용 간단한 데이터 조회 화면 만들기

• 사용자마다 다른 정보를 보여 주기

• 결제 완료 후 결과 페이지 처리하기

다만 여기에는 주의가 필요합니다. 로그인, 결제, 개인정보, 관리자 권한처럼 실수하면 위험한 기능은 혼자 무리하지 않는 편이 좋습니다. 직접 배워서 구조를 이해하는 것은 좋지만, 실제 서비스에 적용할 때는 전문가의 검토를 받는 것이 안전합니다.

Next.js는 정적 생성뿐 아니라 요청이 들어올 때마다 서버에서 페이지를 만드는 방식도 지원합니다. 공식 문서에서도 서버 사이드 렌더링을 사용하는 페이지는 요청이 들어올 때마다 HTML이 생성된다고 설명합니다.² 이런 방식은 방문자마다 다른 정보가 필요하거나, 항상 최신 데이터가 필요한 페이지에 적합합니다. 예를 들어 "내 주문 내역"이나 "나에게만 보이는 대시보드"는 모든 사람에게 같은 페이지를 보여 주면 안 됩니다.

비개발자도 Next.js를 배울 가치가 있을까?

답은 "목표에 따라 다르다"입니다.

단순히 오늘 소개 페이지 하나를 공개해야 한다면 굳이 Next.js를 배울 필요가 없습니다. 노션이나 웹플로우가 더 빠릅니다. 하지만 앞으로 사이트를 계속 운영하고, 화면을 직접 고치고, 개발자와 협업해야 한다면 Next.js를 배울 가치가 있습니다.

세 가지 관점으로 보면 더 분명해집니다.

비용

노코드 도구는 시작 비용이 낮습니다. 서버 설정이나 배포를 몰라도 됩니다. 하지만 기능이 늘어나면 유료 요금제, 플러그인, 외부 연동 비용이 붙을 수 있습니다.

Next.js는 처음 배우는 비용이 있습니다. 작업 환경을 준비하고, 파일을 열고, 에러를 해결해야 합니다. 대신 기본 구조를 이해하면 작은 수정은 직접 할 수 있습니다. 개발자에게 요청할 때도 "메인 페이지의 버튼 문구만 바꾸고 싶다"가 아니라 "홈 화면의 CTA 버튼 문구와 링크를 바꾸고 싶다"처럼 더 정확히 말할 수 있습니다.

자유도

노코드 도구는 빠른 대신 정해진 틀이 있습니다. Next.js는 더 많은 자유를 줍니다. 화면 구조, 주소 체계, 데이터 연결, 배포 방식 등을 원하는 방향으로 설계할 수 있습니다.

물론 자유도는 책임도 함께 가져옵니다. 아무렇게나 만들면 나중에 고치기 어려워집니다. 그래서 이 책에서는 거대한 웹앱이 아니라 작은 홈페이지, 랜딩페이지, 콘텐츠 사이트, 간단한 웹앱을 현실적인 목표로 삼습니다.

유지보수

유지보수는 만든 뒤에 계속 고치고 관리하는 일입니다. 집을 지은 뒤 전구를 갈고, 문고리를 고치고, 청소하는 것과 같습니다.

Next.js 사이트는 한 번 만들어 두면 반복되는 요소를 정리하기 좋습니다. 메뉴, 버튼, 카드, 글 목록 같은 요소를 컴포넌트로 관리할 수 있기 때문입니다. Next.js는 파일 기반 라우팅, 정적 생성, 서버 렌더링, 이미지 최적화 같은 기능을 기본으로 제공해 React만 단독으로 쓸 때보다 많은 준비 과정을 줄여 줍니다.³

하지만 유지보수할 사람이 전혀 없다면 Next.js는 부담이 될 수 있습니다. 코드를 볼 사람이 없고, 작은 수정도 매번 외주를 맡겨야 한다면 노코드 도구가 더 안정적인 선택일 수 있습니다.

선택 체크리스트

아래 질문에 "예"가 많으면 Next.js를 고려해도 좋습니다.

• 검색엔진에서 잘 발견되어야 하나요?

• 디자인과 구조를 내 마음대로 바꾸고 싶나요?

• 페이지가 앞으로 계속 늘어날 가능성이 있나요?

• 블로그, 고객 사례, 도움말처럼 콘텐츠를 쌓아 갈 계획이 있나요?

• 반복되는 화면 요소를 효율적으로 관리하고 싶나요?

• 개발자와 협업할 때 구조를 이해하고 대화하고 싶나요?

• 나중에 외부 데이터나 CMS와 연결할 가능성이 있나요?

반대로 아래 질문에 "예"가 많으면 다른 도구가 더 나을 수 있습니다.

• 오늘이나 내일 바로 공개해야 하나요?

• 디자인을 크게 바꿀 필요가 없나요?

• 글 몇 개와 이미지 몇 장이면 충분한가요?

• 쇼핑몰 기능이 핵심인가요?

• 결제, 배송, 회원 관리가 이미 준비된 서비스가 필요한가요?

• 코드를 관리할 사람이 전혀 없나요?

• 사이트보다 콘텐츠 작성 자체가 더 중요한가요?

이 체크리스트는 정답지가 아닙니다. 도구를 고를 때의 출발점입니다.

이 책에서 선택하는 현실적인 방향

이 책은 Next.js로 거대한 서비스를 만드는 책이 아닙니다. 비개발자가 작은 사이트를 이해하고, 직접 바꾸고, 필요할 때 개발자와 협업할 수 있게 돕는 책입니다.

따라서 우리의 목표는 분명합니다.

직접 할 수 있는 일은 직접 합니다.

• 문구 바꾸기

• 이미지 바꾸기

• 색상과 여백 조정하기

• 새 페이지 추가하기

• 반복되는 화면 정리하기

• 간단한 링크와 버튼 연결하기

• 배포된 사이트 확인하기

전문가에게 맡기면 좋은 일은 구분합니다.

• 결제 기능

• 민감한 개인정보 처리

• 복잡한 로그인과 권한 관리

• 대규모 데이터베이스 설계

• 보안 점검

• 성능 최적화가 중요한 서비스

Next.js는 배우기 쉬운 도구만은 아닙니다. 하지만 배워 두면 웹사이트가 어떻게 구성되는지 이해하는 눈이 생깁니다. 이 눈이 있으면 노코드 도구를 쓰더라도 더 잘 판단할 수 있고, 개발자와 일할 때도 막연한 요청을 줄일 수 있습니다.

다음 장에서는 실제로 Next.js를 만지기 위한 작업 환경을 준비합니다. 아직 코드를 잘 몰라도 괜찮습니다. 처음에는 "무엇을 설치하고, 어디를 열고, 어떤 화면이 나오면 정상인지"만 확인하면 됩니다.

참고

¹Next.js Learn - Two Forms of Pre-rendering

²Next.js Docs - Server-side Rendering

³Contentful - Next.js vs. React