https://nextjs.org/learn/basics/dynamic-routes
\n블로그 데이터로 index page를 채웠지만 아직 개별 블로그 pages를 만들지 않았다. 이러한 페이지의 URL이 블로그 데이터에 의존하기를 원하므로 dynamic routes를 사용해야 한다.
\ngetStaticPaths 를 사용해서 정적으로 페이지 만들기getStaticProps를 어떻게 작성해서 가져오는지remark를 사용해서 markdown을 renderingdynamic routes를 사용해서 page를 어떻게 연결하는지dynamic routes에서 유용한 정보들https://nextjs.org/learn/basics/dynamic-routes/page-path-external-data
\nexternal data에 의존한 page content를 만들었다. getStaticProps을 사용해 필요한 데이터를 가져오고 index page에 render 했다. 이번에는 external data에 의존한 page path에 대해서 얘기를 해본다. Next.js에서는 external data에 의존한 path를 가지고 정적 페이지를 생성하는데 이 것을 dynamic URLs이라고 말한다.
blog posts를 위해서 dynamic routes를 생성해보자.
\n/posts/<id>ssg-ssr.md는 /posts/ssg-ssr로<id>를 dynamic 하게 생성이 가능하다.
https://nextjs.org/learn/basics/dynamic-routes/page-path-external-data
\n아래와 같이 파일을 구성
\n[id].js를 pages/posts 안에 생성이전에 생성했던 lib/posts.js에 아래와 같이 함수를 추가한다. .md를 제거하고 파일명을 받아서 id로 사용하기 위해서
export function getAllPostIds() {\n const fileNames = fs.readdirSync(postsDirectory)\n\n // Returns an array that looks like this:\n // [\n // {\n // params: {\n // id: 'ssg-ssr'\n // }\n // },\n // {\n // params: {\n // id: 'pre-rendering'\n // }\n // }\n // ]\n return fileNames.map((fileName) => {\n return {\n params: {\n id: fileName.replace(/\\.md$/, \"\"),\n },\n }\n })\n}pages/posts/[id].js에 아래와 같이 추가
import { getAllPostIds } from \"../../lib/posts\"그리고 getStaticPaths를 생성하고 호출
export async function getStaticPaths() {\n const paths = getAllPostIds()\n return {\n paths,\n fallback: false,\n }\n}https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops
\nid가 주어졌을때 post를 렌더링하기 위해서는 데이터 fetch를 하는게 필요하다. 그 작업을 위해서 lib/posts.js에 id를 기반으로 post를 리턴하는 함수를 구성하자
export function getPostData(id) {\n const fullPath = path.join(postsDirectory, `${id}.md`)\n const fileContents = fs.readFileSync(fullPath, \"utf8\")\n\n // Use gray-matter to parse the post metadata section\n const matterResult = matter(fileContents)\n\n // Combine the data with the id\n return {\n id,\n ...matterResult.data,\n }\n}pages/posts/[id].js에 아래와 같이 코드를 추가하고
import { getAllPostIds, getPostData } from \"../../lib/posts\"getStaticProps의 코드를 추가
export async function getStaticProps({ params }) {\n const postData = getPostData(params.id)\n return {\n props: {\n postData,\n },\n }\n}Post 컴포넌트를 postData를 사용하도록 변경
export default function Post({ postData }) {\n return (\n <Layout>\n {postData.title}\n <br />\n {postData.id}\n <br />\n {postData.date}\n </Layout>\n )\n}https://nextjs.org/learn/basics/dynamic-routes/render-markdown
\nmarkdown content를 rendering 하기 위해서 remark 라이브러리를 사용
npm install remark remark-htmllib/posts.js에 import
import remark from \"remark\"\nimport html from \"remark-html\"getPostData()에 remark를 추가
export async function getPostData(id) {\n const fullPath = path.join(postsDirectory, `${id}.md`)\n const fileContents = fs.readFileSync(fullPath, \"utf8\")\n\n // Use gray-matter to parse the post metadata section\n const matterResult = matter(fileContents)\n\n // Use remark to convert markdown into HTML string\n const processedContent = await remark()\n .use(html)\n .process(matterResult.content)\n const contentHtml = processedContent.toString()\n\n // Combine the data with the id and contentHtml\n return {\n id,\n contentHtml,\n ...matterResult.data,\n }\n}\n\n\n
await가 필요하기 때문에getPostData에async를 추가 async에 대해서 알아보기
pages/posts/[id].js의 getSTaticProps에서도 getPostData를 할때 await를 사용해야 한다.
export async function getStaticProps({ params }) {\n // Add the \"await\" keyword like this:\n const postData = await getPostData(params.id)\n // ...\n}마지막으로 Post 컴포넌트를 dangerouslySetInnerHTML을 사용해서contentHtml을 렌더링하도록 수정
export default function Post({ postData }) {\n return (\n <Layout>\n {postData.title}\n <br />\n {postData.id}\n <br />\n {postData.date}\n <br />\n <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />\n </Layout>\n )\n}https://nextjs.org/learn/basics/dynamic-routes/polishing-post-page
\ntitle to the Post Pagepages/posts/[id].js에 post data를 사용해서 title tag를 추가 next/head를 import하고 title을 추가해보자
import Head from \"next/head\"\n\nexport default function Post({ postData }) {\n return (\n <Layout>\n <Head>\n <title>{postData.title}</title>\n </Head>\n ...\n </Layout>\n )\n}date를 format하기 위해서 date-fns의 라이브러리를 사용
npm install date-fnsDate 컴포넌트를 components/date.js에 생성
import { parseISO, format } from \"date-fns\"\n\nexport default function Date({ dateString }) {\n const date = parseISO(dateString)\n /* January 2, 2020 */\n return <time dateTime={dateString}>{format(date, \"LLLL d, yyyy\")}</time>\n}\n\n\n
pages/posts/[id].js에서 사용하면 된다.
// Add this line to imports\nimport Date from \"../../components/date\"\n\nexport default function Post({ postData }) {\n return (\n <Layout>\n ...\n {/* Replace {postData.date} with this */}\n <Date dateString={postData.date} />\n ...\n </Layout>\n )\n}마지막으로 pages/posts/[id].js에 CSS를 추가해보자.
// Add this line\nimport utilStyles from '../../styles/utils.module.css'\n\nexport default function Post({ postData }) {\n return (\n <Layout>\n <Head>\n <title>{postData.title}</title>\n </Head>\n <article>\n <h1 className={utilStyles.headingXl}>{postData.title}</h1>\n <div className={utilStyles.lightText}>\n <Date dateString={postData.date} />\n </div>\n <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />\n </article>\n </Layout>\n )https://nextjs.org/learn/basics/dynamic-routes/polishing-index-page
\npages/index.js에 각 포스트에 링크(Link)를 넣어 업데이트 해보자.
import Link from \"next/link\"\nimport Date from \"../components/date\"Home 컴포넌트의 li tag를 변경하자
<li className={utilStyles.listItem} key={id}>\n <Link href={`/posts/${id}`}>\n <a>{title}</a>\n </Link>\n <br />\n <small className={utilStyles.lightText}>\n <Date dateString={date} />\n </small>\n</li>https://nextjs.org/learn/basics/dynamic-routes/dynamic-routes-details
\ngetStaticProps와 getStaticPaths로 어떤 데이터 소스로부터 데이터를 fetch 할 수 있다. getAllPostIds는 external API endpoint에서 가져올 수 있다.
export async function getAllPostIds() {\n // Instead of the file system,\n // fetch post data from an external API endpoint\n const res = await fetch(\"..\")\n const posts = await res.json()\n return posts.map((post) => {\n return {\n params: {\n id: post.id,\n },\n }\n })\n}yarn dev), getStaticPaths는 every request 실행getStaticPaths는 build time에 실행getStaticPaths에서 fallback: false는 404 page의 결과를 반환, fallback is true라면 getStaticProps의 동작이 변경된다.
getStaticPaths에서 반환된 경로는 반드시 빌드시에 HTML로 렌더링fallback 버전을 제공Dynamic routes는 3개의 dots(...)을 추가해서 모든 경로를 포착하도록 확장이 가능하다.
pages/posts/[...id].js는 /posts/a, /posts/a/b/… 등에 매칭getStaticPaths에서 id key의 값을 배열이 형태로 사용하면 된다.
return [\n {\n params: {\n // Statically Generates /posts/a/b/c\n id: [\"a\", \"b\", \"c\"],\n },\n },\n //...\n]그리고 getStaticProps에서 params.id는 array로
export async function getStaticProps({ params }) {\n // params.id will be like ['a', 'b', 'c']\n}next/router로 부터 useRouter를 importing 할수 있다.
404 page를 커스텀하게 생성하고 싶으면 pages/404.js를 만들면 된다. 이 파일은 build time에 정적으로 생성된다.