시작하기
Next.js 문서에 오신 것을 환영합니다!
Next.js란 무엇인가요?
Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. 사용자 인터페이스를 만들기 위해 React Components를 사용하고, 추가 기능과 최적화를 위해 Next.js를 사용합니다.
내부적으로 Next.js는 번들링, 컴파일링 등 React에 필요한 도구를 추상화하고 자동으로 구성합니다. 이를 통해 설정에 시간을 들이지 않고 애플리케이션 구축에 집중할 수 있습니다.
개인 개발자든 대규모 팀의 일원이든, Next.js는 인터랙티브하고 동적이며 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다.
주요 기능
Next.js의 주요 기능은 다음과 같습니다:
| 기능 | 설명 |
|---|---|
| 라우팅 | 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 Server Components 기반의 파일 시스템 라우터입니다. |
| 렌더링 | Client 및 Server Components를 사용한 클라이언트 및 서버 측 렌더링. Static 및 Dynamic 렌더링으로 서버에서 추가 최적화. Edge 및 Node.js 런타임에서 스트리밍. |
| 데이터 가져오기 | Server Components에서 async/await을 사용한 간단한 데이터 가져오기와 요청 메모이제이션, 데이터 캐싱 및 재검증을 위한 확장된 fetch API. |
| 스타일링 | CSS Modules, Tailwind CSS, CSS-in-JS를 포함한 선호하는 스타일링 방법 지원. |
| 최적화 | 애플리케이션의 Core Web Vitals와 사용자 경험을 향상시키기 위한 이미지, 폰트, 스크립트 최적화. |
| TypeScript | 향상된 타입 검사 및 더 효율적인 컴파일, 맞춤형 TypeScript 플러그인과 타입 검사기를 통한 TypeScript 지원 개선. |
문서 사용 방법
화면 왼쪽에서 문서 네비게이션 바를 찾을 수 있습니다. 문서 페이지는 기본적인 내용부터 고급 내용까지 순차적으로 구성되어 있어 애플리케이션을 구축할 때 단계별로 따라 할 수 있습니다. 하지만 필요한 페이지를 아무 순서로나 읽거나 필요한 부분만 건너뛰어 읽을 수 있습니다.
화면 오른쪽에는 페이지 내 섹션 간 쉽게 이동할 수 있도록 도와주는 목차가 있습니다. 빠르게 페이지를 찾아야 할 경우 상단의 검색 창이나 검색 단축키(Ctrl+K 또는 Cmd+K)를 사용할 수 있습니다.
시작하려면 설치 가이드를 확인하세요.
App Router vs Pages Router
Next.js에는 두 가지 다른 라우터가 있습니다: App Router와 Pages Router. App Router는 Server Components와 Streaming과 같은 React의 최신 기능을 사용할 수 있는 새로운 라우터입니다. Pages Router는 서버 렌더링된 React 애플리케이션을 구축할 수 있게 해주는 원래의 Next.js 라우터로, 이전 Next.js 애플리케이션을 위해 계속 지원됩니다.
사이드바 상단에는 App Router와 Pages Router 기능 간 전환할 수 있는 드롭다운 메뉴가 있습니다. 각 디렉토리에 고유한 기능이 있으므로 선택한 탭을 잘 확인하는 것이 중요합니다.
페이지 상단의 탐색 표시줄도 App Router 문서를 보고 있는지 Pages Router 문서를 보고 있는지 표시됩니다.
사전 지식
우리의 문서는 초보자 친화적으로 설계되었지만, 문서가 Next.js 기능에 집중할 수 있도록 기본적인 지식을 확립할 필요가 있습니다. 새로운 개념을 도입할 때마다 관련 문서에 대한 링크를 제공하겠습니다.
문서를 최대한 활용하려면 HTML, CSS 및 React에 대한 기본적인 이해가 필요합니다. React 기술을 보충해야 하는 경우, React Foundations Course를 확인하여 기본을 익히세요. 그런 다음, 대시보드 애플리케이션 구축을 통해 Next.js에 대해 더 알아보세요.
접근성
문서를 읽을 때 화면 판독기를 사용할 경우 최적의 접근성을 위해 Firefox와 NVDA, 또는 Safari와 VoiceOver를 사용할 것을 권장합니다.
커뮤니티 참여
Next.js와 관련된 질문이 있다면 언제든지 GitHub Discussions (opens in a new tab), Discord (opens in a new tab), Twitter (opens in a new tab) 및 Reddit (opens in a new tab)에서 커뮤니티에 물어보세요.