Next.js를 학습하면서 편하다라고 느낀것은 바로 라우팅이다.
Next.js는 기본적으로 페이지 기반의 라우팅 시스템을 제공한다.
파일 시스템에 기반한 라우팅은 빠르고 쉽게 웹 애플리케이션의 구조를 만들 수 있게 해주며 구조는 다음과 같이 직관적이다.
기존13버전 이전에는 Page라는 폴더안에서 라우팅을 폴더 디렉토리 구조로 정의해줬지만 13버전 부터는 그냥 기존의 app폴더 내에서 원하는 폴더를 생성하면서 원하는 구조를 구현해주면 된다.
정적 라우팅
정적 라우팅이란?
그냥 처음에 생성된 app폴더안에 원하는 라우팅대로 폴더를 만들어주면 그만이다.
예를 들어 기본 URL (Ex. localhost:3000/넥스트제이에스/어렵다)에 페이지를 만들어주고 싶다면
[app]폴더안에 [넥스트제이에스]라는 폴더를 만들어주고 그 폴더안에 [어렵다] 라는 폴더를 만들어주면 형성이 된다. 폴더마다 page.js로 내용물을 작성해주면 라우팅이 완성이다.
동적 라우팅
동적 라우팅이란 ?
웹 페이지 라우팅을 고정된 경로가 아닌, 동적으로 생성된 경로를 처리하는 방법이다.
예를들자면 쇼핑몰사이트에서 치마,바지,바람막이,롱패딩들에 해당하는 구조를
/products/롱패딩,/products/바람막이,/products/치마,/products/바지
이런식으로 전부 구현해주기엔 개발 생산성이 많이 떨어질 것이므로, 재사용성을 늘려주기위해 동적 라우팅을 사용하면 다음과 같다.
/products/[제품]
이런식으로 구성을 하게되면은 /products/롱패딩,/products/바람막이,/products/치마,/products/바지와 같은 해당경로로 접근했을 때 props만 조절해주면 재사용성이 올라갈 것이다.
그러면 이를 구현해주는 방식은 다음과 같다 .
/products폴더안에 []괄호와함께 원하는 폴더명을 지정해주면 되는 것이다.
일반적으로는 [slug]라고 해준다. [slug]말고 [item]이라고 해주던 그건 자유다.
이렇게 [slug]폴더안에 pate.tsx를 구성해주면 일단 동적 라우팅은 형성이 되었다.
products/ 아무거나 넣어도 404는 안뜰 것이다.
다음에는 products/[slug]폴더안의 page.tsx의 코드이다.
import React from "react";
//Props의 타입을 명시해준다.
type Props = {
params: {
slug: string;
};
};
function page({ params }: Props) {
return <div>{params.slug}</div>;
//접근한 params의 내용물을 화면에 출력해준다.
}
export default page;이렇게 구현해주면
/products/skirt로 접근한다면 div태그 안의 내용물이 skirt라고 출력이 될 것이다.
이후에 다른 /proucts/[아무거나] 접근해도 내용에 반영이 될 것입니다.
