출시·고도화 중
Framework · 2016년 공개
Next.js는 파일 기반 라우팅, 서버 렌더링, Server Component, 내장 최적화를 갖춘 React 프레임워크로, 웹사이트부터 풀스택 웹 앱까지 만듭니다.
Next.js는 Vercel이 만든 오픈 소스 React 프레임워크로, 2016년에 처음 공개되었습니다. React만으로는 직접 골라 조합해야 하는 라우팅, 서버 렌더링, 정적 생성, 데이터 가져오기, 빌드 도구를 하나로 묶어 제공합니다. 현재 권장되는 App Router는 React Server Components를 바탕으로 하며, app 폴더의 구조로 주소를 정하고 서버 코드와 클라이언트 코드를 한 프로젝트 안에서 함께 작성하게 해 줍니다.
Next.js는 성능과 검색 노출이 모두 중요한 곳에서 특히 강합니다. 회사 소개 사이트, 블로그와 문서 사이트, 온라인 쇼핑몰, SaaS 대시보드 등에 널리 쓰입니다. 라우트마다 빌드할 때 미리 만들지, 요청마다 렌더링할지 정할 수 있고, 느린 부분은 스트리밍으로 나눠 보낼 수 있습니다. Server Action과 Route Handler로 폼과 API까지 처리하므로 화면과 그 화면을 위한 백엔드를 한 코드베이스에서 다룰 수 있으며, 이미지 · 글꼴 · 스크립트 최적화도 기본으로 들어 있습니다.
시작하려면 Node.js를 설치하고 create-next-app으로 프로젝트를 만든 뒤, 공식 문서의 Getting Started와 무료 강좌 Learn Next.js를 차례로 따라가 보기를 권합니다. React의 컴포넌트, props, 훅을 알고 있으면 훨씬 수월하므로, React가 처음이라면 기초부터 익혀 두는 것이 좋습니다. TypeScript를 별도 설정 없이 지원하며, 새 프로젝트에는 TypeScript 사용을 권장합니다.
app 폴더 안의 폴더와 page, layout, loading, error 같은 특별한 파일로 주소, 중첩 레이아웃, 로딩 화면, 오류 화면을 정합니다.
컴포넌트는 기본적으로 서버에서 렌더링되어 브라우저로 자바스크립트를 보내지 않고, "use client"로 표시한 부분만 브라우저에서 실행됩니다.
라우트마다 정적 생성, 요청 시점 렌더링, 스트리밍을 섞어 쓰고, 캐시와 재검증으로 내용을 최신 상태로 유지합니다.
이미지 · 글꼴 · 스크립트 컴포넌트, 자동 코드 분할, 링크 미리 가져오기, Turbopack으로 빠른 빌드와 화면 갱신을 제공합니다.
nodejs.org에서 Node.js LTS 버전을 설치하고 터미널에서 버전을 확인합니다. npm이 함께 설치되며, pnpm · Yarn · Bun을 써도 됩니다.
node --versioncreate-next-app으로 새 프로젝트를 만듭니다. 권장 기본값을 고르면 TypeScript, ESLint, Tailwind CSS, App Router가 함께 설정됩니다.
npx create-next-app@latest my-app프로젝트 폴더로 들어가 개발 서버를 실행하고 브라우저에서 http://localhost:3000을 엽니다. 파일을 저장하면 화면이 바로 갱신됩니다.
cd my-app && npm run devApp Router에서 app/page.tsx는 첫 화면(/)입니다. 기본으로 내보내는 React 컴포넌트가 그 페이지가 되며, 여기서는 제목 하나를 돌려주는 Server Component입니다. 파일을 저장하면 브라우저가 바로 갱신되고, app/about/page.tsx를 추가하면 /about 페이지가 새로 생깁니다.
app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
npx create-next-app@latest my-app && cd my-app && npm run dev설치부터 Next.js 의 핵심 개념까지, 여섯 장으로 차근차근 따라 합니다.
Next.js 에 관해 묻고, 경험을 나누고, 의견을 주고받는 곳입니다.
아직 토론이 없습니다. 첫 이야기를 시작해 보세요.
댓글 0개
로그인 · 로그인하면 댓글을 남길 수 있습니다.
첫 댓글을 남겨 보세요.