Next.js2 [Next.js] Pages Router 와 App Router 회사 프로젝트와 현재 진행 중인 개인 프로젝트 모두 Next.js를 사용했다.지금까지는 Pages Router를 사용해 왔는데, 이번에는 App Router와 어떤 차이가 있는지 간단히 정리해보려고 한다.Pages Router내가 사용하고 있는 방식은 Pages Router이다.Pages Router는 pages 폴더를 기준으로 URL이 만들어진다.예를 들어 아래와 같은 구조라면pages ├ index.tsx ├ dental │ └ index.tsx └ community └ index.tsxURL은 다음과 같다.//dental/community파일 구조와 URL 구조가 연결되어 있어서 페이지를 찾거나 관리하기 편했다.공통 설정은 주로 _app.tsx에서 관리한다.App RouterNext.js.. 2026. 6. 14. Next.js 파일 기반 라우팅과 React Router의 차이 React를 처음 사용할 때는 React Router를 사용했었고, 이후 실무와 개인 프로젝트에서는 Next.js를 주로 사용하게 됐다.예전 방식과 지금 사용하고 있는 방식의 차이를 기록해두려고 한다. React Router를 사용할 때는 페이지를 만드는 것과 별개로 라우터 설정도 함께 해줘야 했다.예를 들어 치과 정보 페이지를 만든다면 컴포넌트를 만드는 것만으로 끝나는 것이 아니라, 라우터에도 직접 경로를 등록해야 했다.} />페이지가 많아질수록 라우터 설정도 계속 늘어나고, 새로운 페이지를 만들 때마다 파일 생성 → 라우터 등록 → 메뉴 연결 과정을 반복해야 했다.하지만 Next.js에서는 파일 자체가 URL이 된다. 예를 들어pages ├ index.tsx └ dental └ index.ts.. 2026. 6. 14. 이전 1 다음 728x90