Next.js - Routing

마크다운 까먹기 전에 얼른 블로그 써버리기

돌아왔다... next js로..
csr ssr ssg isr 아직은 좀 헷갈리는 단계이지만 뭔가 기존 React와는 조금 다른 느낌의 nextjs를 해보고 있다. 꽤 괜찮기도 하고 알잘딱 해주는 게 많은 것 같다.
바로 레스공

💡 Nested Routes

Next.js는 우선 파일 베이스 라우팅이다.
기존 React에서 Routing으로 꽤나 고생해본 사람들은 Next.js의 달콤한 파일 베이스 라우팅에 푹 빠져들 수도 있다.

우선 여차저차 create-next-app을 하고 localhost:3000을 켜게 되면 다들 알다시피 이런 모습일 것이다. :3000 뒤에 당연히 index.js가 있다는 것도 알고 있을 것이다.

위 주소창엔 사실 http://localhost:3000라고 루트(root) 폴더인 "/"만 있는 경우이다.

그렇다면 우리가 해보고자 하는 라우팅을 해보자
생각보다 Next.js에서 편리하게 개발할 수 있도록 지원해주는게 많아서 쉽게 할 수 있을 것이다.

먼저 예를들어

pages/category/shoes/nike
pages/category/top/adidas

를 만들고 싶어 한다면 어떻게 해야 할까?

먼저 기본적으로 난 Next.js에서 파일 디렉터리 구조를 만들 때 최상위 폴더 라인에 pages가 아닌 src/pages를 만든다.
(뭔가... 개인적으로 가독성이 높아 보이는 느낌쓰)

본론으로 들어가서 Next.js는 파일 베이스 라우팅이라고 위에서 말했다. 그럼 어떻게?
되게 간단하게

pages를 만들고 그 안에 내가 만들고자 하는 페이지를 폴더에 맞게 만들어주면 끝난다.
ㄱ.. 간단해...

pages/category/shoes/nike.js -> localhost:3000/category/shoes/nike

가 되는 것이다.

💡 [slug]. js

[slug]란? 무엇인가?
내가 이해한 바로는 Next.js에서 데이터에 따라 동적으로 페이지를 만들 수 있는 기능이다.

• pages/blog/[id]. js
• pages/blog/[... slug]. js

[id]. js는id기반으로 동적 페이지를 만들 수 있다.
실제로 지금 프로젝트에서 유저가 회원가입하면 userUid값을 난수로 뿌려주는 로직이 포함되어 있어서 난수로 만들어줘도 동적으로 잘 동작하는 페이지가 있다.
[... slug]. js는 경로까지도 동적으로 만들 수 있다.

• blog/post/123/2222/33
  이때 파일명은 자유롭게 설정이 가능하고, 폴더 또한 위 규칙을 따른다.

주의할 점

만약 [slug]로 폴더를 만들고 같은 depth에 post라는 폴더가 있다고 가정해 보자

그럼 [slug]에 post를 넣으면... 뭐가 먼저 읽히지..?

[slug]에 post를 적은 폴더/페이지가 아닌 명시적으로 확실히 폴더명이 post인 폴더/페이지가 먼저 읽힌다.