패스트캠퍼스 챌린지 24일차 (Next.js 기본3)

22.2.16 (수) +24days

Dynamic Routes

https://nextjs.org/learn/basics/dynamic-routes

Learn | Next.js

getStaticPaths / remark / dynamic routes

 

/posts 하위에 md 파일이 있을 때 해당 페이지를 statically generating 한다.

https://nextjs.org/learn/basics/dynamic-routes/page-path-external-data

Learn | Next.js

md 파일의 이름이 path가 되도록 한다.

(ex. /posts/ssg-ssr, /posts/pre-rendering)

 

작업순서

[id].js

[ ] 에 속한 내용은 dynamic routes 되는 요소

 

getStaticProps

https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticpaths

[{ params: { id: string }}] 목록을 리턴한다. params 안에 dynamic routes key가 들어있어야 한다.

getStaticProps

https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops

id 별로 md에서 데이터를 읽어서 page에 props로 전달하도록 함

Render Markdown

https://nextjs.org/learn/basics/dynamic-routes/render-markdown

remark로 html에 md content 보여주기

npm install remark remark-html

Polishing the Post Page

https://nextjs.org/learn/basics/dynamic-routes/polishing-post-page

https://nextjs.org/learn/basics/dynamic-routes/polishing-index-page

 

Dynamic Routes Details

https://nextjs.org/learn/basics/dynamic-routes/dynamic-routes-details

getStaticPaths 옵션 fallback: true 를 줬다면,

const router = useRouter();

router.isFallback

 

Catch-all Routes

전체 받으려면

/pages/posts/[...id].js 로 셋하고

/posts/a /post/a/b posts/a/b/c 가 있는 경우...

getStaticPaths에서 [ { params: {id: [’a’, ‘b’, ‘c’] } } ] 로 전달해야 함

 

여기에서 질문!

/posts/[category]/[id] 식이라면 어떻게 구성할까?

[category] 라는 폴더를 만들고

[id] 파는 파일을 만들어서 구성할 수 있다.

 

API Routes

https://nextjs.org/learn/basics/api-routes/api-routes-details

API를 호출하고 싶은데 서버를 만들고 싶지 않고 next에서 제공하는 api를 쓸 수 있다.

/pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

 

정리

Dynamic Routes ⇒ getStaticPaths

키 값 ⇒ 동적으로 만들어서 대응

fallback ⇒ false 면 404, true 면 router.isFallback

API Routes ⇒ /pages/api/hello.js

 

 

 

 

22.2.16 +24days

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다