Next.js 라우터는 클라이언트 측 탐색과 함께 서버 중심 라우팅을 사용합니다. 즉각적인 로딩 상태 및 동시 렌더링을 지원합니다. 이는 내비게이션이 클라이언트 측 상태를 유지하고 비용이 많이 드는 재 렌더링을 피하며, 중단 가능하며, 경쟁 조건을 발생시키지 않는다는 것을 의미합니다. 라우트 간 이동하는 두 가지 방법이 있습니다: 컴포넌트 useRouter 훅 컴포넌트 은 Next.js에서 라우트 간 이동을 위한 주요 방법입니다. 은 HTML 요소를 확장하여 라우트 간의 사전 로드(prefetching)와 클라이언트 측 탐색을 제공하는 React 컴포넌트입니다. 를 사용하려면 next/link에서 가져와서 컴포넌트에 href 속성을 전달하세요: /* app/page.tsx */ import Link fr..
모든 어플리케이션의 뼈대는 라우팅입니다. 이번 페이지에서는 웹 라우팅의 기본적인 컨셉과 NextJS에서 라우팅을 어떻게 사용하는 소개합니다. 용어(Terminology) 설명서 전체에서 아래 이미지에 있는 용어가 사용됩니다. Tree (트리): 계층 구조를 시각화하기 위한 관례입니다. 예를 들어, 부모 및 자식 컴포넌트로 이루어진 컴포넌트 트리, 폴더 구조 등이 있습니다. Subtree (서브트리): 새로운 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다. Root (루트): 트리나 서브트리에서의 첫 번째 노드로, 루트 레이아웃과 같은 역할을 합니다. Leaf (리프): 자식이 없는 서브트리의 노드로, URL 경로에서의 마지막 세그먼트 등이 있습니다. URL Segment (URL ..
시스템 요구 사항 Node.js 16.8 이상 macOS, Windows (WSL 포함), Linux을 지원합니다. 자동 설치 방법 새로운 Next.js 앱을 만드는 것을 추천하는 create-next-app을 사용하여 자동으로 모든 것을 설정합니다. 프로젝트를 만들려면 다음을 실행합니다: npx create-next-app@latest 설치 중에 다음과 같은 프롬프트가 표시됩니다: What is your project named? [프로젝트 이름] Would you like to use TypeScript with this project? Yes Would you like to use ESLint with this project? Yes Would you like to use Tailwind CSS w..
Next.js은 무엇인가? Next.js는 React 컴포넌트를 사용하여 웹 애플리케이션을 구축할 수 있는 프레임워크입니다. 내부에서 번들링, 컴파일 등의 도구를 추상화하고 자동으로 구성하여 애플리케이션 구축에 집중할 수 있습니다. 개인 개발자 또는 대규모 팀 모두 Next.js를 사용하여 대화형, 동적 및 빠른 웹 애플리케이션을 구축할 수 있습니다. 주요 기능 특징 설명 라우팅 (Routing) 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터로, 레이아웃, 중첩된 라우팅, 로드 상태, 오류 처리 등을 지원합니다. 렌더링 (Rendering) Next.js에서 클라이언트 측 및 서버 측 렌더링을 지원하며, 클라이언트와 서버 컴포넌트를 사용하여 더욱 최적화된 정적 및 동적 렌더링을 제공합니다. 또한 ..
