Nextjs 초보자를 위한 입문서

Nextjs 초보자를 위한 입문서
Cozy CodingPosted On Jul 23, 20242 min read

소개

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

Next.js란 무엇인가요?

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

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

개발자 개인이거나 대규모 팀의 구성원이더라도, Next.js를 사용하면 인터랙티브하고 동적이며 빠른 React 애플리케이션을 개발할 수 있습니다.

주요 기능

주요 Next.js 기능 중 일부는 다음과 같습니다:

이 문서의 사용 방법

화면 왼쪽에는 문서 내비게이션 바가 있습니다. 문서 페이지는 기본부터 고급까지 순차적으로 구성되어 있어서 애플리케이션을 개발할 때 단계별로 따라갈 수 있습니다. 그러나 임의로 읽거나 사용 사례에 해당하는 페이지로 건너뛸 수도 있습니다.

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

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

앱 라우터 대 페이지 라우터

Next.js에는 두 가지 다른 라우터가 있습니다: 앱 라우터와 페이지 라우터입니다. 앱 라우터는 React의 최신 기능인 Server Components 및 Streaming과 같은 기능을 사용할 수 있는 새로운 라우터입니다. 페이지 라우터는 오리지널 Next.js 라우터로서, 서버 렌더링된 React 애플리케이션을 구축할 수 있게 해주는 기존 라우터로, 이전 버전의 Next.js 애플리케이션에 대해 계속 지원됩니다.

사이드바 상단에는 앱 라우터와 페이지 라우터 기능을 전환할 수 있는 드롭다운 메뉴가 있습니다. 각 디렉토리마다 고유한 기능이 있기 때문에 선택된 탭을 계속해서 추적하는 것이 중요합니다.

페이지 상단의 크럼블은 앱 라우터 문서 또는 페이지 라우터 문서를 보고 있는지를 나타냅니다.

사전 요구 지식

우리의 문서는 초보자를 대상으로 설계되었지만, Next.js 기능에 집중할 수 있도록 기준을 마련해야 합니다. 새로운 개념을 소개할 때마다 관련 문서에 대한 링크를 제공할 것이므로 안심해 주세요.

최대한 우리 문서를 활용하기 위해서는 HTML, CSS 및 React의 기본적인 이해가 권장됩니다. React 스킬을 다시 키우고 싶다면 React 기초 과정을 확인해 보세요. 그리고 다음으로 대시보드 애플리케이션을 만들면서 Next.js에 대해 더 많이 익히세요.

접근성

문서를 읽을 때 스크린 리더를 사용하는 경우, Firefox와 NVDA 또는 Safari와 VoiceOver를 사용하는 것이 가장 접근성을 높일 수 있습니다.

커뮤니티 가입하기

Next.js에 관련된 모든 것에 대한 질문이 있으면 언제든지 GitHub 토론, Discord, Twitter 및 Reddit 커뮤니티에서 질문할 수 있습니다.