NEXT.js의 라우팅에 대해.araboja

 

현재 NEXT.js는 계속 업데이트 되고있다. 지금은 13.3 버전임 ㅎ

 

12버전 선배님들은 

app폴더랑 pages폴더가 따로 구분되어있었다.

그리고 pages폴더에서 만든 페이지들이 자동으로 라우팅이 됐었다. 

그냥 pages폴더에 apple.tsx 파일만들면  localhost:3000/apple 가면 끝났음;;

 

근데 13버전으로 바뀌면서 pages 폴더가 사라졌다.

그래서 사용자가 직접 app폴더안에 라우팅 하고자하는 폴더를 만들고 그곳에 page파일을 만어야 한다.

Q) 더 귀찮아진거 같은데.. 하향패치 아님?  

A) ㅇㅇ;; 더 귀찮아지긴했는데.. 공통 컴포넌트 사용면에있어서 상향됨.. 

---

 

 

1. 정적 라우팅

 

app폴더 안에 라우팅 하기원하는 폴더 만들고 page파일 만들고,

하위 요소들 더 만들고싶으면 자식 폴더 만들고 또 page파일 만들고 뿌리 내리면 됐음. 

 

대충 이런식으로 하나하나 하위폴더들 만들면 정적 라우팅 됨

localhost:3000/apple/icecream
localhost:3000/apple/juice

localhost:3000/apple/candy

 

이렇게 가면되는데 갑자기 localhost:3000/apple/tree  << 이렇게하면 작동안됨 

 

뭔가 자식폴더들 3,4개 수준이 아니라 50개 100개 필요한 경우도 있잖음?  하나하나 정적으로 하드코딩 할순없으니까

동적으로 만들수있음

 

이럴땐 리액트의 props 기능을 이용함

 

2. 동적 라우팅

 

만드는법:

1.app안에 apple폴더를 만들고

2. apple폴더 하위에 동적 라우팅이 필요한 자식폴더를 생성하고 폴더명을 [slug]라고 지정함. (이게 국룰이라고 하는데, 원하는 걸로 바꿔도 됨. [food] 이렇게 ㅇㅇ;)

 

 

type Props = {
  params: {
    slug: string;
  };
};

export default function page({ params }: Props) {
  return (
    <div>
      <div>{params.slug} 레시피!!</div>
      <div>{params.slug} 무봤나 ㅋㅋ </div>
    </div>
  );
}

이렇게 해야함. 무조건 {params} << 라고 받아와야 한다고함.

내 멋대로 {param} 이라고 해보니까 안되더라; 부모에서 {params}로 넘겨주니까 그런듯 ㅇㅇ;

 

이렇게 설정하고 이제 

 

localhost:3000/apple/applejuice 로 들어가보면

 

이렇게 뜸. 덕분에 이제 100개 1000개도 거뜬할듯

---

근데 또 생각해보면 동적이랑 정적이랑 합쳐서 쓸수도 있음;;;; 

 

동적 라우팅 필요한건 [slug]쓰고 무적권 필요한건 apple 하위폴더로 몇개 만들어 두면 되긴함 

자세하게 안써도 먼말인지 알지?ㅋ