Next.js를 사용하는 이유와 App Router와 Pages Router

1️⃣ Next.js란 무엇일까?

Next.js는 React를 기반으로 하는 웹 개발 프레임워크입니다.

 

2️⃣ 프레임워크와 라이브러리

프레임워크

개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합

 

라이브러리

공통 기능의 모듈화가 이루어진 프로그램의 집합

 

3️⃣ Next.js를 사용하는 이유

개발자가 개발에만 집중할 수 있도록 프레임워크로서의 역할을 수행하고 API Router를 지원하여 full stack 웹 개발이 가능하도록 해줍니다.

 

4️⃣ App Router와 Pages Router

App Router

• app 폴더 하위에 모든 파일을 추가할 수 있습니다.
• 폴더명으로 경로를 정의하고, 폴더 안에 page.tsx로 작성된 파일만 경로로써 사용할 수 있습니다.

app/(root)/login/page.tsx -> /login
app/(root)/products/page.tsx -> /mypage

• products의 상세 페이지를 보여주고 싶을 경우에는 해당 폴더 안에 [id] 폴더를 하위로 만들어주면 경로 끝에 해당 아이템의 id 값이 추가되어 페이지를 이동합니다. 그럼 이동한 페이지에서는 해당하는 id값의 데이터를 보여줍니다. 이처럼 라우트 경로에 특정 값을 넣어 페이지를 이동할 수 있게 하는 것을 동적 라우팅(Dynamic Routing)이라고 합니다.

Pages Router

• pages 폴더 하위의 모든 폴더/파일명을 기반으로 경로로써 사용할 수 있습니다.

pages/index.tsx -> /
pages/content/index.tsx -> /content