Store Front Framewok (Next.js)

본 가이드는 Next.js(14.2.x), React.js(18.3.x) 버전을 기준으로 작성되었습니다.

Next.js 는 무엇인가요?

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

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

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

주요 특징

Feature	Description
라우팅	레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터입니다.
렌더링	클라이언트 및 서버 구성 요소를 사용한 클라이언트 측 및 서버 측 렌더링. Next.js를 사용하여 서버에서 정적 및 동적 렌더링으로 더욱 최적화되었습니다. Edge 및 Node.js 런타임에서 스트리밍합니다.
데이터 페칭	서버 구성 요소의 async/await를 사용하여 데이터 가져오기를 단순화하고 요청 메모, 데이터 캐싱 및 유효성 재검사를 위한 확장된 가져오기 API를 제공합니다.
스타일링	CSS 모듈, Tailwind CSS, CSS-in-JS 등 선호하는 스타일 지정 방법 지원
최적화	애플리케이션의 핵심 웹 바이탈 및 사용자 경험을 개선하기 위한 이미지, 글꼴 및 스크립트 최적화.
타입스크립트	더 나은 유형 검사, 더 효율적인 컴파일, 사용자 정의 TypeScript 플러그인 및 유형 검사기를 통해 TypeScript에 대한 지원이 향상되었습니다.

App Router 와 Pages Router 비교

Next.js에는 앱 라우터(App Router)와 페이지 라우터(Pages Router)라는 두 가지 라우터가 있습니다. 앱 라우터는 서버 컴포넌트 및 스트리밍과 같은 React의 최신 기능을 사용할 수 있는 최신 라우터입니다. Pages Router는 서버에서 렌더링된 React 애플리케이션을 구축할 수 있게 해 주고 이전 Next.js 애플리케이션에 대해 계속 지원되는 최초의 Next.js 라우터입니다.

사이드바 상단에는 앱 라우터와 페이지 라우터 기능 간에 전환할 수 있는 드롭다운 메뉴가 있습니다. 각 디렉터리마다 고유한 기능이 있으므로 어떤 탭이 선택되었는지 추적하는 것이 중요합니다.

페이지 상단의 이동 경로는 앱 라우터 문서를 보고 있는지 페이지 라우터 문서를 보고 있는지도 나타냅니다.

이 문서를 이용하는 방법

이 문서는 바로 Next.js 프로젝트를 구성하여 실습할 수 있도록 주요 구성요소를 쉬운 순에서 어려운 순으로 단계적으로 구성하였습니다. 처음 설치부터, 데이터 페칭, 상태관리를 마치면 기본적으로 Next.js/React 를 활용한 웹 어플리케이션을 구성할 수 있습니다.

이문서는 계속 업데이트 됩니다. 그래서 독자분들의 피드백이 중요합니다. 페이지 마다 댓글을 통해 소중한 의견을 남겨 주세요