Next.js - Dynamic Routes Details

Dynamic Routes Details

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

md 파일의 이름이 path가 되도록 한다.
(ex. /posts/ssg-ssr, /posts/pre-rendering)

getStaticPaths

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false // getStaticPath 에서 주지 않은 id는 404로 처리한다.
  }
}

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

fallback:true상태라면 컴포넌트 내에 router를 불러온다.
redirect 속성으로 404로 접속할 때 다른 페이지로 이동하게 만들 수 있다.

import {useRouter} from 'next/router'
const router = useRouter();
if(router.isFallback){
  return <div>Loading...</div>;
}

getStaticProps

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

export async function getStaticProps({ params }) {
  const postData = await getPostData(params.id)
  return {
    props: {
      postData
    }
  }
}

getStaticProps는 내부에서 getPostData 함수를 실행한다.

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')
  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents)
  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content)
  const contentHtml = processedContent.toString()
  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data
  }
}

getPostData는 id를 매개변수로 받고 있고,
getStaticProps에 params.id를 인자로 넣어 호출된다.

Incremental Static Regeneration
모든 페이지를

Catch-all Routes

라우터 전체를 받으려면
pages/posts/[...id].js로 세팅하고
/post/a /posts/a/b posts/a/b/c가 있는 경우
getStaticPaths에서 [{params: {id: ['a','b','c']}}]로 전달해야 한다.

/posts/[category]/[id] 형식이라면 어떻게 라우트를 구성해야 할까?

API Routes

넥스트에서 제공하는 API를 사용할 수 있다.
파일 시스템 안에서 제공한다.
ages/api/hello.js 생성 및 작성

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


//[id].js
  useEffect(()=>{
    const getText = async () => {
      const res = await fetch('/api/hello')
      const data = await res.json()

      alert(data.text);
    }
    getText()
  },[])