[Next.js 시리즈 #1] 프롤로그: 왜 Next.js인가? 개발 환경 세팅 및 구조 분석

안녕하세요! 새로운 시작을 앞둔 웹 개발자 여러분을 환영합니다. 웹 개발의 세계는 무척 넓지만, 그중에서도 가장 견고하고 세련된 도구인 Next.js를 선택하신 여러분의 안목은 탁월합니다.

이번 시리즈는 이제 막 커리어를 시작하는 개발 입문자분들의 눈높이에 맞춰, 실제 서비스 가능한 수준의 웹사이트를 함께 만들어가는 과정을 차근차근 기록해 보려 합니다.

Table of Contents

단순히 “유행하니까” 배우는 것이 아닙니다. Next.js는 현대 웹 개발자가 마주하는 고민들을 아주 우아하게 해결해 줍니다.

성장하는 개발자의 필수 역량, SEO: 여러분이 만든 소중한 결과물이 검색 엔진(Google, 네이버 등)에 잘 노출되는 것은 매우 중요합니다. Next.js는 서버 사이드 렌더링(SSR)을 통해 검색 엔진이 여러분의 페이지를 아주 쉽게 읽을 수 있도록 돕습니다.
사용자를 배려하는 속도(Hydration): 서버에서 미리 그려진 화면을 보내주고, 사용자가 화면을 보는 동안 필요한 기능을 조용히 연결하는 ‘하이드레이션’ 기술을 사용합니다. 덕분에 사용자는 기다림 없는 쾌적한 환경을 경험하게 됩니다.
복잡한 설정을 대신 해주는 친절함: 이미지 최적화, 폰트 로딩, 코드 나누기 등 고난도의 최적화 작업을 Next.js가 알아서 처리해 줍니다. 여러분은 오직 ‘사용자를 위한 기능’에만 집중하실 수 있습니다.

본격적인 코딩에 앞서, 우리 컴퓨터에 꼭 필요한 도구들을 정중히 초대해 봅시다.

이제 우리의 첫 프로젝트를 생성해 보겠습니다. 터미널을 열고 아래 명령어를 정성껏 입력해 주세요.

npx create-next-app@latest

최근 Next.js는 입문자분들을 위해 권장 설정(Recommended Defaults)이라는 친절한 선택지를 제공합니다. 실행 시 아래와 같이 진행해 보세요.

이 “Yes” 한 번으로 TypeScript, Tailwind CSS, App Router 등 업계 표준 기술들이 여러분의 프로젝트에 완벽하게 세팅됩니다.

처음 폴더를 열면 수많은 파일에 당황하실 수 있습니다. 하지만 핵심은 간단합니다. 우리가 자주 들러야 할 소중한 공간들을 소개합니다.

📁 app (우리 프로젝트의 심장):
- layout.tsx: 서비스의 ‘전체 틀’입니다. 모든 페이지에 공통으로 들어갈 헤더, 푸터, 폰트 설정을 여기서 관리합니다. 마치 건물의 뼈대와 같습니다.
- page.tsx: 사용자가 주소를 입력했을 때 가장 먼저 마주하는 ‘첫 화면’입니다. 우리의 첫 인사가 담길 곳이죠.
- globals.css: 프로젝트 전체의 옷을 입히는 스타일 시트입니다.
📁 public: 이미지나 로고처럼 변하지 않는 정적 자산들을 보관하는 창고입니다.
📄 next.config.mjs: Next.js의 세부 동작을 제어하는 마법의 설정 파일입니다.
📄 package.json: 우리 프로젝트에 어떤 도구들이 설치되어 있는지 적혀 있는 명부입니다.

이제 준비된 구조를 바탕으로 실제 화면을 띄워볼 시간입니다.

cd my-next-web
npm run dev

터미널에 실행 메시지가 뜨면 브라우저 주소창에 http://localhost:3000을 입력해 보세요. Next.js의 환영 인사가 보인다면, 축하드립니다! 여러분은 방금 훌륭한 웹 개발의 세계에 정식으로 입성하셨습니다.

학습하다가 막히는 부분이 생기면 가장 정확한 정보가 담긴 공식 문서를 확인하는 습관을 들이는 것이 좋습니다.

첫걸음을 떼는 것은 누구에게나 낯설고 설레는 일입니다. 지금은 비록 하얀 바탕의 기본 페이지뿐이지만, 이 빈 도화지에 여러분만의 가치 있는 기능들을 하나씩 채워 나갈 것입니다.

다음 포스팅인 [2부: App Router 구조 설계 및 레이아웃 만들기]에서는 오늘 살펴본 layout.tsx를 직접 수정하여, 우리 웹사이트의 얼굴이 될 상단 메뉴(Header)와 하단 정보(Footer)를 직접 구현해 보겠습니다.

여러분의 새로운 도전을 진심으로 응원합니다.

감사합니다.

다른 글도 함께 읽어보세요