소개

Next.js 문서에 오신 것을 환영합니다!

Next.js란 무엇인가요?

Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. React 컴포넌트를 사용하여 사용자 인터페이스를 구축하고, Next.js를 사용하여 추가 기능과 최적화를 수행합니다.

내부적으로 Next.js는 React에 필요한 번들링, 컴파일 등의 도구를 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 쏟는 대신 애플리케이션 구축에 집중할 수 있습니다.

개인 개발자이든 대규모 팀의 일원이든, Next.js는 대화형, 동적, 그리고 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다.

주요 기능

Next.js의 주요 기능은 다음과 같습니다:

이 문서 사용 방법

화면 왼쪽에서 문서 내비게이션 바를 찾을 수 있습니다. 문서의 페이지들은 기본부터 고급까지 순차적으로 구성되어 있어, 애플리케이션을 구축할 때 단계별로 따라갈 수 있습니다. 그러나 원하는 순서로 읽거나 사용 사례에 맞는 페이지로 바로 이동할 수 있습니다.

화면 오른쪽에는 페이지 내 섹션 간 이동을 쉽게 해주는 목차가 있습니다. 페이지를 빠르게 찾아야 할 경우, 상단의 검색 바를 사용하거나 검색 단축키(Ctrl+K 또는 Cmd+K)를 사용할 수 있습니다.

시작하려면 설치 가이드를 확인하세요.

App Router vs Pages Router

Next.js에는 두 가지 다른 라우터가 있습니다: App Router와 Pages Router입니다. App Router는 서버 컴포넌트 및 스트리밍과 같은 React의 최신 기능을 사용할 수 있게 해주는 새로운 라우터입니다. Pages Router는 원래의 Next.js 라우터로, 서버 렌더링 React 애플리케이션을 구축할 수 있게 해주며 기존 Next.js 애플리케이션을 위해 계속 지원됩니다.

사이드바 상단에 App Router와 Pages Router 기능 사이를 전환할 수 있는 드롭다운 메뉴가 있습니다. 각 디렉토리에 고유한 기능이 있으므로 어떤 탭이 선택되어 있는지 주의해야 합니다.

페이지 상단의 이동 경로(breadcrumbs)도 App Router 문서를 보고 있는지 Pages Router 문서를 보고 있는지 표시합니다.

사전 지식

우리의 문서는 초보자 친화적으로 설계되었지만, 문서가 Next.js 기능에 집중할 수 있도록 기본적인 기준을 설정해야 합니다. 새로운 개념을 소개할 때마다 관련 문서에 대한 링크를 제공할 것입니다.

문서를 최대한 활용하려면 HTML, CSS, React에 대한 기본적인 이해가 필요합니다. React 기술을 다시 익혀야 한다면, 기본 사항을 소개하는 React 기초 과정을 확인하세요. 그런 다음 대시보드 애플리케이션 구축을 통해 Next.js에 대해 더 자세히 알아보세요.

접근성

문서를 읽을 때 스크린 리더를 사용하여 최적의 접근성을 확보하려면 Firefox와 NVDA, 또는 Safari와 VoiceOver를 사용하는 것을 권장합니다.

커뮤니티에 참여하세요

Next.js와 관련된 질문이 있다면 언제든지 GitHub Discussions, Discord, Twitter, Reddit에서 우리 커뮤니티에 물어보세요.