Next.js가 뭔데? 왕초보가 이해한 방식으로 설명

Next.js를 요리에 비유하면

프로그래밍 용어를 처음 접하면 "그래서 그게 뭔데?" 하는 순간이 반복됩니다. 저도 그랬습니다. 그래서 요리에 비유해서 설명해보겠습니다.

웹사이트를 만드는 건 요리를 하는 것과 비슷합니다:

• HTML = 재료 (고기, 야채, 밥 등). 웹페이지의 뼈대를 이루는 요소들입니다.
• CSS = 플레이팅과 그릇. 같은 요리도 예쁜 접시에 담으면 다르죠? 디자인을 담당합니다.
• JavaScript = 조리 과정. 재료를 볶고, 끓이고, 굽는 것처럼 웹페이지에 움직임과 기능을 더합니다.
• React = 체계적인 레시피북. 요리(코드)를 효율적으로 관리하는 방법을 알려줍니다.
• Next.js = 풀옵션 주방 세트. 오븐, 냉장고, 식기세척기까지 다 갖춘 주방처럼, 웹 개발에 필요한 도구를 한꺼번에 제공합니다.

즉, Next.js는 "웹사이트를 만들기 위한 올인원 도구 세트"라고 생각하시면 됩니다.

React와 Next.js는 뭐가 다를까?

많은 분들이 "React랑 Next.js는 뭐가 다른 건가요?" 하고 궁금해하십니다. 간단하게 설명하면:

• React는 레시피(라이브러리)입니다. 요리법은 알려주지만, 주방은 직접 구해야 합니다.
• Next.js는 React를 기반으로 한 프레임워크입니다. 레시피도 있고, 주방(서버)도 제공하고, 배달(배포) 서비스까지 연결해줍니다.

실제로 React만으로 웹사이트를 만들면 라우팅(페이지 이동), SEO 최적화, 서버 사이드 렌더링 등을 직접 설정해야 합니다. Next.js는 이런 것들을 기본으로 제공해줍니다.

Next.js의 핵심 장점 4가지

1. 파일 기반 라우팅

폴더를 만들면 자동으로 URL이 생깁니다. 예를 들어 app/blog/page.tsx 파일을 만들면 /blog 주소가 자동으로 생기는 거죠. 별도 설정이 필요 없어서 매우 편리합니다.

2. SEO 최적화

서버에서 페이지를 미리 만들어서 보내주기 때문에, 구글 같은 검색엔진이 내 글을 잘 찾을 수 있습니다. 블로그에는 정말 중요한 기능입니다.

3. 빠른 속도

Next.js는 필요한 부분만 로딩하는 똑똑한 방식을 사용합니다. 덕분에 페이지가 매우 빠르게 열립니다. 사용자 경험에 큰 차이를 만듭니다.

4. Vercel과의 완벽한 연동

Next.js를 만든 회사인 Vercel에서 무료 호스팅을 제공합니다. GitHub에 코드를 올리면 자동으로 배포됩니다. 서버 관리를 신경 쓸 필요가 없죠.

왜 Next.js를 선택했을까?

제가 블로그 기술 스택으로 Next.js를 선택한 결정적인 이유는 세 가지였습니다:

• SEO가 중요했기 때문에 — 블로그는 검색 유입이 핵심입니다. Next.js의 서버 사이드 렌더링은 이에 딱 맞습니다.
• 무료로 운영 가능 — Vercel 무료 플랜 + Supabase 무료 티어로 비용 0원 운영이 가능합니다.
• 배울 게 많아서 — React, TypeScript, 서버 컴포넌트 등 최신 웹 기술을 한 번에 경험할 수 있습니다.

마치며

Next.js가 처음에는 어렵게 느껴질 수 있습니다. 저도 공식 문서를 읽으면서 모르는 단어가 너무 많아 답답했던 적이 한두 번이 아닙니다. 하지만 실제로 써보면 생각보다 직관적이고, 특히 블로그 같은 콘텐츠 중심 사이트에는 최적의 선택이라고 확신합니다.

다음 글에서는 이 블로그의 데이터를 저장하는 Supabase에 대해 이야기해볼게요. 무료로 백엔드를 구축하는 방법을 알려드리겠습니다!