프레임워크/next.js

next.js 의 라우팅은 일반적인 페이지의 라우팅과 무엇이 다른가?

Next.js 라우팅 개요 Next.js 는 pages 개념 위에 파일 시스템을 기반으로 한 라우터를 가지고 있다. next.js 의 page 란 무엇일까? 글에서 알아봤듯, pages 디렉토리에 리액트 컴포넌트 파일을 추가하면, 우리가 따로 설정해주지 않아도 해당 URL 에 접근했을 때 자동 라우팅이 된다. pages 디렉토리 내부에 중첩 디렉토리를 만들고 파일을 배치하는 것만으로도 대부분의 라우팅 패턴을 정의할 수 있다. 인덱스 라우팅 index.js, index.ts 와 같은 파일은 언제나 메인 경로를 가리킨다. pages/index.js 와 같이 리액트 컴포넌트 파일을 추가하면, / 경로로 접근 가능하다. pages/blog/index.js 와 같이 리액트 컴포넌트 파일을 추가하면, /blog 경..

next.js 의 page 란 무엇일까?

개요 next.js 에서 page 란, pages 디렉토리 내부에 있는 .js, .jsx, .ts, .tsx 확장자를 가진 파일에서 export 된 리액트 컴포넌트 를 말한다. next.js 프로젝트 내부의 pages 디렉토리에 리액트 컴포넌트 파일(component.js)을 두면, next.js는 해당 파일을 읽어서 http://localhost:3000/component 경로에 접근했을 때, 해당 컴포넌트를 제공한다. 예시 pages/about.js 라는 리액트 컴포넌트를 생성하면 http://localhost:3000/about에 접속했을 때 about.js가 보이는 개념이다. const About = () =>( 안녕하세요. jake seo입니다. ); export default About; ne..