React를 조금 배우고 나면 꼭 한 번 이런 생각이 듭니다.
"컴포넌트는 알겠는데, 이제 페이지는 어떻게 나누지?" "주소 이동은 어떻게 하지?" "검색엔진에는 잘 보일까?" "데이터는 어디서 가져오고, 서버 코드는 또 어떻게 붙이지?"
바로 이 지점에서 Next.js가 등장합니다. Next.js는 React를 버리고 새로 배우는 완전히 다른 세계가 아닙니다. 오히려 React를 실전에서 더 잘 쓰게 도와주는 든든한 도구 상자에 가깝습니다. 공식 문서도 Next.js를 "풀스택 웹 애플리케이션을 만들기 위한 React 프레임워크"라고 설명합니다.1
이번 챕터의 목표는 단순합니다. "왜 굳이 Next.js를 배워야 하지?"라는 질문에, 초보자도 고개를 끄덕일 수 있게 답하는 것입니다.
React는 좋은데, 왜 Next.js가 또 필요할까요?
React는 사용자 화면을 잘 만들게 도와주는 도구입니다. 버튼, 카드, 목록, 입력창 같은 UI를 컴포넌트라는 작은 조각으로 나눠 만드는 데 정말 강합니다. 문제는 웹사이트나 웹앱은 화면만 있다고 끝나지 않는다는 점입니다.
실제 서비스에는 이런 것들이 함께 필요합니다.
페이지 이동과 주소 설계
첫 화면을 빠르게 보여주는 방식
검색엔진이 읽기 쉬운 구조
서버에서 데이터 가져오기
이미지, 폰트, 빌드 최적화
경우에 따라 간단한 API까지
React만으로도 이런 것들을 만들 수는 있습니다. 하지만 하나씩 직접 고르고, 연결하고, 설정해야 합니다. 마치 맛있는 요리를 하려는데 칼, 냄비, 가스레인지, 도마, 접시를 전부 따로 구입해서 배치하는 느낌입니다.
Next.js는 이 과정을 많이 줄여 줍니다. React로 화면을 만들되, 라우팅과 렌더링, 데이터 처리, 최적화 같은 실전 기능을 한 프레임워크 안에 묶어서 제공합니다.1
쉽게 말해 이렇습니다.
React가 "잘 드는 칼"이라면, Next.js는 "조리대까지 갖춘 주방"입니다.
라이브러리와 프레임워크의 차이
초보자에게 이 부분이 가장 헷갈립니다. React는 자주 "라이브러리", Next.js는 "프레임워크"라고 부르는데, 말이 어렵게 느껴질 수 있습니다.
아주 쉽게 풀어보면 이렇습니다.
React는 필요한 기능을 꺼내 쓰는 도구 모음입니다. 내가 구조를 정하고, 필요한 라이브러리를 골라 붙이고, 규칙도 많이 직접 정합니다. 자유도가 높죠.
반면 Next.js는 어느 정도 정해진 길이 있습니다. 폴더 구조, 파일 이름, 라우팅 방식처럼 "이렇게 하면 잘 굴러가요"라는 규칙이 준비되어 있습니다. 대신 그 규칙을 따르면 개발 속도가 빨라지고, 실수도 줄어듭니다.2
처음에는 "규칙이 있으면 답답한 거 아닌가요?"라고 느낄 수 있습니다. 그런데 초보자에게는 오히려 그 반대인 경우가 많습니다. 선택지가 너무 많으면 시작이 더 어렵기 때문입니다. Next.js는 "일단 이 길로 가면 됩니다"라고 손전등을 비춰 주는 편입니다.
Next.js가 특히 빛나는 순간
React만으로도 작은 앱은 충분히 만들 수 있습니다. 하지만 서비스가 조금만 현실에 가까워지면 Next.js의 장점이 분명해집니다.
예를 들어, 우리가 블로그나 소개 페이지, 쇼핑몰, 문서 사이트 같은 것을 만든다고 생각해 봅시다. 이런 서비스는 첫 화면이 빨리 보여야 하고, 검색엔진에도 잘 읽혀야 하며, 페이지 이동도 자연스러워야 합니다. Next.js는 이런 요구를 기본 기능으로 많이 품고 있습니다.1
또한 최신 Next.js는 App Router를 중심으로 발전하고 있습니다. 공식 문서에서도 App Router를 새로운 라우터로 소개하며, Server Components 같은 최신 React 기능을 지원한다고 설명합니다.1
이 말이 처음엔 어려워 보일 수 있습니다. 하지만 지금은 이렇게만 이해해도 충분합니다.
"Next.js는 최신 React의 강한 기능을, 실제 서비스에 쓰기 좋은 모양으로 정리해 둔 프레임워크다."
React와 Next.js의 가장 큰 체감 차이
이제 초보자 입장에서 "그래서 실제로 뭐가 다른데요?"를 이야기해 봅시다.
1. 페이지를 만드는 방법이 더 자연스럽습니다
React만 사용할 때는 보통 라우팅 라이브러리를 추가로 붙여서 주소 이동을 직접 설계합니다. 반면 Next.js는 폴더와 파일 구조를 기반으로 페이지를 만드는 방식이 강력합니다. 예를 들어 app/about/page.tsx 같은 파일을 만들면 /about 페이지가 되는 식입니다.1
초보자 입장에서는 이게 꽤 큽니다. "이 파일이 무슨 페이지지?"가 폴더만 봐도 보이기 때문입니다. 프로젝트 구조를 읽기가 쉬워집니다.
2. 첫 화면을 더 잘 보여줄 수 있습니다
웹페이지는 무조건 브라우저에서만 그려지는 것이 아닙니다. 어떤 페이지는 서버에서 미리 준비해 보내는 편이 더 좋고, 어떤 화면은 브라우저에서 상호작용 중심으로 움직이는 편이 더 좋습니다.
Next.js는 이런 여러 렌더링 방식을 다룰 수 있게 설계되어 있습니다. 그래서 페이지 성격에 맞는 선택이 가능합니다.1
초보자에게 중요한 포인트는 단 하나입니다.
"페이지마다 똑같은 방식으로 만들지 않아도 된다."
공지사항 목록과 관리자 대시보드는 성격이 다르니까요. Next.js는 그 차이를 담기 좋습니다.
3. 검색엔진과 성능을 더 쉽게 챙길 수 있습니다
누군가 내 웹사이트를 검색해서 들어오길 바란다면, 검색엔진이 내용을 잘 읽을 수 있어야 합니다. 그리고 사용자는 페이지가 빨리 뜨길 바랍니다. Next.js는 이런 부분을 고려한 기능들을 기본으로 제공합니다.1
React만으로도 할 수는 있지만, Next.js는 "실전에서 자주 필요한 것"을 미리 준비해 둔 느낌입니다. 마치 운동장에 골대까지 세워 놓은 상태에서 공만 차면 되는 것과 비슷합니다.
4. 프론트엔드와 백엔드의 거리가 가까워집니다
Next.js는 단순히 화면만 그리는 도구가 아닙니다. 공식 문서도 풀스택 웹 애플리케이션을 위한 프레임워크라고 소개합니다.1
이 말은 곧, 간단한 서버 작업이나 API 작성도 한 프로젝트 안에서 다룰 수 있다는 뜻입니다. 물론 큰 서비스에서는 별도 백엔드를 두기도 합니다. 하지만 학습 단계나 작은 프로젝트에서는 "프론트 따로, 백 따로"의 부담을 많이 줄여 줍니다.
초보자에게는 이게 정말 반가운 점입니다. 파일이 여기저기 흩어지지 않고, 한 프로젝트 안에서 흐름을 따라가기 쉬워지기 때문입니다.
최신 버전 관점에서 배우면 좋은 이유
이 책은 최신 Next.js 흐름, 특히 App Router 기준으로 설명할 것입니다. 공식 문서 역시 App Router를 새로운 기준으로 안내하고 있고, Server Components 같은 최신 React 기능도 이 라우터와 함께 설명합니다.1
왜 굳이 최신 기준으로 배워야 할까요?
옛날 방식으로 시작하면 자료는 많아도, 막상 공식 문서를 볼 때 "어? 내가 배운 거랑 다른데?" 하고 멈추는 일이 생깁니다. 반면 최신 기준으로 배우면 앞으로의 문서, 예제, 실무 흐름과 연결되기 쉽습니다.
물론 이전 방식인 Pages Router도 여전히 지원됩니다.1 하지만 이제 막 시작하는 독자라면, 처음부터 현재의 주류 흐름에 익숙해지는 편이 더 유리합니다.
그런데 Next.js가 항상 정답일까요?
여기서 솔직한 이야기도 해야 합니다.
Next.js가 만능 망치는 아닙니다. 세상 모든 문제가 Next.js 못 하나로 해결되지는 않습니다. 아주 단순한 화면 몇 개만 있는 프로젝트라면 React만으로도 충분할 수 있습니다. 규칙이 적고 자유로운 구성이 더 편한 경우도 있습니다.
또 Next.js에는 배워야 할 개념이 조금 더 있습니다. 서버와 클라이언트의 차이, 라우팅 규칙, 데이터 가져오기 방식 같은 것들입니다. React만 배울 때보다 처음에는 어깨가 조금 더 무거울 수 있습니다.
하지만 그 무게는 "쓸모 있는 무게"입니다. 실제 웹 서비스를 만들 때 언젠가 마주칠 문제들을, 조금 더 정리된 방식으로 일찍 만나는 셈이니까요.
초보자에게 Next.js가 좋은 진짜 이유
초보자에게 가장 중요한 것은 "기능이 많다"가 아닙니다. "무엇부터 어떻게 시작해야 하는지 보인다"가 더 중요합니다.
Next.js는 그 점에서 꽤 친절합니다.
프로젝트 시작 방법이 분명합니다.
폴더 구조와 라우팅 규칙이 비교적 명확합니다.
화면, 데이터, 서버 기능이 한 흐름 안에서 이어집니다.
공식 문서도 학습 순서를 잘 안내합니다.12
특히 Next.js 한글 문서는 사전 지식으로 HTML, CSS, React 이해가 있으면 좋다고 안내하고, App Router와 Pages Router의 차이도 비교적 분명하게 설명합니다.2 즉, React를 막 배운 사람이 다음 단계로 넘어가기에 꽤 괜찮은 다리라는 뜻입니다.
우리가 이 책에서 Next.js를 배우는 방식
이 책은 설명만 잔뜩 읽고 끝나는 책이 아닙니다. 우리는 직접 하나의 프로젝트를 만들면서 Next.js를 배울 것입니다.
프로젝트 이름은 작은 기록 상점입니다.
이름만 들어도 살짝 귀엽죠. 이 프로젝트를 통해 페이지 만들기, 이동하기, 동적 주소 다루기, 데이터 불러오기, 폼 처리, API 만들기, 배포까지 차근차근 해볼 것입니다.
즉, Next.js를 박물관 유리장 안의 기술로 보지 않고, 손에 묻혀 가며 익히게 됩니다. 초보자에게는 이 방식이 훨씬 오래 남습니다. 설명은 이해한 줄 알았는데, 막상 만들려고 하면 멈추는 일이 많기 때문입니다. 그래서 우리는 "읽고 끝"이 아니라 "읽고 바로 만들어 보기"로 갑니다.
지금은 이것만 기억하면 충분합니다
이번 챕터를 덮기 전에, 머릿속에 딱 세 문장만 남겨 봅시다.
첫째, React는 UI를 잘 만들게 도와주고, Next.js는 그 React를 실제 서비스답게 사용하게 도와준다.
둘째, Next.js는 라우팅, 렌더링, 데이터 처리, 최적화 같은 실전 기능을 미리 준비해 둔 프레임워크다.
셋째, 초보자에게도 어렵기만 한 도구가 아니라, 오히려 길을 보여 주는 좋은 안내판이 될 수 있다.
이제 우리는 "왜 Next.js인가요?"라는 질문에 첫 답을 얻었습니다.
다음 장부터는 진짜로 몸을 움직일 차례입니다. 개발 환경을 준비하고, 첫 프로젝트를 만들고, 폴더 구조를 읽고, 결국엔 우리만의 작은 웹앱을 완성하게 될 것입니다.
React를 배웠다면, 이제 Next.js를 만날 시간입니다.
재밌는 구간은 지금부터 시작입니다.
참고
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.