[Next.js] 시작하기③ Routing

Dynamic Routes

/posts/:id 경로의 post를 라우팅하고 싶을 경우

1. pages/posts/[id].ts 파일을 생성

2. getStaticPaths()가 id 값들의 리스트를 반환
   리스트 원소의 타입은 object이다. 그리고 이 객체는 반드시 params안에 key가 id인 객체를 가지고 있어야 한다.

    return fileNames.map(fileName => {
      return {
        params: {
          id: fileName.replace(/\.md$/, '')
        }
      }
    })

   filename([id].js)의 id와 같은 key여야 한다.

3. getStaticProps()가 id에 필요한 데이터들을 fetch

getStaticPaths()

Fallback

fallback: false일 경우 404 페이지를 생성한다.
true일 경우는 getStaticProps()의 행동이 달라진다.

• getSTaticPaths()로 반환된 경로가 빌드 타임에 HTML로 빌드된다.
• 빌드 타임에 생성되지 않는 경로는 404 페이지를 생성하지 않는다.
  대신, Next.js는 이러한 경로에 대한 첫 번째 요청에서 페이지의 fallback을 제공한다.
• 백그라운드에서 Next.js는 요청된 경로를 정적으로 생성한다.

모든 Routes 잡기

... 를 사용하면 된다.

pages/posts/[...id].js 일 경우

• /posts/a
• /posts/a/b
• /posts/a/b/c

모두 가능하다.

이렇게 하려면 getStaticPaths()에서 key id에 꼭 이렇게 줘야 한다.

return [
  {
    params: {
      // list로
      id: ['a', 'b', 'c']
    }
  }
  //...
]

Router

Next.js에서 라우터에 접근하려면 useRouter hook을 사용할 수 있다.

404 Page

pages/404.js 를 생성하여 커스텀 404 페이지를 만들 수 있다.

---

API Routes

API Routes 생성하기

pages/api 디렉토리에 이런 형식을 가지고 있으면 lambda 처럼 serverless function을 배포할 수 있다.

// req = HTTP incoming message, res = HTTP server response
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' })
}