Shallow Routing ?
Next.js 프레임워크에서 제공하는 라우팅 방식 중 하나로 이 방식은 파일 시스템 기반의 라우팅 구조를 사용한다.
일반적으로, 각 페이지는 Next.js 프로젝트 내의 pages 폴더 안에 별도의 파일로 생성되고 Shallow Routing은 이 파일 구조를 기반으로 페이지 경로를 생성한다.
Shallow Routing의 장점
Shallow Routing은 이러한 파일 시스템 구조를 바탕으로 페이지 경로를 생성하기 때문에, 경로가 변경될 경우 자동으로 해당 페이지로 연결된다. 이를 통해 개발자는 라우팅 설정에 대한 별도의 작업을 수행하지 않아도 되므로 개발 효율성이 높아진다.
또한, Shallow Routing은 동적 경로 매개변수를 사용할 수 있다. 이를 사용하면, 동일한 페이지 파일을 사용하면서도 다양한 경로에 접근할 수 있다. 예를 들어, pages 폴더 안에 [id].js 파일이 있다면, /페이지이름/123 경로로 해당 페이지에 접근할 수 있다. 이를 통해 개발자는 동일한 페이지 파일을 사용하면서도 다양한 경로를 처리할 수 있어 유연성이 높아짐
Shallow Routing의 예시
예를 들어, pages 폴더 안에 about.js 파일이 있다면, /about 경로로 해당 페이지에 접근할 수 있다. 마찬가지로, pages 폴더 안에 폴더를 생성하고 그 안에 파일을 넣으면, /폴더이름/파일이름 경로로 해당 페이지에 접근할 수 있다.
// pages/about.js
function About() {
return (
<div>
<h1>About Us</h1>
<p>We are a company that provides high-quality services to our customers.</p>
</div>
);
}
export default About;
위 코드는 Next.js 프로젝트의 페이지스 폴더 안에 about.js 파일로 생성되어 있으며 이 파일은 /about 경로로 접근할 수 있는 About 페이지를 생성한다.
이처럼 Shallow Routing은 파일 시스템 구조를 바탕으로 페이지 경로를 생성하므로 파일 이름과 경로 이름을 일치하도록 구성하는 것이 권장된다.
