프로그래밍 언어와 프레임워크
Next.js
Next.js은(는) 바이브 코딩 중 자주 마주치는 핵심 개념입니다. 정의만 외우기보다 실제 작업 흐름에서 어떤 역할을 하는지 이해하는 것이 중요합니다.
쉬운 설명
React 기반으로 웹사이트와 웹앱을 만드는 프레임워크.
배경과 쓰임까지 이해하기
조금 더 자세히
Next.js는 리액트(React)에 실제 웹서비스 운영에 필요한 기능을 더해주는 프레임워크입니다. 보통 리액트(React)만으로도 화면은 만들 수 있지만, 페이지 주소, 서버 렌더링, 데이터 로딩, API 라우트, SEO, 배포 구조까지 다루려면 추가 설계가 필요합니다. Next.js는 이런 부분을 한 프로젝트 안에서 처리할 수 있게 해줍니다.
예를 들어 블로그, SaaS 대시보드, 로그인 있는 웹앱, 쇼핑몰, 문서 사이트, AI 챗봇 UI 등을 만들 때 자주 사용됩니다. 서버 컴포넌트와 클라이언트 컴포넌트의 실행 위치를 구분하는 것이 중요합니다. 한마디로, Next.js는 리액트(React) 앱을 실제 서비스로 만들기 위한 웹 프레임워크입니다.
실제로는 이렇게 만나요
`/terms/[slug]` 같은 동적 라우트를 만들고, 각 용어 페이지를 SEO-friendly하게 생성할 수 있습니다.
- 이런 거 할 때 나와요 단순한 화면을 넘어 로그인, 데이터 로딩, SEO, 서버 기능이 필요해지면 Next.js 같은 프레임워크가 자주 선택됩니다.
- 이렇게 생겼어요 Next.js은(는) React, Vercel, Build 같은 주변 개념과 함께 문서, 설정 화면, 오류 메시지에서 자주 보입니다.
- 나오는 화면 예시 프로그래밍 언어와 프레임워크 작업을 하다가 React, Vercel, Build를 확인하는 화면
헷갈리기 쉬운 점
서버 컴포넌트와 클라이언트 컴포넌트의 경계를 모르면 오류가 납니다. 브라우저 API를 쓰는 코드는 클라이언트에서만 실행해야 합니다.
왜 알아두면 좋을까요?
단순한 화면을 넘어 로그인, 데이터 로딩, SEO, 서버 기능이 필요해지면 Next.js 같은 프레임워크가 자주 선택됩니다.
Checklist
실제로 볼 때 확인할 것
- 01
라우트 구조를 먼저 잡는다
- 02
서버/클라이언트 실행 위치를 구분한다
- 03
메타데이터와 캐싱 전략을 함께 설계한다